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 que eles preencham. Este artigo irá mostrar-lhe o que precisa de saber para criar um formulário que seja útil e robusto.

Discutiremos quais controles XAML devem ser incluídos num formulário, como organizá-los melhor na sua página e como otimizar seu formulário para se adaptar a diferentes tamanhos de ecrã. Mas como um formulário é sobre a posição relativa de elementos visuais, vamos primeiro discutir o layout da página com XAML.

O que precisa de saber?

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

Para fazer isso, terás de compreender os painéis de layout . Esses são contêineres que contêm os elementos da interface do usuário do seu aplicativo, permitindo que você os organize e agrupe. Colocar painéis de layout dentro de outros painéis de layout lhe dá um grande controle sobre onde e como seus itens são exibidos em relação uns aos outros. Isso também torna muito mais fácil adaptar seu aplicativo para alterar os tamanhos de tela.

Leia esta documentação em painéis de layout. Como os formulários geralmente são exibidos em uma ou mais colunas verticais, convém agrupar itens semelhantes em um StackPanele organizá-los em um RelativePanel , se necessário. Comece a montar alguns painéis agora — se você precisar de uma referência, abaixo está 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 vai em um formulário?

Você precisará preencher o seu formulário com uma variedade de controles XAML . Você provavelmente está familiarizado com eles, mas sinta-se à vontade para ler se precisar de uma atualização. Em particular, você desejará controles que permitam ao usuário inserir texto ou escolher a partir de 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 se parecem e como funcionam.

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

Você também pode querer adicionar botões, de forma a permitir 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 do formulário tem algumas orientações de design específicas. Leia as seções sobre Tipos de formulários e layout para obter conselhos úteis. Discutiremos a acessibilidade e o layout relativo mais em breve.

Com esse conselho em mente, deve começar a adicionar os seus controles desejados no layout, assegurando-se de que estão devidamente rotulados e espaçados corretamente. Como exemplo, aqui está o esboço básico para 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>

Sinta-se à vontade para personalizar seus controles com mais propriedades para uma melhor experiência visual.

Torne seu layout responsivo

Os usuários podem visualizar 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 ao prosseguir.

A página Layouts responsivos com XAML fornece uma visão geral detalhada de como implementar isso. Por enquanto, vamos nos concentrar em layouts fluidos e estados visuais em XAML.

O contorno de formulário básico que montamos já é um layout fluido, pois depende principalmente da posição relativa dos controles com apenas o uso mínimo de tamanhos e posições de pixels específicos. No entanto, tenha esta orientação em mente para mais interfaces do usuário que você pode criar no futuro.

Mais importante para layouts responsivos são estados visuais. Um estado visual define valores de propriedade que são aplicados a um determinado elemento quando uma determinada condição é verdadeira. Leia sobre como fazer isso em xamle, em seguida, implemente-os 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>

Importante

Ao usar StateTriggers, sempre verifique se VisualStateGroups está anexado ao primeiro filho da raiz. Aqui, Grid é o primeiro filho do elemento raiz Page.

Não é prático criar estados visuais para uma ampla variedade de tamanhos de tela, nem é provável que mais do que alguns tenham impacto significativo na experiência do usuário do seu aplicativo. Recomendamos, em vez disso, projetar para alguns pontos de quebra importantes - é possível ler mais aqui.

Adicionar suporte de acessibilidade

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

• Suporte de teclado - certifique-se de que a ordem dos elementos nos painéis da interface do usuário corresponda à forma como eles são exibidos na tela, para que um usuário possa acessá-los facilmente.
• Suporte a leitor de tela - certifique-se de que todos os seus controles tenham um nome descritivo.

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

Ir mais longe

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

Os formulários também não precisam existir no vácuo - pode ir um passo além e incorporar o seu num padrão de lista/detalhes ou numa NavigationView. Ou se quiseres começar a trabalhar no code-behind do teu formulário, poderás querer começar com a visão geral de eventos .

APIs e documentos úteis

Aqui está um resumo rápido das APIs e outra documentação útil para ajudá-lo a começar a trabalhar com a vinculação de dados.

APIs úteis

API (Interface de Programação de Aplicações)	Descrição
Controles úteis para formulários	Uma lista de controles de entrada úteis para a criação de formulários e orientação básica de onde usá-los.
Grelha	Um painel para organizar elementos em layouts de várias linhas e várias colunas.
RelativePanel	Um painel para organizar itens em relação a outros elementos e aos limites do painel.
StackPanel	Um painel para organizar elementos em uma única linha horizontal ou vertical.
VisualState	Permite definir a aparência dos elementos da interface do usuário quando eles estão em estados específicos.

Documentos úteis

Tópico	Descrição
Visão geral de acessibilidade	Uma visão geral em larga escala das opções de acessibilidade em aplicativos.
Lista de verificação de acessibilidade	Uma lista de verificação prática para garantir que seu aplicativo atenda aos padrões de acessibilidade.
Visão geral de eventos	Detalhes sobre como adicionar e estruturar eventos para lidar com ações da interface do usuário.
Formulários	Orientação geral para a criação de formulários.
Painéis de layout	Fornece uma visão geral dos tipos de painéis de layout e onde usá-los.
Padrão de lista/detalhes	Um padrão de design que pode ser implementado em torno de um ou vários formulários.
VistaDeNavegação	Um controle que pode conter um ou vários formulários.
Design responsivo	Uma visão geral dos princípios de design responsivo em grande escala.
XAML com layouts responsivos	Informações específicas sobre estados visuais e outras implementações de design responsivo.
tamanhos de tela para design responsivo	Orientação sobre quais tamanhos de tela devem ser abrangidos pelos layouts responsivos.

Exemplos de código úteis

Exemplo de código	Descrição
Base de Dados de Encomendas de Clientes	Veja o layout e os formulários em ação em um exemplo de empresa de várias páginas.
Galeria de Controles XAML	Veja uma seleção de controles XAML e como eles são implementados.
Exemplos de código adicionais	Escolha Controles, layout e texto na lista suspensa de categorias para ver exemplos de código relacionados.