Formulários

Um formulário é um grupo de controles que coleta e envia dados de usuários. Os formulários normalmente são usados para páginas de configurações, pesquisas, criação de contas e muito mais.

Este artigo discute as diretrizes de design para a criação de layouts XAML para formulários.

Quando você deve usar um formulário?

Um formulário é uma página dedicada para coletar entradas de dados que estão claramente relacionadas entre si. Você deve usar um formulário quando precisar coletar dados explicitamente de um usuário. Você pode criar um formulário para um usuário:

• Fazer logon em uma conta
• Inscrever-se para uma conta
• Alterar as configurações do aplicativo, como opções de privacidade ou exibição
• Fazer uma pesquisa
• Comprar um item
• Fornecer comentários

Tipos de formulários

Ao pensar em como a entrada do usuário é enviada e exibida, há dois tipos de formulários:

1. Atualização instantânea

Use um formulário de atualização instantânea quando quiser que os usuários vejam imediatamente os resultados da alteração dos valores no formulário. Por exemplo, nas páginas de configurações, as seleções atuais são exibidas e todas as alterações feitas nas seleções são aplicadas imediatamente. Para reconhecer as alterações em seu aplicativo, você precisará adicionar um manipulador de eventos a cada controle de entrada. Se um usuário alterar um controle de entrada, o aplicativo poderá responder adequadamente.

2. Enviar com o botão

O outro tipo de formulário permite que o usuário escolha quando enviar dados com um clique de um botão.

Esse tipo de formulário oferece ao usuário flexibilidade para responder. Normalmente, esse tipo de formulário contém mais campos de entrada de formulário livre e, portanto, recebe uma maior variedade de respostas. Para garantir a entrada válida do usuário e os dados formatados corretamente após o envio, considere as seguintes recomendações:

• Impossibilitar o envio de informações inválidas usando o controle correto (ou seja, use um CalendarDatePicker em vez de um TextBox para datas de calendário). Veja mais sobre como selecionar os controles de entrada apropriados em seu formulário na seção Controles de Entrada posteriormente.
• Ao usar controles TextBox, forneça aos usuários uma dica do formato de entrada desejado com a propriedade PlaceholderText .
• Forneça aos usuários o teclado local apropriado informando a entrada esperada de um controle com a propriedade InputScope .
• Marque a entrada necessária com um asterisco * no rótulo.
• Desabilite o botão Enviar até que todas as informações necessárias sejam preenchidas.
• Se houver dados inválidos no envio, marque os controles com entrada inválida com campos ou bordas realçadas e exija que o usuário reenvie o formulário.
• Para outros erros, como falha na conexão de rede, certifique-se de exibir uma mensagem de erro apropriada para o usuário.

Layout

Para facilitar a experiência do usuário e garantir que os usuários possam inserir a entrada correta, considere as recomendações a seguir para criar layouts para formulários.

Rótulos

Os rótulos devem ser alinhados à esquerda e colocados acima do controle de entrada. Muitos controles têm uma propriedade de cabeçalho integrada para exibir o rótulo. Para controles que não têm uma propriedade Header ou para rotular grupos de controles, você pode usar um TextBlock .

Para projetar para acessibilidade, rotule todos os controles, individualmente e em grupo, para garantir clareza tanto para leitores humanos quanto para leitores de tela.

Para estilos de fonte, use a rampa de tipo padrão do Windows. Use TitleTextBlockStyle para títulos de página, SubtitleTextBlockStyle para títulos de grupo e BodyTextBlockStyle para rótulos de controle.

Fazer	Não

Spacing

Para separar visualmente grupos de controles uns dos outros, use alinhamento, margens e preenchimento. Os controles de entrada individuais têm 80px de altura e devem ser espaçados a 24px de distância. Grupos de controles de entrada devem ser espaçados com 48px de distância.

Columns

A criação de colunas pode reduzir o espaço em branco desnecessário em formulários, especialmente com tamanhos de tela maiores. No entanto, se você quiser criar um formulário de várias colunas, o número de colunas deverá depender do número de controles de entrada na página e do tamanho da tela da janela do aplicativo. Em vez de sobrecarregar a tela com vários controles de entrada, considere criar várias páginas para seu formulário.

Fazer	Não

Layout responsivo

Os formulários devem redimensionar conforme o tamanho da tela ou da janela é alterado, para que os usuários não ignorem nenhum campo de entrada. Para obter mais informações, consulte técnicas de design responsivo. Por exemplo, talvez você queira manter regiões específicas do formulário sempre em exibição, independentemente do tamanho da tela.

Paradas de tabulação

Os usuários podem usar o teclado para navegar pelos controles com paradas de tabulação. Por padrão, a ordem de tabulação dos controles reflete a ordem na qual eles são criados no XAML. Para substituir o comportamento padrão, altere as propriedades IsTabStop ou TabIndex do controle.

Controles de entrada

