Demonstra Passo a passo: Criando um formulário do Windows redimensionável para entrada de dados

Artigo
08/08/2011

Um formulário que redimensiona corretamente pode melhorar a usabilidade de sua interface do usuário.

Essa explicação passo a passo mostra como criar um layout que ajusta proporcionalmente como o usuário redimensiona o formulário. Você irá implementar um formulário de entrada de dados para obter informações de contato usando o TableLayoutPanel controle.

As tarefas ilustradas neste passo a passo incluem:

Criando o projeto
Criando o painel de layout
Configurando a grade de layout
Criando os campos de nome
Criando os campos de endereço
Criando os campos Number-Telefone
Criar o campo do Notes

Quando você terminar, o formulário será similar ao seguinte:

Formulário de entrada básica de dados com TableLayoutPanel

Para copiar o código deste tópico como uma única lista, consulte Como: Criar um formulário do Windows redimensionável para entrada de dados.

Observação
As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritos na Ajuda, dependendo das configurações ativas ou configurações de edição. Para alterar as configurações, escolha Import and Export Settings sobre o Ferramentas menu. Para obter mais informações, consulte Trabalhando com configurações.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

Dê permissões suficientes para poder criar e executar projetos de aplicativos de Formulários do Windows no computador onde o Visual Studio está instalado.

Criando o projeto

A primeira etapa é criar um projeto de aplicativo. Você usará este projeto para criar o aplicativo que mostra o formulário de entrada de dados.

Para criar o projeto

Crie um projeto chamado Windows Application DemoDataEntryLayout . Para obter mais informações, consulte Como: Crie um novo projeto de aplicativo do Windows Forms.

Criando o painel de layout

A próxima etapa é para criar o painel de layout que contém o layout redimensionável.

Para criar o painel de layout

Selecione o formulário na caixa Forms Designer .
Arraste um controle TableLayoutPanel do ToolBox para seu formulário.
Na janela Properties, mude os valores dos controles TableLayoutPanel e propriedades Dock para Fill.
Alterar o valor da ColumnCount propriedade 4 e altere o valor da RowCount propriedade como 6.

Configurando a grade de layout

A próxima etapa é para especificar a grade de layout. Definir propriedades em ColumnStyles e RowStyles Coleções para determinar como colunas e linhas serão redimensionada como alterar as dimensões do formulário.

Para configurar a grade de layout

Clique em glifos do controle TableLayoutPanel marca inteligente () e selecione editar linhas e colunas para abrir o estilos de linha e coluna caixa de diálogo. Para obter mais informações, consulte Como: Editar Colunas e Linhas em um Controle TableLayoutPanel.
Selecione colunas partir do Mostrar caixa drop-down.
Selecione a primeira coluna e altere o valor de sua propriedade SizeType para Percent. Definir o valor de % NumericUpDown controle para 25. Esta coluna conterá Label controles.
Selecione a segunda coluna. Defina o valor da propriedade SizeType como Percent. Definir o valor de % NumericUpDown controle para 50. Esta coluna conterá TextBox controles para os campos de entrada de dados.
Selecione a terceira coluna. Defina o valor da propriedade SizeType como Percent. Definir o valor de % NumericUpDown controle para 25. Esta coluna conterá Label controles.
Selecione a quarta coluna. Defina o valor da propriedade SizeType como Percent. Definir o valor de % NumericUpDown controle para 50. Esta coluna conterá TextBox controles para os campos de entrada de dados.
Selecione linhas partir do Mostrar caixa drop-down.
Para as primeiras cinco linhas, defina o valor da SizeType propriedade para Absolutee defina o valor da absoluto NumericUpDown controle 28. Para a sexta linha, defina o valor da SizeType propriedade para Percente defina o valor da % NumericUpDown controle 80.
Clique em OK para aceitar as alterações.

Preencher o layout com controles

Agora você está pronto para preencher o layout com controles. Esse formulário de entrada de dados é para obter informações de contato, para que ele tenha campos para nome primeiro, último nome, endereço, número de telefone e anotações. A lista a seguir mostra a ordem em que você criar esses controles:

Campos de nome
Os campos de endereço
Campos de número de telefone
Campo Notas

Criando os campos de nome

Campos de entrada de nome são colocados na primeira linha do controle TableLayoutPanel. Eles consistem em um controle Label e um TextBox controle para o primeiro nome e um Label controle e um TextBox controle para o último nome.

Para criar campos de nome

Arraste um controle Label a partir de ToolBox para a célula à esquerda no controle TableLayoutPanel.
Na janelaProperties, defina os valores do controle Label e a propriedade Anchor para Right.
Defina o valor da property AutoSize como true.
Definir o valor de Text propriedade para o primeiro nome.
Arraste um TextBox controle do ToolBox para a segunda célula da primeira linha, próximo ao controle Label.
Alterar o valor da propriedade Anchor do controle TextBox para Left, Right.
Arraste um controle Label o ToolBox para a terceira célula da primeira linha. Alterar o valor da propriedade Anchor do controle Label para Right, . Defina o valor da property AutoSize como true. Definir o valor de Text propriedade para o último nome.
Arraste um controle TextBox o ToolBox para a terceira célula da primeira linha. Alterar o valor da propriedade Anchor do controle TextBox para Left, Right.

