Passo a passo: organizando controles nos Windows Forms usando um TableLayoutPanel

  • Artigo

Alguns aplicativos exigem um formulário com um layout que se organiza adequadamente à medida que o formulário é redimensionado ou conforme o tamanho do conteúdo é alterado. Quando você precisar de um layout dinâmico e não quiser lidar com Layout eventos explicitamente em seu código, considere usar um painel de layout.

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

O organiza FlowLayoutPanel seu conteúdo em uma direção de fluxo específica: horizontal ou vertical. Seu conteúdo pode ser encapsulado de uma linha à outra ou de uma coluna à próxima. Como alternativa, seu conteúdo pode ser recortado, em vez de encapsulado. Para obter mais informações, consulte Passo a passo: organizando controles nos Windows Forms usando um FlowLayoutPanel.

O TableLayoutPanel organiza seu conteúdo em uma grade, fornecendo funcionalidade semelhante ao elemento de tabela> HTML<. O TableLayoutPanel controle permite que você coloque controles em um layout de grade sem exigir que você especifique com precisão a posição de cada controle individual. Suas células são organizadas em linhas e colunas, que podem ter diferentes tamanhos. As células podem ser mescladas entre linhas e colunas. As células podem conter qualquer coisa que um formulário pode conter e se comportam, na maioria de outros aspectos, como contêineres.

O TableLayoutPanel controle também fornece um recurso de redimensionamento proporcional em tempo de execução, para que seu layout possa ser alterado sem problemas à medida que seu formulário é redimensionado. Isso torna o TableLayoutPanel controle adequado para fins como formulários de entrada de dados e aplicativos localizados. Para obter mais informações, consulte Passo a passo: criando um Windows Form redimensionável para entrada de dados e Passo a passo: criando um Windows Form localizável.

Em geral, você não deve usar um TableLayoutPanel controle como um contêiner para todo o layout. Use TableLayoutPanel controles para fornecer recursos de redimensionamento proporcional a partes do layout.

As tarefas ilustradas neste passo a passo incluem:

  • Criação de um projeto dos Windows Forms

  • Organização de controles em linhas e colunas

  • Configuração de propriedades de linha e coluna

  • Extensão de linhas e colunas com um controle

  • Manipulação automática de estouros

  • Inserindo controles ao clicar duas vezes neles na caixa de ferramentas

  • Inserindo um controle ao desenhar seu contorno

  • Reatribuição de controles existentes a um pai diferente

Ao terminar, você terá um entendimento da função desempenhada por esses importantes recursos de layout.

Criando o Projeto

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

Para criar o projeto

  1. Crie um projeto de aplicativo do Windows chamado "TableLayoutPanelExample". Para obter mais informações, consulte Como criar um projeto de aplicativo do Windows Forms.

  2. Selecione o formulário no Designer de Formulários do Windows.

Organização de controles em linhas e colunas

O TableLayoutPanel controle permite que você organize facilmente os controles em linhas e colunas.

Para organizar controles em linhas e colunas utilizando um TableLayoutPanel

  1. Arraste um TableLayoutPanel controle da Caixa de Ferramentas para o formulário. Observe que, por padrão, o TableLayoutPanel controle tem quatro células.

  2. Arraste um Button controle da Caixa de Ferramentas para o TableLayoutPanel controle e solte-o em uma das células. Observe que o Button controle é criado dentro da célula selecionada.

  3. Arraste mais Button três controles da Caixa de Ferramentas para o TableLayoutPanel controle, de modo que cada célula contenha um botão.

  4. Pegue na alça de dimensionamento vertical entre as duas colunas e mova-a para a esquerda. Observe que os Button controles na primeira coluna são redimensionados para uma largura menor, enquanto o tamanho dos Button controles na segunda coluna permanece inalterado.

  5. Pegue na alça de dimensionamento vertical entre as duas colunas e mova-a para a direita. Observe que os Button controles na primeira coluna retornam ao seu tamanho original, enquanto os Button controles na segunda coluna são movidos para a direita.

  6. Mova a alça de dimensionamento horizontal para cima e para baixo para ver o efeito sobre os controles no painel.

Posicionando controles dentro de células usando o encaixe e a ancoragem

O comportamento de ancoragem dos controles filho em a TableLayoutPanel difere do comportamento em outros controles de contêiner. O comportamento de ancoragem de controles filho é igual a outras caixas de controles.

Posicionando controles em células

  1. Selecione o primeiro controle Button. Altere o valor de sua Dock propriedade para Fill. Observe que o Button controle se expande para preencher sua célula.

  2. Selecione um dos outros Button controles. Altere o valor de sua Anchor propriedade para Right. Observe que ele é movido para que sua borda direita fique próxima à borda direita da célula. A distância entre as bordas é a soma da propriedade do Button Margin controle e da propriedade do Padding painel.

  3. Altere o valor da propriedade do Button Anchor controle para Right e Left. Observe que o controle é dimensionado para a largura da célula, com os Margin valores e Padding levados em consideração.

  4. Repita as etapas 2 e 3 com os Top estilos e Bottom .

Configuração de propriedades de linha e coluna

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

