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 os controles no formulário que você adicionará posteriormente.

Como estabelecer seu formulário com um controle TableLayoutPanel

  1. No lado esquerdo do Visual Studio IDE, escolha a guia Caixa de Ferramentas. (Como alternativa, escolha Exibir Caixa de Ferramentas na barra de menus ou pressione > Ctrl + Alt + X.)

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

    Grupo de contêineres
    Contêineres _ _group

  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ê faz isso, o IDE adiciona um controle TableLayoutPanel ao formulário, conforme mostrado na captura de tela a seguir.

    Controle TableLayoutPanel
    TableLayoutPanel _ _control

    Observação

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

    Observe como a caixa de ferramentas é expandida para cobrir o formulário quando você clica em sua guia e é fechada depois que você clica em qualquer lugar fora dela. Esse é o Ocultar Automaticamente no IDE. Você pode a ligar ou desativar qualquer uma das janelas escolhendo o ícone de alfinete no canto superior direito da janela para alternar Ocultar Automaticamente e bloqueá-lo no local. O ícone de anotações aparece da seguinte maneira.

    Ícone de pino
    Pushpin _ _icon

  4. Escolha TableLayoutPanel para garantir que esteja selecionado. Você pode verificar qual controle está selecionado observando a lista de listas na parte superior da janela Propriedades, conforme mostrado na captura de tela a seguir.

    Janela Propriedades mostrando o controle TableLayoutPanel
    Propriedades _ _janela mostrando TableLayoutPanel_ _control

  5. Escolha o botão Alfabético na barra de ferramentas na janela Propriedades. Isso classifica a lista de propriedades na janela Propriedades em ordem alfabética, o que facilita a localização de propriedades neste tutorial.

  6. O seletor de controle é uma lista suspensa na parte superior da janela Propriedades. Neste exemplo, ela mostra que um controle chamado tableLayoutPanel1 está selecionado. Você pode selecionar controles escolhendo uma área no Designer de Formulários do Windows ou escolhendo no seletor de controle.

    Agora que TableLayoutPanel está selecionado, localize a propriedade Encaixar e escolha Encaixar, que deve ser definida como Nenhum. Observe que uma seta suspensa aparece ao lado do valor. Escolha a seta e, em seguida, selecione o botão Preencher (o botão grande no meio), conforme mostrado na captura de tela a seguir.

    Janela Propriedades com Preenchimento selecionado
    Propriedades _ _janela com Preencher_ _selected

    Encaixe 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 ou seja, desanapeada e flutuante livre dentro Visual Studio ou pode ser encaixada em Gerenciador de Soluções — — .

  7. Depois de definir a propriedade TableLayoutPanel Dock como Fill, observe que o painel preenche todo o formulário. 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). Seu TableLayoutPanel deve ter um controle que abrange toda a linha superior, um controle em sua célula inferior esquerda e quatro controles em sua célula PictureBox CheckBox inferior Button direita.

  8. Atualmente, o TableLayoutPanel tem duas linhas de igual tamanho e duas colunas de igual tamanho. Vamos reeslizá-los para que a linha superior e a coluna direita sejam muito maiores. No Designer de Formulários do Windows, 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
    Triângulo _ _button

    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, conforme mostrado na captura de tela a seguir.

    Tarefas TableLayoutPanel
    TableLayoutPanel _ _tasks

  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. (Esse é um NumericUpDown controle que você usará em um tutorial posterior.) Escolha Column2 e de definido como 85%. Não escolha o botão OK ainda, pois a janela fechará. (Mas, se você fizer isso, poderá reabri-lo usando a lista de tarefas.)

    Estilos de coluna e linha TableLayoutPanel
    TableLayoutPanel _ _column estilos de linha

  11. Na lista drop-down Mostrar na parte superior da janela Estilos de Coluna e Linha, escolha Linhas. Defina Row1 como 90% e Row2 como 10%.

  12. Clique no 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 reescalar as linhas e colunas no TableLayoutPanel escolhendo tableLayoutPanel1 no formulário e arrastando suas bordas de linha e coluna.)

    Form1 com TableLayoutPanel redimensionado
    Form1 _ _(Visualizador de Imagens) com Resized TableLayoutPanel

Próximas etapas

Confira também