Compartilhar via

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

Alguns aplicativos exigem um formulário com um layout que se organiza adequadamente à medida que o formulário é redimensionado ou conforme o conteúdo muda de tamanho. Quando você precisar de um layout dinâmico e não quiser manipular 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 controles em seu formulário. Ambas fornecem uma capacidade automática e configurável de controlar as posições relativas dos controles filho contidos nelas e oferecem recursos de layout dinâmico em tempo de execução, permitindo redimensionar e reposicionar os controles filho à medida que as dimensões do formulário pai mudam. Os painéis de layout podem ser aninhados em painéis de layout, para criar interfaces de usuário sofisticadas.

O FlowLayoutPanel organiza seu conteúdo em uma direção de fluxo específica: horizontal ou vertical. Seu conteúdo pode ser encapsulado de uma linha para outra ou de uma coluna para outra. 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 precisamente a posição de cada controle individual. Suas células são organizadas em linhas e colunas, e elas podem ter tamanhos diferentes. As células podem ser mescladas entre linhas e colunas. As células podem conter qualquer coisa que um formulário possa conter e se comportar na maioria dos outros aspectos como contêineres.

O TableLayoutPanel controle também fornece uma funcionalidade de redimensionamento proporcional em tempo de execução, de modo que seu layout pode mudar 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 formulário redimensionável do Windows para entrada de dados e passo a passo: criando um formulário localizável do Windows.

Em geral, você não deve usar um TableLayoutPanel controle como um contêiner para todo o layout. Utilize os controles TableLayoutPanel para fornecer recursos de redimensionamento proporcionais para 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

  • Abrangendo linhas e colunas com um controle

  • Tratamento automático de transbordos

  • Inserindo controles clicando duas vezes neles na caixa de ferramentas

  • Inserindo um controle desenhando seu contorno

  • Reatribuindo controles existentes para um pai diferente

Quando terminar, você terá uma compreensão da função desempenhada por esses recursos de layout importantes.

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.

Organizando controles em linhas e colunas

O TableLayoutPanel controle permite organizar facilmente controles em linhas e colunas.

Para organizar controles em linhas e colunas usando um TableLayoutPanel

  1. Arraste um controle TableLayoutPanel 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 três controles Button a mais da Caixa de Ferramentas para o controle TableLayoutPanel, para que cada célula contenha um botão.

  4. Agarrar o controlador de dimensionamento vertical entre as duas colunas e movê-lo para a esquerda. Observe que os Button controles na primeira coluna são redimensionados para uma largura menor, enquanto o Button tamanho dos controles na segunda coluna não é alterado.

  5. Pegue a 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 nos controles no painel.

Posicionando controles dentro de células usando encaixe e ancoragem

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

Controles de posicionamento dentro das células

  1. Selecione o primeiro controle Button. Altere o valor de sua Dock propriedade para Fill. Note que o Button controlador se expande para ocupar completamente 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 esteja perto da borda direita da célula. A distância entre as bordas é a soma da Button propriedade do Margin controle e da propriedade do Padding painel.

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

  4. Repita os passos 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 TableLayoutPanel controle no Designer de Formulários do Windows.

  2. Na janela Propriedades, abra a ColumnStyles coleção clicando nas reticências (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 se ajustar ao 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 ajustar a 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 de dados.

  6. Pegue uma das alças de redimensionamento de canto e redimensione o controle em largura e altura. Observe que as linhas e colunas são redimensionadas conforme o TableLayoutPanel tamanho do controle é alterado. Observe também que as linhas e colunas são redimensionáveis com os controladores de redimensionamento horizontal e vertical.

Abrangendo linhas e colunas com um controle

O TableLayoutPanel controle adiciona várias novas propriedades aos controles durante o tempo de design. 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 controle

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

  2. Nas janelas Propriedades , altere 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.

  3. Repita a etapa 2 para a RowSpan propriedade.

Inserindo controles clicando 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 controle TableLayoutPanel 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 TableLayoutPanel primeira célula do 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 controle TableLayoutPanel. Observe também que o TableLayoutPanel controle se expande para acomodar os novos controles se nenhuma célula aberta estiver disponível.

Tratamento automático de transbordos

Quando você estiver inserindo controles no TableLayoutPanel controle, poderá ficar sem células disponíveis para seus novos controles. O TableLayoutPanel controle lida com essa situação automaticamente aumentando o número de células.

Para observar o tratamento automático 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. Depois que 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ê recebe uma mensagem de erro do Designer de Formulários do Windows informando que linhas e colunas adicionais não podem ser criadas.

Inserindo um controle desenhando 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 controle TableLayoutPanel da caixa de ferramentas para o formulário.

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

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

  4. Clique e segure o botão do mouse.

  5. Arraste o ponteiro do mouse para desenhar o contorno do Button controle. Quando estiver satisfeito com o tamanho, libere 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 das 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 das 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.

Troca de 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-o 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 painéis de layout e controles. 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 soltar um TableLayoutPanel controle dentro de um controle existente.

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

Consulte também

  • Last updated on