Para definir as propriedades de linha e coluna

  1. Selecione o TableLayoutPanel controle no Designer de Formulários do Windows.

  2. Nas janelas Propriedades, abra a ColumnStyles coleção clicando no botão de reticências (O botão Reticências (...) na janela Propriedades do Visual Studio.) ao lado da entrada Colunas.

  3. Selecione a primeira coluna e altere o valor de sua SizeType propriedade para AutoSize. Clique em OK para aceitar a alteração. Observe que a largura da primeira coluna é reduzida para caber no Button controle. Observe também que a largura da coluna não é redimensionável.

  4. Na janela Propriedades, abra a ColumnStyles coleção e selecione a primeira coluna. Altere o valor de sua SizeType propriedade para Percent. Clique em OK para aceitar a alteração. Redimensione o TableLayoutPanel controle para uma largura maior e observe que a largura da primeira coluna se expande. Redimensione o TableLayoutPanel controle para uma largura menor e observe que os botões na primeira coluna são dimensionados para caber na célula. Observe também que a largura da coluna é redimensionável.

  5. Na janela Propriedades, abra a ColumnStyles coleção e selecione todas as colunas listadas. Defina o valor de cada SizeType propriedade como Percent. Clique em OK para aceitar a alteração. Repita com a RowStyles coleção.

  6. Pegue uma das alças de redimensionamento de canto e redimensione a largura e a TableLayoutPanel altura do controle. Observe que as linhas e colunas são redimensionadas à medida que o TableLayoutPanel tamanho do controle muda. Observe também que as linhas e colunas são redimensionáveis com as alças de dimensionamento horizontal e vertical.

Extensão de linhas e colunas com um controle

O TableLayoutPanel controle adiciona várias novas propriedades aos controles em tempo de design. Duas dessas propriedades são a RowSpan e ColumnSpan. Você pode usar essas propriedades para fazer um controle estender-se por mais de uma linha ou coluna.

Para estender linhas e colunas com um controle

  1. Selecione o Button controle na primeira linha e na primeira coluna.

  2. Na janela Propriedades, altere o valor da propriedade ColumnSpan 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.

  3. Repita a etapa 2 para a propriedade RowSpan.

Inserindo controles ao clicar duas vezes neles na caixa de ferramentas

Você pode preencher seu TableLayoutPanel controle clicando duas vezes nos controles na Caixa de Ferramentas.

Para inserir controles clicando duas vezes na caixa de ferramentas

  1. Arraste um TableLayoutPanel controle da Caixa de Ferramentas para o formulário.

  2. Clique duas vezes no Button ícone de controle na Caixa de Ferramentas. Observe que um novo controle de botão aparece na primeira célula do TableLayoutPanel controle.

  3. Clique duas vezes em vários outros controles na Caixa de ferramentas. Observe que os novos controles aparecem sucessivamente nas células desocupadas do TableLayoutPanel controle. Observe também que o TableLayoutPanel controle se expande para acomodar os novos controles se nenhuma célula aberta estiver disponível.

Manipulação automática de estouros

Ao inserir controles no TableLayoutPanel controle, você pode ficar sem células vazias para seus novos controles. O TableLayoutPanel controle lida com essa situação automaticamente, aumentando o número de células.

Observar a manipulação automática de estouros

  1. Se ainda houver células vazias no TableLayoutPanel controle, continue inserindo novos Button controles até que o TableLayoutPanel controle esteja cheio.

  2. Quando o TableLayoutPanel controle estiver cheio, clique duas vezes no Button ícone na Caixa de Ferramentas para inserir outro Button controle. Observe que o TableLayoutPanel controle cria novas células para acomodar o novo controle. Insira mais alguns controles e observe o comportamento de redimensionamento.

  3. Altere o valor da propriedade TableLayoutPanel do controle GrowStyle para FixedSize. Clique duas vezes no Button ícone na Caixa de Ferramentas para inserir Button controles até que o TableLayoutPanel controle esteja cheio. Clique duas vezes no Button ícone na Caixa de Ferramentas novamente. Observe que você receberá uma mensagem de erro do Designer de Formulários do Windows, informando que não possível criar mais linhas e colunas.

Inserindo um controle ao desenhar seu contorno

Você pode inserir um controle em um TableLayoutPanel controle e especificar seu tamanho desenhando seu contorno em uma célula.

Para inserir um controle desenhando seu contorno

  1. Arraste um TableLayoutPanel controle da Caixa de Ferramentas para o formulário.

  2. Na Caixa de Ferramentas, clique no ícone de Button controle. Não o arraste para o formulário.

  3. Mova o ponteiro do mouse sobre o TableLayoutPanel controle. Observe que o ponteiro muda para uma cruz com o ícone de Button controle anexado.

  4. Clique e mantenha o botão do mouse pressionado.

  5. Arraste o ponteiro do mouse para desenhar a estrutura de tópicos do Button controle. Quando estiver satisfeito com o tamanho, solte o botão do mouse. Observe que o Button controle é criado na célula na qual você desenhou o contorno do controle.

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

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

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

  • Arraste um Button controle da Caixa de Ferramentas para o TableLayoutPanel controle e solte-o em uma das células ocupadas. Observe que o TableLayoutPanel controle não permite que você solte o Button controle na célula ocupada.

Trocando controles

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

Para trocar controles

  • Arraste um dos Button controles de uma célula ocupada e solte em outra célula ocupada. Observe que os dois controles são movidos de uma célula para a outra.

Próximas etapas

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

  • Tente redimensionar um dos Button controles para um tamanho maior e observe o efeito no layout.

  • Cole uma seleção de vários controles no TableLayoutPanel controle e observe como os controles são inseridos.

  • Os painéis de layout podem conter outros painéis de layout. Experimente descartar um TableLayoutPanel controle no controle existente.

  • Encaixe o TableLayoutPanel controle no formulário pai. Redimensione o formulário e observe o efeito no layout.

Confira também