Crear y personalizar un formulario

Si va a crear una aplicación que requiera que los usuarios escriban una cantidad significativa de información, es probable que quiera crear un formulario para que se rellenen. En este artículo se mostrará lo que necesita saber para crear un formulario que sea útil y sólido.

Analizaremos qué controles XAML incluye un formulario, cómo organizarlos mejor en tu página y cómo optimizar el formulario para diferentes tamaños de pantalla. Pero dado que un formulario trata sobre la posición relativa de los elementos visuales, primero analizaremos el diseño de página con XAML.

¿Qué necesitas saber?

UWP no tiene un control de formulario explícito que puedes agregar a tu aplicación y configurar. En su lugar, deberá crear un formulario mediante la organización de una colección de elementos de interfaz de usuario en una página.

Para ello, deberá comprender los paneles de diseño . Estos son contenedores que contienen los elementos de la interfaz de usuario de la aplicación, lo que te permite organizarlos y agruparlos. Colocar paneles de diseño dentro de otros paneles de diseño le ofrece un gran control sobre dónde y cómo se muestran los elementos en relación entre sí. Esto también facilita mucho la adaptación de la aplicación a los tamaños de pantalla cambiantes.

Lea esta documentación sobre los paneles de diseño. Dado que los formularios normalmente se muestran en una o varias columnas verticales, querrá agrupar elementos similares en un StackPanel y organizarlos dentro de relativePanel si es necesario. Empiece a reunir algunos paneles ahora, si necesita una referencia, a continuación se muestra un marco de diseño básico para un formulario de dos columnas:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
        <!--Content-->
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Customer">
        <!--Save and Cancel buttons-->
    </StackPanel>
</RelativePanel>

¿Qué pasa en un formulario?

Tendrás que rellenar tu formulario con varios controles XAML . Probablemente estás familiarizado con ellos, pero no dudes en leer si necesitas un repaso. En concreto, querrá controles que permitan al usuario escribir texto o elegir entre una lista de valores. Esta es una lista básica de opciones que puede agregar: no es necesario leer todo sobre ellas, basta con que comprenda lo que parecen y cómo funcionan.

• TextBox permite al usuario escribir texto en la aplicación.
• toggleSwitch permite al usuario elegir entre dos opciones.
• DatePicker permite a un usuario seleccionar un valor de fecha.
• TimePicker permite a un usuario seleccionar un valor de hora.
• ComboBox expande para mostrar una lista de elementos seleccionables. Puede obtener más información sobre ellos aquí.

También puede agregar botones para que el usuario pueda guardar o cancelar.

Controles de formato en tu diseño

Sabe cómo organizar paneles de diseño y tener elementos que le gustaría agregar, pero ¿cómo deben tener formato? La página de formularios tiene algunas instrucciones de diseño específicas. Lea las secciones sobre Tipos de formularios y diseño para obtener consejos útiles. Analizaremos la accesibilidad y el diseño relativo más brevemente.

Teniendo en cuenta ese consejo, debe empezar a agregar los controles que prefiera en el diseño, asegurándose de que se les asignan etiquetas y se espacian correctamente. Por ejemplo, este es el esquema básico para un formulario de página única mediante el diseño, los controles y las instrucciones de diseño anteriores:

<RelativePanel>
    <StackPanel x:Name="Customer" Margin="20">
        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" HorizontalAlignment="Left" />
            <RelativePanel>
                <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" HorizontalAlignment="Left" />
                <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0" RelativePanel.RightOf="City">
                    <!--List of valid states-->
                </ComboBox>
            </RelativePanel>
    </StackPanel>
    <StackPanel x:Name="Associate" Margin="20" RelativePanel.Below="Customer">
        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" HorizontalAlignment="Left" />
        <DatePicker x:Name="TargetInstallDate" Header="Target install Date" HorizontalAlignment="Left" Margin="0,24,0,0"></DatePicker>
        <TimePicker x:Name="InstallTime" Header="Install Time" HorizontalAlignment="Left" Margin="0,24,0,0"></TimePicker>
    </StackPanel>
    <StackPanel x:Name="Save" Orientation="Horizontal" RelativePanel.Below="Associate">
        <Button Content="Save" Margin="24" />
        <Button Content="Cancel" Margin="24" />
    </StackPanel>
</RelativePanel>

No dude en personalizar los controles con más propiedades para una mejor experiencia visual.

Hacer que el diseño tenga capacidad de respuesta

Los usuarios pueden ver la interfaz de usuario en una variedad de dispositivos con distintos anchos de pantalla. Para asegurarse de que tienen una buena experiencia independientemente de su pantalla, debe usar diseño dinámico. Lea esa página para obtener buenos consejos sobre las filosofías de diseño que debe tener en cuenta a medida que continúe.

La página Diseños dinámicos con XAML proporciona información general detallada sobre cómo implementar esto. Por ahora, nos centraremos en diseños fluidos y estados visuales en XAML.

El esquema de formulario básico que ya hemos reunido es una distribución fluida, ya que depende principalmente de la posición relativa de los controles, utilizando únicamente un mínimo de tamaños y posiciones de píxeles específicos. Tenga en cuenta esta guía para más interfaces de usuario que puede crear en el futuro.

