Demonstra Passo a passo: Organizando controles em formulários do Windows usando um TableLayoutPanel

Artigo
08/04/2011

Alguns aplicativos requerem um formulário com um layout que organiza próprio adequadamente, como o formulário é redimensionado ou que os conteúdos mudam em tamanho. Quando você precisa de um layout dinâmico e não deseja manipular Layout eventos explicitamente no seu código, considere o uso de um painel de layout.

O FlowLayoutPanel controle e o TableLayoutPanel controle fornecem maneiras intuitivas de organizar controles no formulário. Ambos fornecem uma capacidade automática e configurável para controlar as posições relativas dos controles de filho contidos neles e ambos oferecem recursos de layout dinâmico em tempo de execução para que possam redimensionar e reposicionar controles filho como as dimensões da alteração de formulário pai. Painéis de layout podem ser aninhados em painéis de layout, para permitir a realização de interfaces de usuário sofisticada.

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

O TableLayoutPanel organiza seu conteúdo em uma grade, fornecendo funcionalidade semelhante ao HTML <table> elemento. O 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 na maioria dos outros aspectos como recipientes.

O TableLayoutPanel controle também fornece um recurso de Redimensionamento proporcional em tempo de execução para o layout possa alterar suavemente, como o formulário é redimensionado. Isso torna o TableLayoutPanel controle adequado para finalidades, como os formulários de entrada de dados e aplicativos localizados. Para obter mais informações, consulte Demonstra Passo a passo: Criando um formulário do Windows redimensionável 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 o controle como um recipiente para o layout inteiro. Use TableLayoutPanel controles para fornecer recursos de redimensionamento proporcionais a partes do layout.

As tarefas ilustradas neste passo a passo incluem:

Criando um projeto Windows Forms
Organizando controles em linhas e colunas
Linha de configuração e coluna de propriedades
Abrangência de linhas e colunas com um controle
Tratamento automático de Overflows
Inserindo controles clicando neles duas vezes na caixa de ferramentas
Inserir um controle desenhando seus tópicos
Reatribuindo controles existentes a um pai diferente

Quando tiver terminado, você terá de entender 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 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.

Criando o projeto

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

Para criar o projeto

Crie um projeto de aplicativo do Windows chamado "tablelayoutpanelexample". Para obter mais informações, consulte Como: Crie um novo projeto de aplicativo do Windows Forms .
Selecione o formulário de Windows Forms Designer.

Organizando controles em linhas e colunas

O TableLayoutPanel controle permite que você facilmente 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, o TableLayoutPanel o controle tem quatro células.
Arrastar um Button de controle da Toolbox para o TableLayoutPanel controlar e soltá-lo em uma das células. Observe que o Button controle é criado dentro da célula que você selecionou.
Arraste três mais Button controla a partir de Toolbox na TableLayoutPanel controlar, de forma que cada célula contém um botão.
Pegue a alça de dimensionamento vertical entre as duas colunas e mova-o para a esquerda. Observe que o Button controles na primeira coluna são redimensionados para uma largura menor, enquanto o tamanho da Button controles na segunda coluna é alterado.
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 tamanho original, enquanto o Button controles na segunda coluna são movidas para a direita.
Mova a alça de dimensionamento horizontal e para baixo para ver o efeito nos controles no painel.

Posicionar os controles dentro das células usando o encaixe e ancoragem

O comportamento de ancoragem de controles filho em um TableLayoutPanel difere do comportamento em outros controles do recipiente. O comportamento de ancoragem de controles filho é o mesmo que outros controles do recipiente.

Posicionar os controles dentro das células

Selecione o primeiro Button de controle. Defina o valor da propriedade Dock como Fill. Observe que o Button controle expande para preencher a célula.
Selecione uma da outra Button controles. Defina o valor da propriedade Anchor como Right. Observe que ele é movido para que sua borda direita está próxima a borda direita da célula. 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 levado em conta.
Repita as etapas 2 e 3 com o Top e Bottom estilos.

Linha de configuração e coluna de propriedades

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

Para definir as propriedades de linha e coluna

