Etapa 5: Adicionar controles ao formulário

Nesta etapa, você adiciona controles, como um PictureBox controle e um caixa de seleção o controle, ao seu formulário.Em seguida, você pode adicionar botões 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 adicionar controles ao formulário

1. Vá para a caixa de ferramentas e expanda o Controles comuns grupo.Mostra os controles mais comuns que você vê em formulários.

2. Clique duas vezes o PictureBox controle.O IDE adiciona um PictureBox o controle ao seu formulário.Porque o TableLayoutPanel é encaixada para preencher o formulário, o IDE adiciona o PictureBox o controle para a primeira célula vazia.

3. Clique no triângulo preto no novo PictureBox controle para exibir sua lista de tarefas, como mostrado na figura a seguir.

   Tarefas de PictureBox

   

   Observação
   Se acidentalmente você pode adicionar o tipo errado de controle para seu TableLayoutPanel, você poderá excluí-lo.Clique com o botão direito no controle e clique em Excluir no menu.Você também pode selecionar Desfazer partir do Editar menu para remover os controles do formulário.

4. Clique no Encaixar no contêiner pai link.Isso define automaticamente o PictureBox Dock propriedade para Preencher.Para ver isso, clique o PictureBox controle para selecioná-lo, vá para o Propriedades janela, e certifique-se de que o Dock propriedade estiver definida como Preencher.

5. Fazer com que o PictureBox abrangem as duas colunas, alterando seu ColumnSpan propriedade.Selecione o PictureBox controlar e definir suas ColumnSpan propriedade para 2.Além disso, quando o PictureBox está vazia, você deseja mostrar um quadro vazio.Defina seu BorderStyle propriedade para Fixed3D.

6. Adicionar o caixa de seleção o controle ao formulário.Clique duas vezes o caixa de seleção item na caixa de ferramentas para que o IDE para adicionar um novo caixa de seleção o controle para a próxima célula livre em sua tabela.Porque um controle PictureBox ocupa as primeiras duas células, uma caixa de seleção controle é adicionado à célula inferior esquerda.Selecione o novo caixa de seleção controlar e definir suas texto propriedade para Stretch, conforme mostrado na figura a seguir.

   Controle TextBox com a propriedade Stretch

   

7. Vá para o recipientes grupo na caixa de ferramentas (onde você obteve seu TableLayoutPanel controle) e clique duas vezes o FlowLayoutPanel item para adicionar um novo controle até a última célula em PictureBox.Em seguida, encaixe-o no contêiner pai (escolhendo Encaixar no contêiner pai da lista de tarefas, ou definindo seu Encaixar propriedade para Preencher).

   Observação
   Um FlowLayoutPanel é um recipiente que organiza os outros controles em linhas organizadas em ordem.Quando você redimensiona um FlowLayoutPanel, se ele tiver o espaço para dispor de todos os seus controles em uma única linha, ele faz isso.Caso contrário, ele organiza em linhas, uma acima da outra.Você usará um FlowLayoutPanel para conter quatro botões.

Para adicionar botões

1. Selecione FlowLayoutPanel que você adicionou.Vá para Controles comuns na caixa de ferramentas e clique duas vezes o botão ícone para adicionar um botão chamado button1 para seu FlowLayoutPanel.Repita para adicionar outro botão.O IDE determina que já existe um botão chamado button1 e chama um button2.

   Observação
   No Visual Basic os botões são nomeados com uma inicial maiúscula, então, button1 é Button1, button2 é Button2e assim por diante.

2. Normalmente, você pode adicionar outros botões usando a caixa de ferramentas.Dessa vez, clique em button2e, na Editar menu, clique em Copy (ou pressione Ctrl + C).Sobre o Editar menu, clique em Colar (ou pressione Ctrl + V) para colar uma cópia do seu botão.Agora colá-lo novamente.O IDE agora adicionou button3 e button4.

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

3. Selecione o primeiro botão e defina seu texto propriedade para Exibir uma imagem de.Em seguida, defina a texto propriedades dos próximos três botões para Limpar a imagem, definir a cor de plano de fundo, e Fechar.

4. A próxima etapa é dimensionar os botões e organizá-los para que fiquem alinhados à esquerda do painel.Selecione FlowLayoutPanel e observe seu FlowDirection propriedade.Alterá-la para que ela é definida como RightToLeft.Assim que você fizer isso, os botões devem se alinhem para o lado direito da célula e sua ordem inversa para que o Exibir uma imagem de botão estará na direita.

   Observação
   Se os botões ainda estão na ordem errada, você pode arrastar os botões ao redor de FlowLayoutPanel para reorganizá-los em qualquer ordem.Você pode clicar em um dos botões e arraste-a esquerda ou direita.

5. Clique no Fechar para selecioná-lo.Mantenha pressionada a tecla CTRL e clique em outros três botões, para que eles sejam selecionados.Enquanto todos os botões estiverem selecionados, vá para o Propriedades janela e navegue até o AutoSize propriedade.Esta propriedade instrui o botão seja redimensionada automaticamente para acomodar todos os seu texto.Defina-o como true.Os botões devem agora ser dimensionados corretamente e estar na ordem certa.(Desde que todos os quatro botões estiverem selecionados, você pode alterar todas as quatro AutoSize propriedades ao mesmo tempo.) A figura abaixo mostra os quatro botões.

   Visualizador de imagens com quatro botões

   

6. Agora execute o programa novamente para ver o seu formulário recentemente laid-out.Clicando em botões e a 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 para a etapa anterior do tutorial, consulte Etapa 4: Layout do formulário com um controle TableLayoutPanel.