Los diseños con capacidad de respuesta son estados visuales. Un estado visual define los valores de propiedad que se aplican a un elemento determinado cuando se cumple una condición determinada. Infórmate sobre cómo hacerlo en xamly luego impleméntalos en tu formulario. Este es el aspecto de un muy básico en nuestro ejemplo anterior:

<Page ...>
    <Grid>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState>
                    <VisualState.StateTriggers>
                        <AdaptiveTrigger MinWindowWidth="640" />
                    </VisualState.StateTriggers>

                    <VisualState.Setters>
                        <Setter Target="Associate.(RelativePanel.RightOf)" Value="Customer"/>
                        <Setter Target="Associate.(RelativePanel.Below)" Value=""/>
                        <Setter Target="Save.(RelativePanel.Below)" Value="Customer"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <RelativePanel>
            <!-- Customer StackPanel -->
            <!-- Associate StackPanel -->
            <!-- Save StackPanel -->
        </RelativePanel>
    </Grid>
</Page>

Importante

Al usar StateTriggers, asegúrese siempre de que VisualStateGroups esté asociado al primer elemento secundario de la raíz. Aquí, Grid es el primer elemento secundario del elemento raíz Page.

No es práctico crear estados visuales para una amplia gama de tamaños de pantalla, ni es probable que más de un par tengan un impacto significativo en la experiencia de usuario de tu aplicación. Se recomienda diseñar en su lugar algunos puntos de interrupción clave: puede leer más aquí.

Agregar compatibilidad con accesibilidad

Ahora que tienes un diseño bien construido que responde a los cambios en los tamaños de pantalla, lo último que puedes hacer para mejorar la experiencia del usuario es hacer que la aplicación sea accesible. Hay mucho que puede entrar en esto, pero en un formulario como este es más fácil de lo que parece. Céntrese en lo siguiente:

• Compatibilidad con teclado: asegúrese de que el orden de los elementos de los paneles de la interfaz de usuario coincida con la forma en que se muestran en pantalla, por lo que un usuario puede desplazarse fácilmente por ellos.
• Compatibilidad con lectores de pantalla: asegúrese de que todos los controles tengan un nombre descriptivo.

Al crear diseños más complejos con más elementos visuales, querrá consultar la lista de comprobación de accesibilidad para obtener más detalles. Después de todo, aunque la accesibilidad no es necesaria para una aplicación, le ayuda a alcanzar e interactuar con un público mayor.

Ir más lejos

Aunque has creado un formulario aquí, los conceptos de diseños y controles son aplicables en todas las interfaces de usuario XAML que puedas construir. No dude en volver a través de los documentos a los que hemos vinculado y experimentar con el formulario que tiene, agregando nuevas características de interfaz de usuario y refinando aún más la experiencia del usuario. Si desea obtener instrucciones paso a paso a través de características de diseño más detalladas, consulte nuestro tutorial de diseño adaptable.

Los formularios tampoco tienen que existir en un vacío: puede ir un paso más allá e insertar los suyos en un patrón de lista o detalles de o un NavigationView. O bien, si quiere trabajar en el código subyacente del formulario, puede comenzar con nuestro resumen de eventos de .

API y documentos útiles

Este es un resumen rápido de las API y otra documentación útil que le ayudará a empezar a trabajar con el enlace de datos.

API útiles

Interfaz de Programación de Aplicaciones (API)	Descripción
Controles útiles para formularios	Lista de controles de entrada útiles para crear formularios e instrucciones básicas sobre dónde usarlos.
Cuadrícula	Panel para organizar elementos en diseños de varias filas y de varias columnas.
RelativePanel	Panel para organizar elementos en relación con otros elementos y con los límites del panel.
StackPanel	Panel para organizar elementos en una sola línea horizontal o vertical.
VisualState	Permite establecer la apariencia de los elementos de la interfaz de usuario cuando están en estados concretos.

Documentos útiles

Tema	Descripción
Información general sobre accesibilidad	Información general a gran escala de las opciones de accesibilidad en las aplicaciones.
Lista de comprobación de accesibilidad	Una lista de comprobación práctica para asegurarse de que la aplicación cumple los estándares de accesibilidad.
Descripción general de eventos de	Detalles sobre cómo agregar y estructurar eventos para controlar las acciones de la interfaz de usuario.
Formularios	Guía general para crear formularios.
paneles de diseño	Proporciona información general sobre los tipos de paneles de diseño y dónde usarlos.
patrón de lista y detalles	Patrón de diseño que se puede implementar en torno a una o varias formas.
NavigationView (Vista de navegación)	Control que puede contener uno o varios formularios.
Diseño con capacidad de respuesta	Información general sobre los principios de diseño con capacidad de respuesta a gran escala.
Diseños dinámicos con XAML	Información específica sobre los estados visuales y otras implementaciones de diseño dinámico.
Tamaños de pantalla para diseño responsivo	Instrucciones sobre los tamaños de pantalla a los que deben adaptarse los diseños adaptativos.

Ejemplos de código útiles

Ejemplo de código	Descripción
Base de Datos de Pedidos de Clientes	Consulte diseño y formularios en acción en un ejemplo empresarial de varias páginas.
Galería de controles XAML	Consulta una selección de controles XAML y cómo se implementan.
Ejemplos de código adicionales	Elija Controles, Diseño, y Texto en la lista desplegable de categorías para ver ejemplos de código relacionados.