Selecione o TableLayoutPanel de controle no Windows Forms Designer.
No Propriedades janelas, abrir o ColumnStyles coleção clicando nas reticências () botão ao lado do colunas entrada.
Selecione a primeira coluna e altere o valor de sua propriedade SizeType para AutoSize. Clique em OK para aceitar a alteração. Observe que a largura da primeira coluna é reduzida para ajustar a Button de controle. Observe também que a largura da coluna não é redimensionável.
No Propriedades janela, abrir o ColumnStyles coleção e selecione a primeira coluna. Defina o valor da propriedade SizeType como Percent. Clique em OK para aceitar a alteração. Redimensionar o TableLayoutPanel para uma maior largura de controle e observe se expande a largura da primeira coluna. Redimensionar o TableLayoutPanel o controle para uma largura menor e a nota que os botões na primeira coluna são dimensionados para se ajustar a célula. Observe também que a largura da coluna é redimensionável.
No Propriedades janela, abrir o ColumnStyles coleção e selecione todas as colunas listadas. Definir o valor de cada SizeType propriedade para Percent. Clique em OK para aceitar a alteração. Repita com o RowStyles coleção.
Pegue uma das alças de redimensionamento de canto e redimensionar a largura e a altura do TableLayoutPanel de controle. Observe que as linhas e colunas são redimensionadas como o TableLayoutPanel alterações de tamanho. do controle Observe também que as linhas e colunas são redimensionáveis com horizontal e vertical de alças de dimensionamento.

Abrangência de linhas e colunas com um controle

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

Para expandir linhas e colunas com um controle

Selecione o Button o controle na primeira linha e primeira coluna.
No Propriedades windows, alterar o valor da 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 alteração.
Repita a etapa 2 para o RowSpan propriedade.

Inserindo controles clicando neles duas vezes na caixa de ferramentas

Você pode preencher seu TableLayoutPanel controle clicando duas vezes em controles de Toolbox.

Para inserir controles clicando duas vezes na caixa de ferramentas

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

Tratamento automático de Overflows

Quando você está inserindo controles para o TableLayoutPanel o controle, você pode ficar sem células vazias para controles novos. O TableLayoutPanel controle manipula esta situação automaticamente pelo aumento do número de células.

Para observar o tratamento automático de overflows

Se houver células vazias ainda na TableLayoutPanel controle, continuar a inserir novos Button controla até que o TableLayoutPanel controle está completo.
Uma vez o TableLayoutPanel controle está cheio, clique duas vezes o Button ícone na Toolbox para inserir outro Button de 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, . Clique duas vezes o Button ícone no caixa de ferramentas para inserir Button controla até o TableLayoutPanel controle está completo. Clique duas vezes o Button ícone na caixa de ferramentas novamente. Observe que você recebe uma mensagem de erro a partir de Windows Forms Designer informando que não não possível criar colunas e linhas adicionais.

Inserir um controle desenhando seus tópicos

Você pode inserir um controle em um TableLayoutPanel de controle e especificar seu tamanho desenhando seus tópicos 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, clique o Button ícone de controle. Não arraste-o para o formulário.
Mova o ponteiro do mouse sobre o TableLayoutPanel de controle. Observe que o ponteiro muda para uma cruz com o Button o ícone do controle anexado.
Clique e mantenha pressionado o botão do mouse.
Arraste o ponteiro do mouse para desenhar o contorno da Button de controle. Quando estiver satisfeito com o tamanho, solte o botão do mouse. Observe que o Button controle é criado na célula em que você desenhou da estrutura de tópicos. o controle

Vários controles dentro das células não são permitidos.

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

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

Arrastar um Button de controle do Toolbox para o TableLayoutPanel controlar e soltá-lo em uma das células ocupado. Observe que o TableLayoutPanel controle não permite que você solte o Button o controle na célula ocupado.

Controles de troca

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

Para trocar os controles

Arraste uma da Button controles a partir de uma célula de ocupado e soltar em outra célula ocupado. Observe que os dois controles são movidos de uma célula na outra.

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 uma da Button controles de um tamanho maior e uma observação o efeito no layout.
Colar uma seleção de vários controles para o TableLayoutPanel de controle e observe como os controles são inseridos.
Painéis de layout podem conter outros painéis de layout. Experimente soltando um TableLayoutPanel o controle em um controle existente.
Encaixe o TableLayoutPanel o controle para o formulário pai. Redimensionar o formulário e observe o efeito no layout.

Consulte também

Share via