Criar e personalizar um formulárioCreate and customize a form

Se você estiver criando um aplicativo que exige que os usuários forneçam uma quantidade significativa de informações, provavelmente desejará criar um formulário para que eles preencham. Este artigo mostrará o que você precisa saber para criar um formulário útil e robusto.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 não é um tutorial.This is not a tutorial. Se precisar de um, consulte nosso tutorial de layout adaptável, que fornecerá uma experiência guiada passo a passo.If you want one, see our adaptive layout tutorial, which will provide you with a step-by-step guided experience.

Vamos discutir quais controles XAML são incluídos em um formulário, a melhor forma de organizá-los em sua página e como otimizar seu formulário para alterar os tamanhos de tela.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. Entretanto, como um formulário aborda a posição relativa dos elementos visuais, primeiro discutiremos o layout da página com XAML.But because a form is about the relative position of visual elements, let's first discuss page layout with XAML.

O que você precisa saber?What do you need to know?

A UWP não tem um controle de formulário explícito que você pode adicionar ao seu aplicativo e configurar.UWP does not have an explicit form control that you can add to your app and configure. Em vez disso, você precisará criar um formulário organizando uma coleção de elementos de interface do usuário em uma página.Instead, you'll need to create a form by arranging a collection of UI elements on a page.

Para fazer isso, você precisará entender os painéis de layout.To do so, you'll need to understand layout panels. Eles são contêineres com os elementos da interface do usuário do aplicativo, permitindo organizá-los e agrupá-los.These are containers that hold your app's UI elements, allowing you to arrange and group them. Colocar painéis de layout dentro de outros painéis de layout confere a você bastante controle sobre onde e como seus itens são exibidos um em relação ao outro.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. Isso também facilita a adaptação de seu aplicativo a tamanhos de tela diferentes.This also makes it far easier to adapt your app to changing screen sizes.

Leia esta documentação sobre painéis de layout.Read this documentation on layout panels. Como os formulários geralmente são exibidos em uma ou mais colunas verticais, é recomendado agrupar itens semelhantes em um StackPanel e organizá-los em um RelativePanel, se necessário.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. Comece reunindo alguns painéis – se precisar de uma referência, veja abaixo uma estrutura de layout básico para um formulário de duas colunas: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>

O que é incluído em um formulário?What goes in a form?

Você deverá preencher o formulário com vários Controles XAML.You'll need to fill your form with an assortment of XAML Controls. Você provavelmente está familiarizado com eles, mas fique à vontade para ler caso precise se atualizar.You're probably familiar with those, but feel free to read up if you need a refresher. Especificamente, você deseja controles específicos que permitam ao usuário inserir texto ou escolher dentre uma lista de valores.In particular, you'll want controls that allow your user to input text or choose from a list of values. Esta é uma lista básica das opções que você pode adicionar. Não é necessário ler tudo sobre elas, apenas o suficiente para compreender o que são e como funcionam.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 que um usuário insira texto em seu aplicativo.TextBox lets a user input text into your app.
  • ToggleSwitch permite que um usuário escolha entre duas opções.ToggleSwitch lets a user choose between two options.
  • DatePicker permite que um usuário selecione um valor de data.DatePicker lets a user select a date value.
  • TimePicker permite que um usuário selecione um valor temporal.TimePicker lets a user select a time value.
  • ComboBox expande para exibir uma lista de itens selecionáveis.ComboBox expand to display a list of selectable items. Você pode aprender mais sobre eles aquiYou can learn more about them here

Você também pode adicionar botões para que o usuário possa salvar ou cancelar.You also might want to add buttons, so the user can save or cancel.

Controles de formato no layoutFormat controls in your layout

Você sabe como organizar os painéis de layout e tem itens que gostaria de adicionar, mas como eles devem ser formatados?You know how to arrange layout panels and have items you'd like to add, but how should they be formatted? A página formulários apresenta algumas diretrizes de design específicas.The forms page has some specific design guidance. Leia as seções sobre Tipos de formulários e layout para ver recomendações úteis.Read through the sections on Types of forms and layout for useful advice. Discutiremos a acessibilidade e o layout relativo em breve.We'll discuss accessibility and relative layout more shortly.

