Forms

Um formulário é um conjunto de controlos que recolhem e submetem dados dos utilizadores. Os formulários são normalmente usados para páginas de definições, inquéritos, criação de contas e muito mais.

Este artigo discute as diretrizes de design para criar layouts XAML para formulários.

Quando deve usar um formulário?

Um formulário é uma página dedicada à recolha de dados que estão claramente relacionados entre si. Deves usar um formulário quando precisares de recolher dados explicitamente de um utilizador. Pode criar um formulário para um utilizador para:

• Iniciar sessão numa conta
• Inscreva-se para obter uma conta
• Alterar definições da aplicação, como privacidade ou opções de visualização
• Faça um inquérito
• Comprar um artigo
• Enviar comentários

Tipos de formas

Ao pensar em como a entrada do utilizador é submetida e apresentada, existem dois tipos de formulários:

1. Atualização instantânea

Use um formulário que se atualize instantaneamente quando quiser que os utilizadores vejam imediatamente os resultados da alteração dos valores no formulário. Por exemplo, nas páginas de definições, as seleções atuais são exibidas e quaisquer alterações feitas às seleções são aplicadas imediatamente. Para reconhecer as alterações na sua aplicação, terá de adicionar um gestor de eventos a cada controlo de entrada. Se um utilizador alterar um controlo de entrada, a sua aplicação pode responder adequadamente.

2. Submeter com botão

O outro tipo de formulário permite ao utilizador escolher quando submeter os dados com um clique num botão.

Este tipo de formulário dá ao utilizador flexibilidade na resposta. Normalmente, este tipo de forma contém mais campos de entrada livres e, por isso, recebe uma maior variedade de respostas. Para garantir uma entrada válida do utilizador e dados devidamente formatados na submissão, considere as seguintes recomendações:

• Tornar impossível submeter informações inválidas usando o controlo correto (ou seja, usar um CalendarDatePicker em vez de uma TextBox para datas do calendário). Veja mais sobre como selecionar os controlos de entrada apropriados no seu formulário na secção de Controlos de Entrada mais adiante.
• Ao usar controlos TextBox, forneça aos utilizadores uma pista do formato de entrada desejado com a propriedade PlaceholderText .
• Forneça aos utilizadores o teclado apropriado no ecrã, indicando a entrada esperada de um controlo com a propriedade InputScope .
• Assinale os campos obrigatórios com um asterisco * no rótulo.
• Desative o botão de submissão até que todas as informações necessárias estejam preenchidas.
• Se houver dados inválidos aquando da submissão, marque os controlos com entrada inválida com campos ou bordas destacados e exija que o utilizador submeta novamente o formulário.
• Para outros erros, como falha na ligação à rede, certifique-se de mostrar uma mensagem de erro apropriada ao utilizador.

Esquema

Para facilitar a experiência do utilizador e garantir que os utilizadores conseguem inserir a entrada correta, considere as seguintes recomendações para o design de layouts para formulários.

Rótulos / Etiquetas

As etiquetas devem estar alinhadas à esquerda e colocadas acima do controlo de entrada. Muitos controlos têm uma propriedade Header incorporada para mostrar a etiqueta. Para controlos que não têm uma propriedade Header, ou para rotular grupos de controlos, pode usar um TextBlock em vez disso.

Para desenhar para acessibilidade, rotule todos os controles individuais e grupos para oferecer clareza tanto a pessoas quanto a leitores de ecrã.

Para estilos de fonte, use a rampa de tipos padrão do Windows. Use TitleTextBlockStyle para títulos de páginas, SubtitleTextBlockStyle para cabeçalhos de grupos e BodyTextBlockStyle para etiquetas de controlo.

Fazer	Não

Spacing

Para separar visualmente grupos de controlos uns dos outros, use alinhamento, margens e espaçamento. Os controlos de entrada individuais têm 80px de altura e devem estar espaçados 24px de distância. Os grupos de controlos de entrada devem estar espaçados 48px de distância.

Columns

Criar colunas pode reduzir o espaço em branco desnecessário nas formas, especialmente com ecrãs maiores. No entanto, se quiser criar um formulário com várias colunas, o número de colunas deve depender do número de controlos de entrada na página e do tamanho do ecrã da janela da aplicação. Em vez de sobrecarregar o ecrã com inúmeros controlos de entrada, considere criar várias páginas para a sua forma.

Fazer	Não

Layout responsivo

Os formulários devem redimensionar-se à medida que o tamanho do ecrã ou janela muda, para que os utilizadores não esqueçam nenhum campo de entrada. Para mais informações, consulte técnicas de design responsivo. Por exemplo, pode querer manter regiões específicas da forma sempre à vista, independentemente do tamanho do ecrã.

Paragens de tabulação

Os utilizadores podem usar o teclado para navegar nos controlos com tabs stops. Por padrão, a ordem de tabulação dos controlos reflete a ordem em que são criados no XAML. Para sobrepor o comportamento predefinido, altere as propriedades IsTabStop ou TabIndex do controlo.

Controlos Input

Os controlos de entrada são os elementos da interface que permitem aos utilizadores inserir informação em formulários. Alguns controlos comuns que podem ser adicionados aos formulários estão listados abaixo, bem como informações sobre quando os utilizar.

Entrada de texto

Seleção

Nota: Se existirem cinco ou mais itens de seleção, use um controlo de lista.

Lists

Entrada numérica

Data e Hora

Controlos Adicionais

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

Para controlos de interface mais complexos e personalizados, consulte recursos disponíveis de empresas como Telerik, SyncFusion, DevExpress, Infragistics, ComponentOne e ActiPro.

Exemplo de formulário de coluna única

Este exemplo utiliza uma lista/detalhe acrílica e o controlo 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 utiliza o controlo Pivot, fundo Acrílico e CommandBar, além dos controlos 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 Base de Dados de Encomendas de Clientes

Para aprender a ligar a entrada de formulários a uma base de dados Azure e ver um formulário totalmente implementado, consulte o exemplo da aplicação de Customers Orders Database.

Tópicos relacionados

• Controlos de entrada
• Tipografia