Etapa 4: Definir o layout do formulário com um controle TableLayoutPanel

Nesta etapa, você adiciona um controle TableLayoutPanel ao formulário.O TableLayoutPanel ajuda a alinhar corretamente controles no formulário que você irá adicionar posteriormente.

Para uma versão de vídeo deste tópico, consulte o Tutorial 1: Criar um Visualizador de Imagens no Visual Basic - Vídeo 2 ou o Tutorial 1: Criar um Visualizador de Imagens em C# - Vídeo 2.Esses vídeos usam uma versão anterior do Visual Studio, portanto, existem pequenas diferenças em alguns comandos de menu e em outros elementos da interface do usuário.No entanto, os conceitos e procedimentos funcionam de maneiras semelhantes na versão atual do Visual Studio.

Para apresentar seu formulário com um controle TableLayoutPanel

1. No lado esquerdo da IDE do Visual Studio, localize a guia Caixa de Ferramentas.Escolha o guia Caixa de Ferramentas e a Caixa de Ferramentas aparecerá. (Ou, na barra de menu, escolha Modo de Exibição, Caixa de Ferramentas.)

2. Escolha o pequeno símbolo de triângulo ao lado do grupo Contêineres para abri-lo, como mostrado na imagem a seguir.

   Grupo de contêineres

   

3. Você pode adicionar controles como botões, caixas de seleção e rótulos para seu formulário.Clique duas vezes no controle TableLayoutPanel na caixa de ferramentas. (Ou, você pode arrastar o controle da caixa de ferramentas para o formulário.) Quando você fizer isso, o IDE adiciona um controle de TableLayoutPanel ao formulário, conforme mostrado na seguinte imagem.

   Controle TableLayoutPanel

   

   Observação
   Após adicionar seu TableLayoutPanel, se uma janela aparecer no seu formulário com o título Tarefas TableLayoutPanel, clique em qualquer lugar dentro do formulário para fechá-la.Você aprenderá mais sobre essa janela mais tarde neste tutorial.

   Observe como a caixa de ferramentas expande para cobrir o formulário quando você clica em sua guia, e fecha depois que você clica em qualquer lugar fora dela.Esse é o recurso de ocultação automática IDE.Você pode ligar ou desligar para qualquer uma das janelas, escolhendo o ícone de anotações no canto superior direito da janela para alternar entre ocultar automaticamente e fixar no lugar.O ícone de anotações aparece da seguinte maneira.

   Ícone de pino

   

4. Certifique-se de que TableLayoutPanel esteja selecionado escolhendo-o.Você pode verificar qual controle é selecionado examinando a lista suspensa na parte superior da janela Propriedades, conforme mostrado na seguinte imagem.

   A janela Propriedades que mostra o controle TableLayoutPanel

   

5. Escolha o botão Alfabético na barra de ferramentas na janela Propriedades.Isso faz com que a lista de propriedades na janela Propriedades seja exibida em ordem alfabética, o que facilitará a localização de propriedades neste tutorial.

6. O seletor de controle é uma lista suspensa na parte superior da janela Propriedades.Neste exemplo, mostra que um controle chamado tableLayoutPanel1 está selecionado.Você pode selecionar controles escolhendo uma área no designer do Windows Forms ou escolhendo no seletor de controle.Agora que TableLayoutPanel é selecionado, localize a propriedade de Encaixar e escolha Encaixar, que devem ser definida como Nenhum.Observe que uma seta suspensa aparece ao lado do valor.Escolha a seta e selecione o botão Preenchimento (o botão grande no meio), como mostrado na imagem a seguir.

   A janela Propriedades com o preenchimento selecionado

   

   Inserção no Visual Studio refere-se a quando uma janela é anexada a outra janela ou área no IDE.Por exemplo, a janela Propriedades pode ser desencaixada - isto é, ser desanexada e ter flutuação livre no Visual Studio – ou pode ser encaixada no Gerenciador de Soluções.

7. Após você definir a propriedade Encaixe de TableLayoutPanel para Preenchimento, o painel preenche o formulário inteiro.Se você redimensionar o formulário novamente, o TableLayoutPanel permanecerá anexado e se redimensionará para caber.

   Observação

   Um TableLayoutPanel funciona como uma tabela no Microsoft Office Word: tem linhas e colunas, e uma célula individual pode abranger várias linhas e colunas.Cada célula pode conter um controle (como um botão, uma caixa de seleção ou um rótulo).O TableLayoutPanel terá um controle de PictureBox que abrange a primeira linha inteira, um controle de CheckBox na célula do canto inferior esquerdo, e quatro controles de Botão na célula inferior direita.

8. Atualmente, o TableLayoutPanel tem duas linhas de igual tamanho e duas colunas de igual tamanho.Você precisa redimensionar para que a primeira linha e a coluna da direita sejam bem maiores.No designer do Windows Forms, selecione o TableLayoutPanel.No canto superior direito, há um pequeno botão de triângulo preto, que aparece da seguinte maneira.

   Botão de triângulo

   

   Este botão indica que o controle tem as tarefas que ajudam você definir suas propriedades automaticamente.

9. Escolha o triângulo para exibir a lista de tarefas do controle, como mostrado na imagem a seguir.

   Tarefas TableLayoutPanel

   

10. Escolha a tarefa Editar Linhas e Colunas para exibir a janela Estilos de Coluna e Linha.Escolha Coluna1 e defina o tamanho como 15% certificando-se de que o botão Porcentagem esteja selecionado e inserindo 15 na caixa Porcentagem. (Que é um controle de NumericUpDown, que você usar em um tutorial posterior.) Escolha Coluna2 e defina-a como 85%.Não escolha o botão OK ainda, porque a janela fechará. (Mas se você fizer isso, você pode reabri-la usando a lista de tarefas.)

    Estilos de coluna e linha TableLayoutPanel

    

11. Na lista suspensa Mostrar na parte superior da janela, escolha Linhas.Defina Row1 para 90% e Row2 para 10%.

12. Escolha o botão OK.O TableLayoutPanel agora deve ter uma grande primeira linha, uma pequena linha inferior, uma pequena coluna esquerda, e uma grande coluna direita.Você pode redimensionar linhas e colunas em TableLayoutPanel selecionando tableLayoutPanel1 no formulário e então arrastando as bordas de linha e coluna.

    Form1 com TableLayoutPanel redimensionado

    

Para continuar ou revisar

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

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