Formulários
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.
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
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. Envio com 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, use 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.
| O que fazer | O que não fazer |
|---|---|
 |
 |
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.
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.
| O que fazer | O que não fazer |
|---|---|
 |
 |
 |
Layouts dinâmicos
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.
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.
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 | Uso | 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 | Uso | 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 | Uso | 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 | Uso | 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 de clientes |
Data e Hora
| Control | Uso |
|---|---|
| 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 uma exibição de lista/lista de detalhes acrílico e um 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 Pivô, a tela de fundo Acrílica 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>
Amostra de 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 .
Tópicos relacionados
Windows developer
Comentários
Em breve: ao longo de 2024, vamos eliminar problemas do GitHub como o mecanismo de comentários para conteúdo e substituí-lo por um novo sistema de comentários. Para obter mais informações, consulte: https://aka.ms/ContentUserFeedback.
Enviar e exibir comentários de