Crear y personalizar un formularioCreate and customize a form

Si está creando una aplicación que requiere que los usuarios ingresen una cantidad significativa de información, es probable que desee crear un formulario para que rellenen. En este artículo le mostrará lo que necesita saber para crear un formulario que sea útil y sólido.If you're creating an app that requires users to input a significant amount of information, chances are you'll want to create a form for them to fill out. This article will show you what you need to know in order to create a form that is useful and robust.

Este no es un tutorial.This is not a tutorial. Si desea uno, consulte nuestro tutorial de diseño adaptable , que le proporcionará una experiencia guiada paso a paso.If you want one, see our adaptive layout tutorial, which will provide you with a step-by-step guided experience.

Analizaremos qué controles XAML entran en un formulario, cómo organizarlos mejor en su página y cómo optimizar su formulario para cambiar el tamaño de la pantalla.We'll discuss what XAML controls go into a form, how to best arrange them on your page, and how to optimize your form for changing screen sizes. Pero debido a que un formulario trata sobre la posición relativa de los elementos visuales, primero analicemos el diseño de la página con XAML.But because a form is about the relative position of visual elements, let's first discuss page layout with XAML.

¿Qué debes saber?What do you need to know?

UWP no tiene un control de formulario explícito que puede agregar a su aplicación y configurar.UWP does not have an explicit form control that you can add to your app and configure. En su lugar, tendrá que crear un formulario organizando una colección de elementos de interfaz de usuario en una página.Instead, you'll need to create a form by arranging a collection of UI elements on a page.

Para ello, tendrá que conocer los paneles de diseño.To do so, you'll need to understand layout panels. Estos son contenedores que contienen los elementos de la interfaz de usuario de su aplicación, lo que le permite organizarlos y agruparlos.These are containers that hold your app's UI elements, allowing you to arrange and group them. La colocación de paneles de diseño dentro de otros paneles de diseño le da un gran control sobre dónde y cómo se muestran sus elementos entre sí.Placing layout panels within other layout panels gives you a great deal of control over where and how your items display in relation to one another. Esto también hace que sea mucho más fácil adaptar su aplicación a los cambiantes tamaños de pantalla.This also makes it far easier to adapt your app to changing screen sizes.

Lea esta documentación sobre los paneles de diseño .Read this documentation on layout panels. Debido a que los formularios generalmente se muestran en una o más columnas verticales, querrá agrupar elementos similares en un StackPanel, y organizarlos dentro de un RelativePanel si es necesario.Because forms are usually displayed in one or more vertical columns, you'll want to group similar items in a StackPanel, and arrange those within a RelativePanel if you need to. Comience a armar 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:Start putting together some panels now — if you need a reference, below is a basic layout framework for a two-column form:

<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é se incluye en un formulario?What goes in a form?

Deberá rellenar su formulario con una variedad de Controles de XAML.You'll need to fill your form with an assortment of XAML Controls. Probablemente esté familiarizado con eso, pero siéntase libre de leer si necesita un repaso.You're probably familiar with those, but feel free to read up if you need a refresher. En concreto, querrá controles que le permitan al usuario escribir texto o elegir de una lista de valores.In particular, you'll want controls that allow your user to input text or choose from a list of values. Esta es una lista básica de opciones que podría agregar: no necesita leer todo sobre ellas, solo lo suficiente para comprender su aspecto y funcionamiento.This is a basic list of options you could add – you don't need to read everything about them, just enough so you understand what they look like and how they work.

  • TextBox permite al usuario escribir texto en su aplicación.TextBox lets a user input text into your app.
  • ToggleSwitch permite al usuario elegir entre dos opciones.ToggleSwitch lets a user choose between two options.
  • DatePicker permite al usuario seleccionar un valor de fecha.DatePicker lets a user select a date value.
  • TimePicker permite al usuario seleccionar un valor de hora.TimePicker lets a user select a time value.
  • ComboBox se expande para mostrar una lista de elementos seleccionables.ComboBox expand to display a list of selectable items. Puede aprender más sobre ellos aquíYou can learn more about them here

También es posible que desee agregar botones , para que el usuario pueda guardar o cancelar.You also might want to add buttons, so the user can save or cancel.

Controles de formato en el diseñoFormat controls in your layout

Sabe cómo organizar paneles de diseño y tiene los elementos que le gustaría agregar, pero ¿cómo se les da formato?You know how to arrange layout panels and have items you'd like to add, but how should they be formatted? La página formularios ofrece instrucciones de diseño específicas.The forms page has some specific design guidance. Lea las secciones Tipos de formularios y diseño para obtener consejos útiles.Read through the sections on Types of forms and layout for useful advice. Analizaremos la accesibilidad y el diseño correspondiente más brevemente.We'll discuss accessibility and relative layout more shortly.