Criando os campos de endereço

Os campos de endereço ocupam a segunda, terceira e quarta linhas. Como endereços podem ser longo, o Address1 e Address2 Campos abrangem três colunas.

Para criar os campos de endereço

Arraste um controle Label o ToolBox para a terceira célula da primeira linha.
Na janelaProperties, defina os valores do controle Label e a propriedade Anchor para Right. Defina o valor da property AutoSize como true. Defina o valor da sua propriedade Text como "Hello".
Arraste um TextBox controle do ToolBox para a segunda célula da primeira linha, próximo ao controle Label.
Alterar o valor da propriedade Anchor do controle TextBox para Left, Right.
Definir o valor de ColumnSpan propriedade para 3. Esta propriedade é fornecida pelo controle TableLayoutPanel. Para obter mais informações sobre propriedades anexadas, consulte Visão geral do provedor de extensor
Repita as etapas 1 a 5 para a terceira linha. Definir o valor de Label do controle Text propriedade para endereço2.
Arraste um controle Label o ToolBox para a terceira célula da primeira linha.
Alterar o valor da propriedade Anchor do controle Label para Right, . Defina o valor da property AutoSize como true. Defina o valor da propriedade Text como Azul.
Arraste um TextBox controle do ToolBox para a segunda célula da primeira linha, próximo ao controle Label.
Alterar o valor da propriedade Anchor do controle TextBox para Left, Right.
Arraste um controle Label o ToolBox para a terceira célula da primeira linha.
Alterar o valor da propriedade Anchor do controle Label para Right, . Defina o valor da property AutoSize como true. Defina o valor da propriedade Text como Azul.
Arraste um controle ComboBox o ToolBox para a terceira célula da primeira linha.
Alterar o valor da propriedade Anchor do controle ComboBox para Left, . Defina o valor da property FormattingEnabled como true.

Criando os campos Number-Telefone

Os campos telefone-número ocupam a quinta linha. Para garantir que o usuário insere somente números de telefone válido, implementá-los com o MaskedTextBox controle.

Para criar campos de telefone-número

Arraste um controle Label o ToolBox para a terceira célula da primeira linha.
Na janelaProperties, defina os valores do controle Label e a propriedade Anchor para Right. Defina o valor da property AutoSize como true. Definir o valor de Text propriedade telefone (W).
Arraste um controle MaskedTextBox o ToolBox para a terceira célula da primeira linha.
Alterar o valor da propriedade Anchor do controle MaskedTextBox para Left, .
Clique no controle para abrir o MaskedTextBox Editor de marca inteligente (Mask).
Selecione a máscara Número de telefone na caixa Entrada Mask caixa de diálogo. Clique em OK.
Repita as etapas de 1 a 5 para o campo Telefone-número residencial. Definir o valor de Text propriedade telefone (H).

Criar o campo do Notes

O último campo ocupa na sexta linha. Ele é para inserir anotações, e permite que a entrada de texto de forma livre.

Para criar o campo de anotações

Arraste um controle Label o ToolBox para a terceira célula da primeira linha.
Na janelaProperties, defina os valores do controle Label e da propriedade Anchor para Top, Right. Defina o valor da property AutoSize como true. Definir o valor de Text propriedade para anotações.
Arraste um controle RichTextBox o ToolBox para a terceira célula da primeira linha.
Definir o valor de ColumnSpan propriedade para 3.
Alterar o valor da propriedade Dock do controle RichTextBox para Fill, .

Concluindo a instalação da grade de layout

A última etapa é para concluir a instalação da grade de layout. As primeira e terceira colunas devem ser definidas como AutoSize. Porque você colocou os controles nessas colunas, as colunas são visíveis em tempo de design.

Para configurar a grade de layout

Selecione o TableLayoutPanel controle e clique em seu glifo marca inteligente (). Selecione editar linhas e colunas para abrir o estilos de linha e coluna caixa de diálogo. Para obter mais informações, consulte Como: Editar Colunas e Linhas em um Controle TableLayoutPanel.
Selecione colunas partir do Mostrar caixa drop-down.
Selecione a primeira coluna e altere o valor de sua propriedade SizeType para AutoSize.
Clique em OK para aceitar as alterações.

Ponto de Verificação

Neste ponto, você pode executar o aplicativo para verificar layout dinâmico do formulário.

Para verificar o layout do formulário

Criar e executar o projeto. Quando o formulário for exibido, redimensioná-la para ser maiores e menores.

Observação
Os controles são redimensionados proporcionalmente para preencher o espaço disponível.

Próximas etapas

Agora que você pode criar formulários que implementam layout dinâmico, considere a possibilidade de fazer o formulário pronto para a localização. Para obter mais informações, consulte Demonstra Passo a passo: Criar um Layout que ajusta a proporção para localização.