Demonstra Passo a passo: Organizando controles no Windows Forms usando um TableLayoutPanel

Artigo
08/25/2010

Alguns aplicativos necessitam de um formulário com um layout que organiza próprio adequadamente o formulário é redimensionado ou sistema autônomo o Sumário alterar em dimensionar.Quando você precisa de um layout dinâmico e deseja manipular Layout eventos explicitamente no seu código, considere o uso de um painel de layout.

The FlowLayoutPanel controle e o TableLayoutPanel controle fornecem maneiras intuitivas de organizar controles no formulário. Ambos fornecem uma capacidade automático e configurável de controlar sistema autônomo posições relativas de controles filho contidos neles e ambos oferecem recursos de layout dinâmico em time de execução, para que eles possam redimensionar e reposicionar controles filhos sistema autônomo dimensões do formulário pai alterar.Painéis de layout podem ser aninhados em painéis de layout, para permitir a realização de interfaces de usuário sofisticada.

The FlowLayoutPanel organiza seu Sumário em uma direção de fluxo específico: horizontal ou vertical.Seu Sumário pode ser disposto a partir de uma linha para a próxima ou uma coluna para a próxima.Como alternativa, seu Sumário pode ser cortado em vez de quebradas.Para obter mais informações, consulte Demonstra Passo a passo: Organizando controles no Windows Forms usando um FlowLayoutPanel.

The TableLayoutPanelorganiza seu Sumário em uma grade, fornecendo funcionalidade semelhante ao HTML <tabela>elemento. The TableLayoutPanel controle permite que você colocar controles em um layout de grade sem exigir que você especificar com precisão a posição de cada controle individual. Suas células são organizadas em linhas e colunas e elas podem ter tamanhos diferentes.Células podem ser mescladas em linhas e colunas.Células podem conter qualquer coisa, um formulário pode conter e se comportam em maioria dos outros aspectos sistema autônomo recipientes.

The TableLayoutPanel controle também fornece uma capacidade de Redimensionamento proporcional em time de execução, para que o layout possa alterar sem problemas quando o formulário for redimensionado. Isso torna o TableLayoutPanel controle adequado para finalidades, sistema autônomo formulários de entrada de dados e aplicativos localizados. Para obter mais informações, consulte Demonstra Passo a passo: Criando um Windows Formulário pode ser redimensionado para entrada de dados e Demonstra Passo a passo: Criar um layout que ajusta a proporção para localização.

Em geral, você não deve usar um TableLayoutPanel controle sistema autônomo um contêiner para o layout inteiro. Use TableLayoutPanel controles para fornecer recursos de redimensionamento proporcionais para partes do layout.

Tarefas ilustradas nesta explicação passo a passo incluem:

Criando um projeto Windows Forms
Organizando controles em linhas e colunas
Configuração de linha e propriedades da coluna
Linhas e colunas com um controle de abrangência
Manipulação automático de estouros
Inserindo controles, clicar duas vezes eles na caixa de ferramentas
Inserir um controle por seu estrutura de tópicos de desenho
Reatribuindo controles existentes a um pai diferente

Quando tiver terminado, você terá noções básicas sobre o papel desempenhado por esses recursos importantes do layout.

Observação:
As caixas de diálogo e comandos de menu demonstradas podem ser diferentes daqueles descritas na Ajuda, dependendo das configurações ativas ou configurações de edição.Para alterar as configurações, escolher Importar e exportar configurações on the Ferramentas menu.Para obter mais informações, consulte Configurações do Visual Studio.

Criando o projeto

A primeira etapa é criar o projeto e configurar o formulário.

Para criar o projeto

Crie um projeto Windows aplicativo chamado "TableLayoutPanelExample".Para obter mais informações, consulte Como: Criar um projeto de aplicativo do Windows.
Select the form in the WindowsForms Designer.

Organizando controles em linhas e colunas

The TableLayoutPanel controle permite que você com com facilidade organizar controles em linhas e colunas.

Para organizar controles em linhas e colunas usando um TableLayoutPanel