Con ese consejo en mente, debe comenzar a agregar sus controles de elección a su diseño, asegurándose de que se les asignen las etiquetas y el espacio adecuado.With that advice in mind, you should start adding your controls of choice into your layout, being sure they're given labels and spaced properly. A modo de ejemplo, aquí está el esquema básico para un formulario de una sola página utilizando el diseño, los controles y la guía de diseño anteriores:As an example, here's the bare-bones outline for a single-page form using the above layout, controls, and design guidance:

<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>

Puede personalizar libremente sus controles con más propiedades para mejorar la experiencia visual.Feel free to customize your controls with more properties for a better visual experience.

Haga su diseño dinámicoMake your layout responsive

Los usuarios podrían ver su interfaz de usuario en una variedad de dispositivos con diferentes anchos de pantalla.Users might view your UI on a variety of devices with different screen widths. Para asegurarse de que tengan una buena experiencia independientemente de su pantalla, debe usar diseño dinámico .To ensure that they have a good experience regardless of their screen, you should use responsive design. Lee esa página para obtener un buen asesoramiento sobre las filosofías de diseño que hay que tener en cuenta a medida que avanza.Read through that page for good advice on the design philosophies to keep in mind as you proceed.

La página Diseños dinámicos con XAML ofrece una descripción detallada de cómo implementar esto.The Responsive layouts with XAML page gives a detailed overview of how to implement this. Por ahora, nos centraremos en diseños fluidos y estados visuales en XAML.For now, we'll focus on fluid layouts and visual states in XAML.

El esquema del formulario básico que hemos reunido ya es un diseño fluido, ya que depende principalmente de la posición relativa de controles con únicamente el uso mínimo de posiciones y tamaños de píxel específicos.The basic form outline that we've put together is already a fluid layout, as it's depending mostly on the relative position of controls with only minimal use of specific pixel sizes and positions. Sin embargo, tenga en cuenta estas instrucciones para más interfaces de usuario que pueda crear en el futuro.Keep this guidance in mind for more UIs you might create in the future, though.

Algo más importante para diseños dinámicos son los estados visuales.More important to responsive layouts are visual states. Un estado visual define valores de propiedad que se aplican a un elemento dado cuando una condición dada es verdadera.A visual state defines property values that are applied to a given element when a given condition is true. Lee cómo hacer esto en xamly luego impleméntelo en su formulario.Read up on how to do this in xaml, and then implement them into your form. Esto es lo que podría parecer un muy básico en nuestra muestra anterior:Here's what a very basic one might look like in our previous sample:

<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

Cuando use StateTriggers, siempre asegúrese de que VisualStateGroups se adjunte al primer elemento secundario de la raíz.When you use StateTriggers, always ensure that VisualStateGroups is attached to the first child of the root. Aquí, Grid es el primer elemento secundario del elemento Page raíz.Here, Grid is the first child of the root Page element.

No es práctico crear estados visuales para una amplia variedad de tamaños de pantalla, ni hay más de un par de ellos que pueden tener un impacto significativo en la experiencia del usuario de su aplicación.It's not practical to create visual states for a wide array of screen sizes, nor are more than a couple likely to have significant impact on the user experience of your app. Recomendamos diseñar en su lugar algunos puntos de interrupción clave; puede leer más aquí.We recommend designing instead for a few key breakpoints - you can read more here.

Agregar compatibilidad para accesibilidadAdd accessibility support

Ahora que ya tiene un diseño bien construido que responde a cambios en los tamaños de pantalla, una última cosa que puede hacer para mejorar la experiencia del usuario es hacer que su aplicación esté accesible.Now that you have a well-constructed layout that responds to changes in screen sizes, a last thing you can do to improve the user experience is to make your app accessible. Hay muchas cosas que pueden incluirse en esto, pero en un formulario como este es más fácil de lo que parece.There's a lot that can go into this, but in a form like this one it's easier than it looks. Céntrese en lo siguiente:Focus on the following:

  • Compatibilidad con el teclado: asegúrese de que el orden de los elementos de sus paneles de la interfaz de usuario coincidan en la forma en que se muestran en pantalla, de modo que el usuario pueda verlos fácilmente.Keyboard support - ensure the order of elements in your UI panels match how they're displayed on screen, so a user can easily tab through them.
  • Compatibilidad con lector de pantalla: asegúrese de que todos sus controles tengan un nombre descriptivo.Screen reader support - ensure all your controls have a descriptive name.

Cuando cree diseños más complejos con más elementos visuales, querrá consultar la lista de comprobación de accesibilidad para obtener más detalles.When you're creating more complex layouts with more visual elements, you'll want to consult the accessibility checklist for more details. Después de todo, si bien la accesibilidad no es necesaria para una aplicación, ayuda a que llegue a una audiencia más amplia.After all, while accessibility isn't necessary for an app, it helps it reach and engage a larger audience.

Ir más alláGoing further

