Etapa 4: Layout do formulário com um controle TableLayoutPanel

Nesta etapa, você adiciona um TableLayoutPanel o controle ao seu formulário.

Para obter uma versão de vídeo deste tópico, consulte Tutorial 1: criar um visualizador de imagens em Visual Basic - 2 vídeo ou Tutorial 1: criar um visualizador de imagens em C# - vídeo 2.

Para definir o layout do formulário com um controle TableLayoutPanel

1. Vá para o Windows Forms Designer.Verifique no lado esquerdo do formulário e localize o caixa de ferramentas guia.Aponte para e parar sobre o caixa de ferramentas guia e a caixa de ferramentas é exibida.(Ou, da Exibir menu, clique em caixa de ferramentas.)

2. Clique no sinal de mais ao lado do recipientes grupo para abri-lo, conforme mostrado na figura a seguir.

   Grupo de contêineres

   

3. Você pode adicionar controles como botões, rótulos e caixas de seleção ao seu formulário.Clique duas vezes o TableLayoutPanel o controle na caixa de ferramentas.Quando você fizer isso, o IDE adiciona um TableLayoutPanel controlar ao seu formulário, conforme mostrado na figura a seguir.

   Controle TableLayoutPanel

   

   Observação
   Depois de adicionar sua TableLayoutPanel, se uma janela é exibida dentro do formulário com o título Tarefas TableLayoutPanel, clique em qualquer lugar do formulário para fechá-la.Você aprenderá mais sobre esta janela posteriormente no tutorial.

   Observação

   Observe como a caixa de ferramentas se expande para cobrir o seu formulário quando você clica em sua guia e fecha depois que você clicar fora dela.Que é o recurso de ocultar automaticamente IDE.Você pode ativar ou desativar essa para qualquer uma das janelas clicando no ícone de anotação no canto superior direito da janela para alternar oculta e fixá-la no lugar.O ícone aparece da seguinte maneira.

   Ícone de pino

   

4. Certifique-se TableLayoutPanel estiver selecionada, clicando nela.Você pode verificar qual o controle está selecionado, observando a lista suspensa na parte superior da Propriedades janela, conforme mostrado na figura a seguir.

   Janela de propriedades mostrando o controle TableLayoutPanel

   

5. O seletor de controle é uma lista suspensa na parte superior do Propriedades janela.Neste exemplo, ele mostra que um controle chamado tableLayoutPanel1 está selecionada.Você pode selecionar controles clicando no Windows Forms Designer ou escolhendo o seletor de controle.Agora que TableLayoutPanel é selecionada, encontrar o Dock propriedade e clique em Dock, que deve ser definido como Nenhum.Observe que uma seta suspensa aparece junto com o valor.Clique na seta e, em seguida, selecione o Preencher o botão (o botão grande no meio), conforme mostrado na figura a seguir.

   Janela de propriedades com Preenchimento selecionado

   

6. Depois de definir o TableLayoutPanel Dock propriedade para Preencher, o painel preenche o formulário inteiro.Se você redimensionar o formulário novamente, o TableLayoutPanel permanece encaixado e redimensionado para caber.

   Observação

   TableLayoutPanel funciona como uma tabela no Word de Microsoft Office: ele possui linhas e colunas e uma célula individual pode abranger várias linhas e colunas.Cada célula pode reter um controle (como um botão, uma caixa de seleção ou um rótulo).Seu TableLayoutPanel terá uma PictureBox controle abrangência sua toda linha superior, um caixa de seleção controle em sua célula inferior esquerda e quatro botão controles em sua célula inferior direita.

   Observação
   Embora afirmou que cada célula pode reter somente um controle, a célula inferior direita tem quatro botão controles.Isso ocorre porque você pode colocar um controle em uma célula que contém outros controles.Esse tipo de controle é chamado de recipiente e o TableLayoutPanel é um recipiente.Você aprenderá mais sobre isso mais tarde no tutorial.

7. Atualmente, o TableLayoutPanel tem duas linhas de tamanho igual e duas colunas de tamanho igual.Você precisa redimensioná-los para que a linha superior e na coluna à direita são muito maiores.No Windows Forms Designer, selecione o TableLayoutPanel.No canto superior direito, há um botão pequeno triângulo preto, que aparece da seguinte maneira.

   Botão de triângulo

   

   Esse botão indica que o controle tem tarefas que ajudam a definir suas propriedades automaticamente.

8. Clique no triângulo para exibir a lista de tarefas do controle, como mostrado na figura a seguir.

   Tarefas de TableLayoutPanel

   

9. Clique no Editar linhas e colunas task para exibir o estilos de linha e coluna janela.Clique em Coluna1e defina seu tamanho para 15 por cento por não se esquecendo da % botão é selecionado e inserção 15 na % caixa.(Isso um NumericUpDown controle, o que você irá usar um tutorial posterior.) Clique em Coluna2 e defini-la a 85 por cento.Não clique o OK botão ainda, porque a janela será fechada.(Mas se fizer isso, você poderá reabri-lo usando a lista de tarefas).

10. Do Mostrar na lista suspensa na parte superior da janela, clique em linhas.Definir Row1 a 90% e Row2 a 10 por cento.

11. Clique em OK.Agora, seu TableLayoutPanel deve ter uma grande linha superior, uma linha minúscula inferior, uma pequena coluna esquerda e uma grande coluna à direita.Você pode redimensionar as linhas e colunas em que o TableLayoutPanel arrastando suas bordas.

Para continuar ou revisar

• Para ir para a próxima etapa do tutorial, consulte Etapa 5: Adicionar controles ao formulário.

• Para retornar para a etapa anterior do tutorial, consulte Etapa 3: Definir as propriedades do formulário.