Arraste um controle TableLayoutPanel do ToolBox para seu formulário.Observe que, por padrão, a TableLayoutPanel controle possui quatro células.
arrastar um Button controle das Caixa de ferramentas into the TableLayoutPanel controle e solte-o em uma das células. Observe que o Button controle é criado dentro da célula selecionada.
arrastar três mais Button Controla a partir do Caixa de ferramentas into the TableLayoutPanel controle, para que cada célula contém um botão.
captar dimensionamento vertical manipular entre as duas colunas e movê-la para a esquerda.Observe que o Button controles na primeira coluna são redimensionados para uma largura menor, ao dimensionar das Button controles na segunda coluna não é alterada.
Pegue a alça de dimensionamento vertical entre as duas colunas e mova-o para a direita.Observe que o Button controles na primeira coluna retornam ao seu dimensionar original, enquanto o Button controles na segunda coluna são movidos para a direita.
Mova a alça de dimensionamento horizontal para cima e para baixo para ver o efeito nos controles no painel.

posicionamento Controles dentro de células usando o encaixe e ancorando

O comportamento de ancoragem de controles filho em um TableLayoutPanel difere para o comportamento em outros controles de contêiner. O comportamento de encaixe de controles filho é semelhante a outros controles de contêiner.

Posicionando controles dentro das células

selecionar a primeira Button controle. Defina o valor da propriedade Dock como Fill.Observe que o Button controle se expande até para ocupar sua célula.
selecionar um dos outros Button controles. Defina o valor da propriedade Anchor como Right.Observe que ele é movido para que sua borda direita estiver próximo a borda da célula à direita.A distância entre as bordas é a soma da Button do controle Margin propriedade e o painel Padding propriedade.
Alterar o valor de Button do controle Anchor propriedade para Right e Left. Observe que o controle é dimensionado para a largura da célula, com o Margin e Padding valores levados em conta.
Repetir as etapas 2 e 3 com o Top e Bottom estilos.

Configuração de linha e propriedades da coluna

Você pode conjunto propriedades individuais de linhas e colunas usando o RowStyles e ColumnStyles coleções.

Para conjunto propriedades de linha e coluna

selecionar o TableLayoutPanel controlar no Designer de Formulários do Windows.
No Propriedades janelas, em em aberto o ColumnStyles coleção clicando o reticências)) próximo ao botão a Colunas entrada.
Selecione a primeira coluna e altere o valor de sua propriedade SizeType para AutoSize.clicar OK para aceitar a alterar.Observe que a largura da primeira coluna é reduzida para ajuste o Button controle. Observe também que a largura da coluna não é redimensionável.
No Propriedades janela, em aberto o ColumnStyles coleção e selecionar a primeira coluna. Defina o valor da propriedade SizeType como Percent.clicar OK para aceitar a alterar.Redimensionar o TableLayoutPanel o controle para uma largura maior e observe que expande a largura da primeira coluna. Redimensionar o TableLayoutPanel o controle para uma largura menor e observe os botões na primeira coluna contenham serão dimensionados para se ajuste à célula. Observe também que a largura da coluna é redimensionável.
No Propriedades janela, abra o ColumnStyles coleção e selecionar todas as colunas listadas. conjunto o valor de cada SizeType propriedade para Percent. clicar OK para aceitar a alterar.Repetir com o RowStyles coleção.
Pegue uma das alças de redimensionamento de canto e redimensionar a largura e a altura do TableLayoutPanel controle. Observe que sistema autônomo linhas e colunas são redimensionadas sistema autônomo a TableLayoutPanel alterações de dimensionar do controle. Observe também que as linhas e colunas são redimensionáveis com horizontal e vertical alças de dimensionamento.

Linhas e colunas com um controle de abrangência

The TableLayoutPanel controle adiciona várias novas propriedades para controles em time de design. Duas dessas propriedades são RowSpan e ColumnSpan. Você pode usar essas propriedades para tornar um controle de extensão mais de uma linha ou coluna.

Para expandir linhas e colunas com um controle

selecionar o Button controle na primeira linha e primeira coluna.
No Propriedades janelas, altere o valor do ColumnSpan propriedade para 2. Observe que o Button controle preenche a primeira coluna e a segunda coluna. Observe também que uma linha extra foi adicionada para acomodar essa alterar.
Repetir a etapa 2 para o RowSpan propriedade.

