Criar e personalizar um formulário

Se você estiver criando um aplicativo que exija que os usuários insiram uma quantidade significativa de informações, é provável que você queira criar um formulário para eles preencherem. Este artigo mostrará o que você precisa saber para criar um formulário útil e robusto.

Discutiremos quais controles XAML incluir em um formulário, como organizá-los melhor em sua página e como otimizar seu formulário para diferentes tamanhos de tela. Mas como um formulário é sobre a posição relativa dos elementos visuais, vamos primeiro discutir o layout da página com XAML.

O que você precisa saber?

A UWP não tem um controle de formulário explícito que você pode adicionar ao seu aplicativo e configurar. Em vez disso, você precisará criar um formulário organizando uma coleção de elementos de interface do usuário em uma página.

Para fazer isso, você precisará entender painéis de layout. Esses são contêineres que contêm os elementos da interface do usuário do aplicativo, permitindo que você organize e agrupe-os. Colocar painéis de layout em outros painéis de layout oferece um grande controle sobre onde e como seus itens são exibidos em relação uns aos outros. Isso também facilita muito a adaptação do aplicativo à alteração dos tamanhos da tela.

Leia esta documentação sobre os painéis de layout. Como os formulários geralmente são exibidos em uma ou mais colunas verticais, você desejará agrupar itens semelhantes em um StackPanel e organizá-los em um RelativePanel , se necessário. Comece a montar alguns painéis agora – se você precisar de uma referência, veja abaixo uma estrutura de layout básica para um formulário de duas colunas:

<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 acontece em um formulário?

Você precisará preencher seu formulário com uma variedade de controles XAML . Você provavelmente está familiarizado com eles, mas fique à vontade para ler se precisar de uma revisão. Em particular, você desejará controles que permitam ao usuário inserir texto ou escolher entre uma lista de valores. Esta é uma lista básica de opções que você pode adicionar– você não precisa ler tudo sobre elas, apenas o suficiente para entender como elas são e como elas funcionam.

• O TextBox permite que um usuário insira texto em seu aplicativo.
• O ToggleSwitch permite que um usuário escolha entre duas opções.
• DatePicker permite que um usuário selecione um valor de data.
• O TimePicker permite que um usuário selecione um valor de hora.
• O ComboBox expande para exibir uma lista de itens selecionáveis. Você pode saber mais sobre eles aqui

Talvez você também queira adicionar botões para que o usuário possa salvar ou cancelar.

Formatar controles em seu layout

Você sabe como organizar painéis de layout e ter itens que gostaria de adicionar, mas como eles devem ser formatados? A página de formulários tem algumas diretrizes de design específicas. Leia as seções sobre tipos de formulários e o layout para obter conselhos úteis. Discutiremos a acessibilidade e o layout relativo mais brevemente.

Com esse conselho em mente, você deve começar a adicionar os controles de sua escolha ao layout, garantindo que lhes sejam atribuídas etiquetas e que estejam espaçados adequadamente. Por exemplo, aqui está a estrutura básica de um formulário de página única usando o layout, os controles e as diretrizes de design acima.

<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 uma melhor experiência visual.

Faça o layout responsivo

Os usuários podem exibir sua interface do usuário em uma variedade de dispositivos com larguras de tela diferentes. Para garantir que eles tenham uma boa experiência independentemente da tela, você deve usar design responsivo. Leia essa página para obter bons conselhos sobre as filosofias de design para ter em mente enquanto você prossegue.

A página Layouts responsivos com XAML fornece uma visão geral detalhada de como implementá-los. Por enquanto, nos concentraremos em layouts fluidos e nos estados visuais emXAML.

A estrutura básica do formulário que reunimos já é um layout fluido, já que depende principalmente da posição relativa dos controles, com uso mínimo de tamanhos e posições de pixel específicos. Tenha essa orientação em mente para mais interfaces do usuário que você pode criar no futuro.

Mais importante para layouts responsivos são os estados visuais. Um estado visual define valores de propriedade que são aplicados a um determinado elemento quando uma determinada condição é verdadeira. Ler sobre como fazer isso emxaml e implementá-los em seu formulário. Aqui está o que um muito básico pode parecer em nosso exemplo 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>

Não é prático criar estados visuais para uma ampla variedade de tamanhos de tela, nem mais do que um ou dois provavelmente terão um impacto significativo na experiência do usuário do seu aplicativo. Em vez disso, recomendamos criar alguns pontos de interrupção principais– você pode ler mais aqui.

Adicionar suporte à acessibilidade

Agora que você tem um layout bem construído que responde a alterações nos tamanhos de tela, a última coisa que você pode fazer para melhorar a experiência do usuário é tornar seu aplicativo acessível. Há muita coisa que pode entrar nisso, mas de uma forma como essa é mais fácil do que parece. Concentre-se no seguinte:

• Compatibilidade com teclado – verifique se a ordem dos elementos em seus painéis de interface do usuário corresponde à forma como eles são exibidos na tela, para que um usuário possa facilmente navegar por eles usando a tecla Tab.
• Suporte ao leitor de tela – verifique se todos os controles têm um nome descritivo.

Ao criar layouts mais complexos com mais elementos visuais, você desejará consultar a lista de verificação de acessibilidade para obter mais detalhes. Afinal, embora a acessibilidade não seja necessária para um aplicativo, ela o ajuda a alcançar e envolver um público maior.

Indo mais longe

Embora você tenha criado um formulário aqui, os conceitos de layouts e controles são aplicáveis em todas as UIs XAML que você pode construir. Fique à vontade para voltar aos documentos que vinculamos para você e experimentar com o formulário que você tem, adicionando novos recursos de interface e refinando ainda mais a experiência do usuário. Se você quiser diretrizes passo a passo por meio de recursos de layout mais detalhados, confira nosso tutorial de layout adaptável

Os formulários também não precisam existir em um vácuo – você pode avançar mais um passo e inserir o seu em um padrão de lista e detalhes ou em um NavigationView. Ou se você quiser começar a trabalhar no code-behind do seu formulário, talvez queira começar a usar nossa visão geral de eventos .

APIs e documentos úteis

Aqui está um resumo rápido de APIs e outra documentação útil para ajudar você a começar a trabalhar com Data Binding.

APIs úteis

Documentos úteis

Exemplos de código úteis