Aunque ha creado un formulario aquí, los conceptos de diseño y control son aplicables en todas las interfaces de usuario de XAML que pueda crear.Though you've created a form here, the concepts of layouts and controls are applicable across all XAML UIs you might construct. Siéntase libre de volver a los documentos a los que lo hemos enlazado y experimente con el formulario que tiene, agregando nuevas funciones de interfaz de usuario y refinando aún más la experiencia del usuario.Feel free to go back through the docs we've linked you to and experiment with the form you have, adding new UI features and further refining the user experience. Si desea una guía paso a paso a través de funciones de diseño más detalladas, consulte nuestro tutorial de diseño adaptable If you want step-by-step guidance through more detailed layout features, see our adaptive layout tutorial

Los formularios tampoco tienen que existir en un vacío: puede ir un paso más allá e insertar los suyos dentro de un trama principal/de detalles o un control dinámico.Forms also don't have to exist in a vacuum - you could go one step forward and embed yours within a master/details pattern or a pivot control. O si desea comenzar a trabajar en el código subyacente para su formulario, puede comenzar con nuestra introducción de eventos .Or if you want to get to work on the code-behind for your form, you might want to get started with our events overview.

API y documentos útilesUseful APIs and docs

Este es un resumen rápido de las API y otra documentación útiles que te ayudarán a comenzar a trabajar con los enlaces de datos.Here's a quick summary of APIs and other useful documentation to help you get started working with Data Binding.

API útilesUseful APIs

APIAPI DescripciónDescription
Controles útiles para formulariosControls useful for forms Una lista de controles de entrada útiles para crear formularios, e instrucciones básicas de dónde usarlos.A list of useful input controls for creating forms, and basic guidance of where to use them.
GridGrid Un panel para organizar elementos en diseños de varias filas y varias columnas.A panel for arranging elements in multi-row and multi-column layouts.
RelativePanelRelativePanel Un panel para organizar elementos en relación con otros elementos y los límites del panel.A panel for arraging items in relation to other elements and to the panel's boundaries.
StackPanelStackPanel Un panel para organizar elementos en una sola línea horizontal o vertical.A panel for arranging elements into a single horizontal or vertical line.
VisualStateVisualState Permite establecer el aspecto de los elementos de la interfaz de usuario cuando están en estados concretos.Allows you to set the appearance of UI elements when they're in particular states.

Documentos útilesUseful docs

TemaTopic DescripciónDescription
Información general sobre accesibilidadAccessibility overview Una visión general a gran escala de las opciones de accesibilidad en las aplicaciones.A broad-scale overview of accessibility options in apps.
Lista de comprobación de accesibilidadAccessibility checklist Una lista de verificación práctica para asegurar que su aplicación cumpla con los estándares de accesibilidad.A practical checklist to ensure your app meets accessibility standards.
Introducción a los eventosEvents overview Detalles sobre cómo agregar y estructurar eventos para controlar acciones de la interfaz de usuario.Details on adding and structuring events to handle UI actions.
FormulariosForms Instrucciones generales para crear formularios.Overall guidance for creating forms.
Paneles de diseñoLayout panels Proporciona una introducción de los tipos de paneles de diseño y dónde usarlos.Provides an overview of the types of layout panels and where to use them.
Trama master y detallesMaster/details pattern Un modelo de trama que se puede implementar alrededor de uno o varios formularios.A design pattern that can be implemented around one or multiple forms.
Control PivotPivot control Un control que puede contener uno o varios formularios.A control that can contain one or multiple forms.
Diseño dinámicoResponsive design Una introducción de los principios de diseño adaptativo a gran escala.An overview of large-scale responsive design principles.
Diseños dinámicos con XAMLResponsive layouts with XAML Información específica sobre los estados visuales y otras implementaciones de diseño dinámico.Specific information on visual states and other implementations of responsive design.
Tamaños de pantalla para diseño dinámicoScreen sizes for responsive design Instrucciones sobre los tamaños de pantalla a los que deben aplicarse los diseños de respuesta.Guidance on which screen sizes to which responsive layouts should be scoped.

Ejemplos de código útilesUseful code samples

Ejemplo de códigoCode sample DescripciónDescription
Tutorial de diseño adaptativoAdaptive layout tutorial Una experiencia guiada paso a paso a través de diseños adaptativos y diseño dinámico.A step-by-step guided experience through adaptive layouts and responsive design.
Base de datos de pedidos de clientesCustomer Orders Database Consulte el diseño y los formularios en acción en un ejemplo empresarial de varias páginas.See layout and forms in action on a multi-page enterprise sample.
XAML Controls GalleryXAML Controls Gallery Consulte una selección de controles XAML y cómo se implementan.See a selection of XAML controls, and how they're implemented.
Ejemplos de código adicionalesAdditional code samples Elija Controles, diseño y texto en la lista desplegable de categorías para ver ejemplos de códigos relacionados.Choose Controls, layout, and text in the category drop-down list to see related code samples.