Inserindo controles, clicar duas vezes eles na caixa de ferramentas

Você pode popular seu TableLayoutPanel controle clicando duas vezes em controles de Caixa de ferramentas.

Para inserir controles clicando duas vezes na caixa de ferramentas

Arraste um controle TableLayoutPanel do ToolBox para seu formulário.
clicar duas vezes o Button ícone de controle no Caixa de ferramentas.Observe que um novo controle de botão é exibido no TableLayoutPanel primeira célula do controle.
clicar duas vezes em vários controles mais no Caixa de ferramentas.Observe que os novos controles sucessivamente aparecem no TableLayoutPanel células desocupado do controle. Observe também que o TableLayoutPanel controle se expande para acomodar os novos controles se nenhuma célula aberta disponível.

Manipulação automático de estouros

Quando você está inserindo controles para o TableLayoutPanel controle, você pode ficar sem células vazias para os novos controles. The TableLayoutPanel controle manipula automaticamente essa situação, aumentando o número de células.

Para observar a manipulação automático de estouros

Se houver células vazias ainda no TableLayoutPanel controlar, continuar a inserir novos Button Controla até que o TableLayoutPanel controle está cheio.
Uma vez o TableLayoutPanel controle está cheia, clicar duas vezes o Button ícone do Caixa de ferramentas para inserir outro Button controle. Observe que o TableLayoutPanel controle cria novas células para acomodar o novo controle. Inserir alguns controles mais e observar o comportamento de redimensionamento.
Altere o valor da propriedade GrowStyle do controle TableLayoutPanel para FixedSize, .clicar duas vezes o Button ícone do Caixa de ferramentas inserirButton Controla até que o TableLayoutPanel controle está cheio. clicar duas vezes o Button ícone do Caixa de ferramentas novamente.Observe que você recebe uma mensagem de erro do Designer de Formulários do Windows informando que não não possível criar outras linhas e colunas.

Inserir um controle por seu estrutura de tópicos de desenho

Você pode inserir um controle em um TableLayoutPanel controlar e especifique seu dimensionar por seu estrutura de tópicos de desenho em uma célula.

Para inserir um controle desenhando seus tópicos

Arraste um controle TableLayoutPanel do ToolBox para seu formulário.
No Caixa de ferramentas, clicar no Button ícone de controle. Não arrastar-o para o formulário.
Mova o ponteiro do mouse sobre o TableLayoutPanel controle. Observe que o ponteiro se transformar em uma cruz com o Button ícone do controle anexado.
clicar e Isenção o botão do mouse.
arrastar o ponteiro do mouse para desenhar o estrutura de tópicos do Button controle. Quando estiver satisfeito com o dimensionar, solte o botão do mouse.Observe que o Button controle é criado na célula em que você desenhou o estrutura de tópicos do controle.

Vários controles em células não são permitidos

The TableLayoutPanel controle pode conter apenas um filho controle por célula.

Para demonstrar que vários controles dentro das células não são permitidos

arrastar um Button controlar a partir do Caixa de ferramentas into the TableLayoutPanel controlar e solte-o em uma das células ocupadas. Observe que o TableLayoutPanel controle não permite que você soltar o Button controle para a célula ocupada.

Troca de controles

The TableLayoutPanel controle permite que você troque os controles que ocupam duas células diferentes.

A troca de controles

arrastar uma do Button controles de uma célula ocupada e soltar para outra célula ocupada. Observe que os dois controles são movidos de uma célula para Outros.

Próximas etapas

Você pode obter um layout complexo usando uma combinação de painéis de layout e controles.Sugestões para mais exemplos incluem:

Tente redimensionar um o Button controles para um dimensionar maior e observe o efeito sobre o layout.
Colar uma seleção de vários controles de TableLayoutPanel controle e observe como os controles são inseridos.
Layout de painéis podem conter outros painéis de layout.Experimentar soltando um TableLayoutPanel controle para o controle existente.
Encaixar o TableLayoutPanel controle ao formulário pai. Redimensionar o formulário e observe o efeito sobre o layout.

Consulte também