Etapa 5: Adicionar controles ao formulário

Nessa etapa, você adicionar controles, como um controle PictureBox e um controle CheckBox em seu formulário.Em seguida, você adiciona botões ao seu formulário.

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 adicionar controles ao seu formulário

1. Vá para a guia Caixa de Ferramentas (localizada no lado esquerdo do IDE do Visual Studio) e expanda o grupo Controles Comuns.Isso mostra os controles mais comuns que você vê em formulários.

2. Escolha o controle TableLayoutPanel no formulário.Para verificar se o TableLayoutPanel está selecionado, certifique-se de que o nome aparece na caixa de lista suspensa na parte superior da janela Propriedades.Você também pode escolher os controles de formulário usando a caixa de lista suspensa na parte superior da janela Propriedades.Escolher um controle desta maneira sempre pode ser mais fácil do que escolher um pequeno controle com um mouse.

3. Clique duas vezes no item PictureBox para adicionar um controle PictureBox ao seu formulário.Como o TableLayoutPanel é encaixado para preencher o formulário, a IDE adiciona o controle da PictureBox à primeira célula vazia (canto superior esquerdo).

4. Escolha o novo controle PictureBox para selecioná-lo, e então escolha o triângulo preto no novo controle PictureBox para exibir a lista de tarefas, como mostrado na seguinte imagem.

   Tarefas PictureBox

   

   Observação
   Se você adicionar acidentalmente o tipo errado de controle a seu TableLayoutPanel, poderá excluí-lo.Clique com o botão direito do mouse no controle e escolha Excluir no menu de contexto.Você pode também remover os controles de formulário usando a barra de menus.Na barra de menus, escolha Editar, Desfazer, ou Editar, Excluir.

5. Escolha o link Encaixar em recipiente pai.Isso define automaticamente a propriedade Dock de PictureBox como Fill.Para ver isso, escolha o controle PictureBox para selecioná-lo, vá para a janela Propriedades e certifique-se de que a propriedade Dock está definida como Preenchimento.

6. Faça a PictureBox se estender por ambas as colunas alterando sua propriedade ColumnSpan.Escolha o controle PictureBox e defina sua propriedade A property como 2.Além disso, quando a PictureBox está vazia, você deseja mostrar uma estrutura vazia.Defina sua propriedade BorderStyle para Fixed3D.

   Observação
   Se você não vir uma propriedade ColumnSpan para sua PictureBox, então é provável que a PictureBox tenha sido adicionada ao formulário em vez de ao TableLayoutPanel.Para corrigir isso, escolha o PictureBox, exclua-o, escolha o TableLayoutPanel, e adicione um novo PictureBox.

7. Escolha o TableLayoutPanel no formulário e adicione um controle CheckBox ao formulário.Clique duas vezes no item CheckBox na Caixa de Ferramentas para adicionar um novo controle CheckBox à próxima célula livre em sua tabela.Como um PictureBox ocupa as duas primeiras células em TableLayoutPanel, o controle de caixa de seleção é adicionado à célula do canto inferior esquerdo.Escolha a propriedade Texto e digite a palavra Alongamento, como mostrado na imagem a seguir.

   Controle de caixa de texto com propriedade de alongamento

   

8. Escolha o TableLayoutPanel no formulário e, em seguida, vá para o grupo Contêineres na Caixa de Ferramentas (onde você obteve o controle TableLayoutPanel) e clique duas vezes no item FlowLayoutPanel para adicionar um novo controle à última célula em PictureBox (canto inferior direito).Insira FlowLayoutPanel no TableLayoutPanel (escolhendo Encaixar em recipiente pai na lista de tarefas de triângulo preto de FlowLayoutPanel, ou definindo a propriedade Dock de FlowLayoutPanel a Fill.

   Observação

   Um FlowLayoutPanel é um contêiner que organiza outros controles em linhas nítidas na ordem.Quando você redimensiona um FlowLayoutPanel, se ele tiver espaço para colocar todos os controles em uma única linha, ele faz isso.Caso contrário, organize-os em linhas, um sobre o outro.Você usará um FlowLayoutPanel para armazenar quatro botões.Se os botões forem organizados uns sobre os outros quando adicionados, verifique se FlowLayoutPanel está selecionado antes de adicionar os botões.Embora tenha sido indicado anteriormente que cada célula pode conter somente um controle, a célula inferior direita de TableLayoutPanel possui quatro controles de botão.Isso ocorre porque você pode colocar um controle em uma célula que contém outros controles.O tipo de controle é chamado de recipiente, e o FlowLayoutPanel é um recipiente.

Para adicionar botões

1. Escolha o novo FlowLayoutPanel que você adicionou.Vá para Controles Comuns na Caixa de Ferramentas e clique duas vezes no item Botão para adicionar um controle de botão chamado botão1 ao seu FlowLayoutPanel.Repita para adicionar outro botão.O IDE determina que já há um botão chamado button1 e chama o próximo de button2.

2. Normalmente, você adiciona outros botões usando a caixa de ferramentas.Desta vez, escolha button2 e na barra de menus escolha Editar, Copiar (ou pressione Ctrl+C).Na barra de menus, escolha Editar, Colar (ou pressione Ctrl+V) para colar uma cópia do botão.Agora cole-o novamente.O IDE agora adicionou button3 e button4 ao FlowLayoutPanel.

   Observação
   Você pode copiar e colar qualquer controle.O IDE nomeia e coloca os novos controles de uma maneira lógica.Se você colar um controle em um contêiner, o IDE escolherá o próximo espaço lógico para posicionamento.

3. Escolha o primeiro botão e defina sua propriedade Texto como Mostrar uma imagem.Defina as propriedades de Texto dos próximos três botões como Limpar a imagem, Definir a cor do plano de fundo e Fechar.

4. A próxima etapa é dimensionar os botões e organizá-los de forma a alinhá-los no lado direito do painel.Escolha o FlowLayoutPanel e examine sua propriedade FlowDirection.Alterá-lo para que ele seja definido como RightToLeft.Assim que fizer isso, os botões devem alinhar-se para o lado direito da célula, e reverter a ordem de modo que o botão Mostrar uma imagem fique à direita.

   Observação
   Se os botões ainda estiverem na ordem errada, você poderá arrastar os botões em torno do FlowLayoutPanel para reorganizá-los em qualquer ordem.Você pode escolher um botão e o arrastar para a esquerda ou direita.

5. Escolha o botão Fechar para selecioná-lo.Mantenha pressionada a tecla CTRL e escolha os outros três botões, de forma que todos eles sejam selecionados.Quando todos os botões são selecionados, vá para a janela Propriedades e role até a propriedade AutoDimensionar.Essa propriedade informa o botão para redimensionar automaticamente para ajustar todo o texto correspondente.Defina como verdadeiro.Os botões agora devem ser dimensionados corretamente e estar na ordem correta. (Enquanto todos os quatro botões estiverem selecionados, você pode alterar todas as quatro propriedades de AutoDimensionar ao mesmo tempo.) A figura a seguir mostra os quatro botões.

   Visualizador de imagens com quatro botões

   

6. Agora execute o programa novamente para ver seu formulário recentemente apresentado.A escolha dos botões e da caixa de seleção não faz nada ainda, mas funcionará em breve.

Para continuar ou revisar

• Para ir para a próxima etapa do tutorial, consulte Etapa 6: Nomear os controles de botão.

• Para retornar à etapa anterior do tutorial, consulte Etapa 4: Definir o layout do formulário com um controle TableLayoutPanel.