Formulários

Artigo
06/02/2023

Um formulário é um grupo de controles que coleta e envia dados de usuários. Os formulários são usados normalmente em 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.

Exemplo de formulário

Quando devo usar um formulário?

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

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

Tipos de formulários

Em relação a como a entrada do usuário é enviada e exibida, há dois tipos de formulários:

1. Atualização instantânea

página de configurações

Use um formulário de atualização instantânea quando desejar 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 as alterações feitas às seleções são aplicadas imediatamente. Para confirmar as alterações em seu aplicativo, você precisará adicionar um manipulador de eventos para cada controle de entrada. Se um usuário altera um controle de entrada, seu aplicativo pode responder adequadamente.

2. Enviando com o botão

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

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

Não possibilitar o envio de informações inválidas usando o controle correto (ou seja, use um CalendarDatePicker em vez de um TextBox para datas do calendário). Veja mais sobre como selecionar os controles de entrada apropriados no seu formulário na seção de Controles de Entrada.
Ao usar controles de TextBox, forneça aos usuários uma dica do formato de entrada desejado com a propriedade PlaceholderText.
Forneça aos usuários o teclado virtual adequado 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 de envio até que todas as informações necessárias sejam preenchidas.
Se houver dados inválidos após o envio, marque os controles com entrada inválida com campos ou bordas realçadas e solicite que o usuário envie o formulário novamente.
Para outros erros, como conexão de rede com falha, certifique-se exibir uma mensagem de erro apropriada para o usuário.

Layout

Para facilitar a experiência do usuário e certificar-se de que os usuários sejam capazes de inserir a entrada correta, considere as seguintes recomendações para a criação de layouts de formulários.

Rótulos

Os rótulos devem estar alinhados à esquerda e ser colocados acima do controle de entrada. Muitos controles têm uma propriedade Header interna para exibir o rótulo. Para controles que não tenham uma propriedade Header ou para rotular grupos de controles, utilize um TextBlock.

Para design com acessibilidade, rotule todos os indivíduos e grupos de controles para maior clareza tanto para leitores de tela quanto para pessoas.

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

Fazer	Não

Espaçamento

Para separar visualmente os grupos de controles entre si, use alinhamento, margens e preenchimento. Os controles de entrada individuais têm 80px de altura e devem ter um espaçamento de 24px. Os grupos de controles de entrada devem ter um espaçamento de 48px.

grupos de formulários

Colunas

A criação de colunas pode reduzir o espaço em branco desnecessário em formulários, especialmente os com telas 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 de tela da janela do aplicativo. Em vez de sobrecarregar a tela com vários controles de entrada, considere a criação de várias páginas para o seu formulário.

Fazer	Não

Layout responsivo

Os formulários devem ser redimensionados conforme o tamanho da janela ou da tela for alterado para que os usuários não se esqueçam de algum campo de entrada. Para obter mais informações, confira técnicas de design dinâmico. Por exemplo, você talvez queira manter regiões específicas do formulário sempre em exibição, independentemente do tamanho da tela.

foco dos formulários

Paradas de tabulação

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

foco de tabulação no controle no formulário

Controles de entrada

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

Entrada de texto

Control	Usar	Exemplo
TextBox	Capturar uma ou várias linhas de texto	Nomes, comentários ou respostas em formato livre
PasswordBox	Colete dados particulares ao ocultar caracteres	Senhas, SSN (Número do Seguro Social), PINs, informações de cartão de crédito
AutoSuggestBox	Mostre aos usuários uma lista de sugestões de um conjunto correspondente de dados à medida que eles digitam	Pesquisa de banco de dados, enviar email para: linha, consultas anteriores
RichEditBox	Edite arquivos de texto com texto formatado, hiperlinks e imagens	Faça upload do arquivo, visualização e edição no aplicativo

Seleção

Control	Usar	Exemplo
CheckBox	Selecione ou anule a seleção de itens de ação	Concorde com os termos e condições, adicione itens opcionais, selecione todas as alternativas aplicáveis
RadioButton	Selecione uma opção entre duas ou mais escolhas	Escolha tipo, método de envio, etc.
ToggleSwitch	Escolha uma de duas opções mutuamente exclusivas	Ativar/desativar

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

Listas

Control	Usar	Exemplo
ComboBox	Inicie no estado compacto e expanda para mostrar a lista de itens selecionáveis	Selecione de uma longa lista de itens, como estados ou países
ListView	Categorize itens e atribua cabeçalhos de grupo, arraste e solte itens, corrija conteúdo e reordene os itens	Opções de classificação
GridView	Organize e procure coleções baseadas em imagem	Escolha uma foto, cor, tema de exibição

Entrada numérica

Control	Usar	Exemplo
Controle deslizante	Selecione um número de um intervalo de valores numéricos contíguos	Porcentagens, volume e velocidade de reprodução
Classificação	Classificação por estrelas	Comentários do cliente

Data e hora

Control	Usar
CalendarView	Selecione uma única data ou um intervalo de datas de um calendário sempre visível
CalendarDatePicker	Selecione uma única data de um calendário contextual
DatePicker	Selecione uma única data localizada quando informações contextuais não forem importantes
TimePicker	Selecione um valor temporal único

Controles adicionais

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

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

Exemplo de formulário de uma coluna

Este exemplo usa um componente de exibição de lista/detalhes em acrílico e o controle NavigationView. Captura de tela de outro exemplo de formulário

<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 Pivô, a tela de fundo Acrílica e o CommandBar, além dos controles de entrada. Captura de tela de exemplo de formulário

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

Amostra de banco de dados de pedidos de clientes

Captura de tela do banco de dados de pedidos de clientes 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.

Partilhar via

Formulários

Quando devo usar um formulário?