Partilhar via

Passo a passo: Organizando controles em 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 que o conteúdo muda de tamanho. Quando você precisar de um layout dinâmico e não quiser manipular eventos Layout explicitamente em seu código, considere usar um painel de layout.

O controle FlowLayoutPanel e o controle TableLayoutPanel fornecem maneiras intuitivas de organizar controles em seu formulário. Ambos fornecem uma habilidade automática e configurável para controlar as posições relativas dos controlos filho contidos neles, e ambos oferecem funcionalidades de layout dinâmico durante a execução, para que possam redimensionar e reposicionar controlos filho à medida que as dimensões do formulário principal mudam. Os painéis de layout podem ser aninhados dentro de outros painéis de layout, permitindo a criação de interfaces sofisticadas.

O FlowLayoutPanel organiza seu conteúdo em uma direção de fluxo específica: horizontal ou vertical. O seu conteúdo pode ser ajustado de uma linha para a seguinte, ou de uma coluna para a próxima. Alternativamente, seu conteúdo pode ser cortado em vez de embrulhado. Para obter mais informações, consulte Passo a passo: Organizando controles no Windows Forms usando um FlowLayoutPanel.

O TableLayoutPanel organiza os conteúdos numa grelha, fornecendo funcionalidade semelhante ao elemento de tabela HTML <>. O controle TableLayoutPanel 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, e estas podem ter tamanhos diferentes. As células podem ser mescladas entre linhas e colunas. As células podem conter qualquer coisa que uma forma possa conter e comportar-se na maioria dos outros aspetos como recipientes.

O controle TableLayoutPanel também fornece um recurso de redimensionamento proporcional em tempo de execução, para que seu layout possa mudar suavemente à medida que o formulário é redimensionado. Isso torna o controlo TableLayoutPanel adequado para finalidades tais como formulários de entrada de dados e aplicações localizadas. Para obter mais informações, consulte Passo a passo: Criação de um Formulário Windows Redimensionável para entrada de dados e Passo a passo: Criação de um Formulário Windows Localizável.

Em geral, você não deve usar um controle TableLayoutPanel como um contêiner para todo o layout. Utilize os controlos TableLayoutPanel para oferecer capacidades de redimensionamento proporcional às partes do layout.

As tarefas ilustradas neste passo a passo incluem:

  • Criando um projeto do Windows Forms

  • Organizando controles em linhas e colunas

  • Definindo propriedades de linha e coluna

  • Intersecção de linhas e colunas com um controlo

  • Tratamento automático de transbordamentos

  • Inserindo controles clicando duas vezes neles na caixa de ferramentas

  • Inserindo um controle desenhando seu contorno

  • Reatribuindo controles existentes a um pai diferente

Quando terminar, você terá uma compreensão do papel desempenhado por esses importantes recursos de layout.

Criando o projeto

O primeiro passo é 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 WindowsForms Designer.

Organizando controles em linhas e colunas

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

Para organizar controles em linhas e colunas usando um TableLayoutPanel

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

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

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

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

  5. Agarre a alça de ajuste vertical entre as duas colunas e mova para a direita. Observe que os controles Button na primeira coluna retornam ao tamanho original, enquanto os controles Button 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 nos controles no painel.

Controlo de Posicionamento Dentro das Células Usando Encaixe e Ancoragem

O comportamento de ancoragem de controles filho em um TableLayoutPanel difere do comportamento em outros controles de contêiner. O comportamento de encaixe dos controles filho é o mesmo de outros controles de contêiner.

Controles de posicionamento dentro das células

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

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

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

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

Definindo propriedades de linha e coluna

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

Para definir propriedades de linha e coluna

  1. Selecione o controlo TableLayoutPanel no Windows Forms Designer .

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

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

  4. Na janela Propriedades, abra a coleção ColumnStyles e selecione a primeira coluna. Altere o valor da sua propriedade SizeType para Percent. Clique OK para aceitar a alteração. Redimensione o controle TableLayoutPanel para uma largura maior e observe que a largura da primeira coluna se expande. Redimensione o controle TableLayoutPanel 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 coleção ColumnStyles e selecione todas as colunas listadas. Defina o valor de cada propriedade SizeType como Percent. Clique OK para aceitar a alteração. Repita com a coleção RowStyles.

  6. Pegue um dos puxadores de redimensionamento de um dos cantos e ajuste tanto a largura quanto a altura do controlo TableLayoutPanel. Observe que as linhas e colunas são redimensionadas à medida que o tamanho do controle TableLayoutPanel muda. Observe também que as linhas e colunas são redimensionáveis com os controlos de redimensionamento horizontal e vertical.

Expansão de linhas e colunas com um controlo

O controlo TableLayoutPanel adiciona várias propriedades novas aos controlos no tempo de projeto. Duas dessas propriedades são RowSpan e ColumnSpan. Você pode usar essas propriedades para fazer um controle abranger mais de uma linha ou coluna.

Para abranger linhas e colunas com um controlador

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

  2. Nas janelas Propriedades, altere o valor da propriedade ColumnSpan para 2. Observe que o controle Button 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 clicando duas vezes neles na caixa de ferramentas

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

Para inserir controles clicando duas vezes na Caixa de Ferramentas

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

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

  3. Clique duas vezes em mais alguns controles na Toolbox. Observe que os novos controles aparecem sucessivamente nas células desocupadas do controle TableLayoutPanel. Observe também que o controle TableLayoutPanel se expande para acomodar os novos controles se não houver células abertas disponíveis.

Tratamento automático de transbordamentos

Quando estiveres a inserir controlos no controlo TableLayoutPanel, podes esgotar as células disponíveis para os teus novos controlos. O controle TableLayoutPanel lida com essa situação automaticamente, aumentando o número de células.

Observar o tratamento automático de transbordamentos

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

  2. Quando o controle de estiver cheio, clique duas vezes no ícone de no Toolbox para inserir outro controle . Observe que o controle TableLayoutPanel 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 GrowStyle do controle TableLayoutPanel para FixedSize. Clique duas vezes no ícone de na Caixa de Ferramentas do para inserir controlos até que o controlo esteja cheio. Clique duas vezes no ícone de Button na caixa de ferramentas novamente. Observe que você recebe uma mensagem de erro do Windows Forms Designer informando que linhas e colunas adicionais não podem ser criadas.

Inserindo um controle desenhando seu contorno

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

Para inserir um controle desenhando seu contorno

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

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

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

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

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

Não são permitidos controlos múltiplos dentro das células

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

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

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

Trocando controles

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

Para trocar controles

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

Próximos passos

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

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

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

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

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

Ver também