Os controles de entrada são os elementos de interface do usuário que permitem que os usuários insiram informações em formulários. Alguns controles comuns que podem ser adicionados aos formulários são listados abaixo, bem como informações sobre quando usá-los.

Entrada de texto

Seleção

Observação: se houver cinco ou mais itens de seleção, use um controle de lista.

Lists

Entrada numérica

Data e hora

Controles adicionais

Para obter uma lista completa de controles UWP, consulte o índice de controles por função.

Para controles de interface do usuário mais complexos e personalizados, examine os recursos disponíveis de empresas como Telerik, SyncFusion, DevExpress, Infragistics, ComponentOne e ActiPro.

Exemplo de formulário de uma coluna

Este exemplo usa uma exibição de lista acrílico/lista de detalhes e controle NavigationView.

<StackPanel>
    <TextBlock Text="New Customer" Style="{StaticResource TitleTextBlockStyle}"/>
    <Button Height="100" Width="100" Background="LightGray" Content="Add photo" Margin="0,24" Click="AddPhotoButton_Click"/>
    <TextBox x:Name="Name" Header= "Name" Margin="0,24,0,0" MaxLength="32" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
    <TextBox x:Name="PhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="15" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
    <TextBox x:Name="Email" Header="Email" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
    <RelativePanel>
        <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="EmailNameOrAddress" />
        <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
             <x:String>WA</x:String>
        </ComboBox>
    </RelativePanel>
    <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
    <StackPanel Orientation="Horizontal">
        <Button Content="Save" Margin="0,24" Click="SaveButton_Click"/>
        <Button Content="Cancel" Margin="24" Click="CancelButton_Click"/>
    </StackPanel>  
</StackPanel>

Exemplo de formulário de duas colunas

Este exemplo usa o controle Pivot, o fundo Acrílico e o CommandBar, além dos controles de entrada.

<Grid>
    <Pivot Background="{ThemeResource SystemControlAccentAcrylicWindowAccentMediumHighBrush}" >
        <Pivot.TitleTemplate>
            <DataTemplate>
                <Grid>
                    <TextBlock Text="Company Name" Style="{ThemeResource HeaderTextBlockStyle}"/>
                </Grid>
            </DataTemplate>
        </Pivot.TitleTemplate>
        <PivotItem Header="Orders" Margin="0"/>    
        <PivotItem Header="Customers" Margin="0">
            <!--Form Example-->
            <Grid Background="White">
                <RelativePanel>
                    <StackPanel x:Name="Customer" Margin="20">
                        <TextBox x:Name="CustomerName" Header= "Customer Name" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="CustomerPhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <TextBox x:Name="Address" Header="Address" PlaceholderText="Address" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <TextBox x:Name="Address2" Margin="0,24,0,0" PlaceholderText="Address 2" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="AlphanumericFullWidth" />
                        <RelativePanel>
                            <TextBox x:Name="City" PlaceholderText="City" Margin="0,24,0,0" MaxLength="50" Width="200" HorizontalAlignment="Left" InputScope="Text" />
                            <ComboBox x:Name="State" PlaceholderText="State" Margin="24,24,0,0"  Width="100" RelativePanel.RightOf="City">
                                <x:String>WA</x:String>
                            </ComboBox>
                        </RelativePanel>
                        <TextBox x:Name="ZipCode" PlaceholderText="Zip Code" Margin="0,24,0,0" MaxLength="6" Width="100" HorizontalAlignment="Left" InputScope="Number" />
                    </StackPanel>
                    <StackPanel x:Name="Associate" Margin="20" RelativePanel.RightOf="Customer">
                        <TextBox x:Name="AssociateName" Header= "Associate" Margin="0,24,0,0" MaxLength="320" Width="400" HorizontalAlignment="Left" InputScope="PersonalFullName"/>
                        <TextBox x:Name="AssociatePhoneNumber" Header="Phone Number" Margin="0,24,0,0" MaxLength="50" Width="400" HorizontalAlignment="Left" InputScope="TelephoneNumber" />
                        <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>
                </RelativePanel>
            </Grid>
        </PivotItem>
        <PivotItem Header="Invoices"/>
        <PivotItem Header="Stock"/>
        <Pivot.RightHeader>
            <CommandBar OverflowButtonVisibility="Collapsed" Background="Transparent">
                <AppBarButton Icon="Add"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Edit" />
                <AppBarButton Icon="Delete"/>
                <AppBarSeparator/>
                <AppBarButton Icon="Save"/>
            </CommandBar>
        </Pivot.RightHeader>
    </Pivot>
</Grid>

Exemplo de banco de dados de pedidos do cliente

Para saber como conectar a entrada de formulário a um banco de dados do Azure e ver um formulário totalmente implementado, consulte o exemplo de aplicativo Banco de Dados de Pedidos de Clientes .

Tópicos relacionados

• Controles de entrada
• Tipografia