Com essas orientações em mente, você deve começar a adicionar os controles de sua preferência ao layout, certificando-se de que eles recebam rótulos e estejam devidamente espaçados.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. Por exemplo, esta é a estrutura básica de um formulário de uma página usando as orientações sobre layout, controles e design acima: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>

Fique à vontade para personalizar seus controles com mais propriedades para obter uma experiência visual melhor.Feel free to customize your controls with more properties for a better visual experience.

Tornar o layout dinâmicoMake your layout responsive

Os usuários podem exibir a interface do usuário em vários dispositivos com larguras de tela diferentes.Users might view your UI on a variety of devices with different screen widths. Para garantir que eles tenham uma boa experiência independentemente da tela, você deve usar um design dinâmico.To ensure that they have a good experience regardless of their screen, you should use responsive design. Leia essa página para obter boas recomendações sobre as filosofias de design a ter em mente durante o processo.Read through that page for good advice on the design philosophies to keep in mind as you proceed.

A página Layouts dinâmicos com XAML fornece uma visão geral detalhada de como implementar isso.The Responsive layouts with XAML page gives a detailed overview of how to implement this. Por enquanto, vamos nos concentrar em layouts fluidos e estados visuais em XAML.For now, we'll focus on fluid layouts and visual states in XAML.

A estrutura de formulário básica que criamos já é um layout fluido, pois depende principalmente da posição relativa dos controles usando apenas o mínimo de posições e tamanhos de pixel 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. No entanto, lembre-se dessas orientações para interfaces do usuário que você poderá criar no futuro.Keep this guidance in mind for more UIs you might create in the future, though.

Os estados visuais são ainda mais importantes para os layouts dinâmicos.More important to responsive layouts are visual states. Um estado visual define valores de propriedade aplicados a um elemento específico quando uma condição específica é verdadeira.A visual state defines property values that are applied to a given element when a given condition is true. Leia sobre como fazer isso em xaml e, em seguida, implemente em seu formulário.Read up on how to do this in xaml, and then implement them into your form. Veja como é um muito básico em nosso exemplo 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

Ao usar StateTriggers, certifique-se sempre de que VisualStateGroups esteja anexado ao primeiro filho da raiz.When you use StateTriggers, always ensure that VisualStateGroups is attached to the first child of the root. Aqui, Grid é o primeiro filho do elemento Page raiz.Here, Grid is the first child of the root Page element.

Não é prático criar estados visuais para uma ampla gama de tamanhos de tela, pois poucos afetarão significativamente a experiência do usuário de seu aplicativo.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. É recomendável projetar para alguns pontos de interrupção chave. Você pode ler mais aqui.We recommend designing instead for a few key breakpoints - you can read more here.

Adicionar suporte à acessibilidadeAdd accessibility support

Agora que você tem um layout bem construído que responde às mudanças em tamanhos de tela, uma última coisa que pode fazer para melhorar a experiência do usuário é disponibilizar o aplicativo.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. Há muito que pode ser feito, mas em um formulário como esse é mais fácil do que parece.There's a lot that can go into this, but in a form like this one it's easier than it looks. Concentre-se no seguinte:Focus on the following:

  • Suporte para teclado: certifique-se de que a ordem dos elementos nos painéis da interface do usuário corresponda à forma como são exibidos na tela para que o usuário possa alternar facilmente entre eles.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.
  • Suporte para leitor de tela: certifique-se de que todos os seus controles tenham um nome descritivo.Screen reader support - ensure all your controls have a descriptive name.

Ao criar layouts mais complexos com mais elementos visuais, é recomendado consultar a lista de verificação de acessibilidade para obter mais detalhes.When you're creating more complex layouts with more visual elements, you'll want to consult the accessibility checklist for more details. Afinal, embora a acessibilidade não seja necessária para um aplicativo, ela ajuda a interagir com um público maior.After all, while accessibility isn't necessary for an app, it helps it reach and engage a larger audience.

AprofundamentoGoing further

Embora você tenha criado um formulário aqui, os conceitos de layouts e controles são aplicáveis a todas as interfaces do usuário XAML que você pode construir.Though you've created a form here, the concepts of layouts and controls are applicable across all XAML UIs you might construct. Fique à vontade para ler novamente os documentos que vinculamos e para experimentar com seu formulário, adicionando novos recursos da interface do usuário e aperfeiçoando a experiência do usuário.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. Se quiser obter orientações passo a passo sobre recursos de layout mais detalhados, veja nosso tutorial de layout adaptávelIf you want step-by-step guidance through more detailed layout features, see our adaptive layout tutorial

Os formulários também não precisam ser independentes: você pode ir além e inserir o seu em um padrão mestre/de detalhes ou em um controle de pivô.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. Ou, se quer começar a trabalhar no code-behind do formulário, é recomendado começar com a visão geral sobre 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.

APIs e documentos úteisUseful APIs and docs

Veja a seguir um resumo rápido de APIs e outras documentações úteis que ajudarão você a começar a trabalhar com a Associação de Dados.Here's a quick summary of APIs and other useful documentation to help you get started working with Data Binding.

APIs úteisUseful APIs

APIAPI DescriçãoDescription
Controles úteis para formuláriosControls useful for forms Uma lista de controles de entrada úteis para a criação de formulários e orientação básica de onde usá-los.A list of useful input controls for creating forms, and basic guidance of where to use them.
GridGrid Um painel para organizar elementos em layouts com várias linhas e várias colunas.A panel for arranging elements in multi-row and multi-column layouts.
RelativePanelRelativePanel Um painel para organizar os itens em relação a outros elementos e aos limites do painel.A panel for arraging items in relation to other elements and to the panel's boundaries.
StackPanelStackPanel Um painel para organizar elementos em uma única linha horizontal ou vertical.A panel for arranging elements into a single horizontal or vertical line.
VisualStateVisualState Permite definir a aparência de elementos da interface do usuário quando estão em estados específicos.Allows you to set the appearance of UI elements when they're in particular states.

Documentos úteisUseful docs

TópicoTopic DescriçãoDescription
Visão geral de acessibilidadeAccessibility overview Uma visão geral de grande escala das opções de acessibilidade em aplicativos.A broad-scale overview of accessibility options in apps.
Lista de verificação de acessibilidadeAccessibility checklist Uma lista de verificação prática para garantir que seu aplicativo atenda aos padrões de acessibilidade.A practical checklist to ensure your app meets accessibility standards.
Visão geral de eventosEvents overview Detalhes sobre como adicionar e estruturar eventos para processar ações da interface do usuário.Details on adding and structuring events to handle UI actions.
FormuláriosForms Diretrizes gerais para a criação de formulários.Overall guidance for creating forms.
Painéis de layoutLayout panels Fornece uma visão geral dos tipos de painéis de layout e de onde usá-los.Provides an overview of the types of layout panels and where to use them.
Padrão mestre/detalhesMaster/details pattern Um padrão de design que pode ser implementado em um ou vários formulários.A design pattern that can be implemented around one or multiple forms.
Controle de pivôPivot control Um controle que pode conter um ou vários formulários.A control that can contain one or multiple forms.
Design dinâmicoResponsive design Uma visão geral dos princípios de design dinâmico em grande escala.An overview of large-scale responsive design principles.
Layouts dinâmicos com XAMLResponsive layouts with XAML Informações específicas sobre estados visuais e outras implementações de design dinâmico.Specific information on visual states and other implementations of responsive design.
Tamanho de tela para design dinâmicoScreen sizes for responsive design Orientações na tela sobre quais tamanhos de tela devem estar no escopo de layouts dinâmicos.Guidance on which screen sizes to which responsive layouts should be scoped.

Exemplos de código úteisUseful code samples

Exemplo de códigoCode sample DescriçãoDescription
Tutorial de layout adaptávelAdaptive layout tutorial Uma experiência guiada passo a passo de layouts adaptáveis e design dinâmico.A step-by-step guided experience through adaptive layouts and responsive design.
Banco de dados de pedidos de clientesCustomer Orders Database Veja o layout e os formulários em ação em uma amostra empresarial de várias páginas.See layout and forms in action on a multi-page enterprise sample.
Galeria de controles XAMLXAML Controls Gallery Veja uma seleção de controles XAML e como são implementados.See a selection of XAML controls, and how they're implemented.
Exemplos de código adicionaisAdditional code samples Escolha Controles, layout e texto na lista suspensa de categoria para ver exemplos de códigos relacionados.Choose Controls, layout, and text in the category drop-down list to see related code samples.