Tutorial: adicionar controles ao aplicativo Windows Forms do visualizador de imagens (.NET Framework)

Nesta série de três tutoriais, você cria um aplicativo do Windows Forms que carrega uma imagem e a exibe. O IDE (Ambiente de Design Integrado) do Visual Studio fornece as ferramentas necessárias para criar o aplicativo.

Este programa tem uma picture box, uma caixa de seleção e vários botões, que você usa para controlar a aplicação. Este tutorial mostra como adicionar esses controles.

Neste segundo tutorial, você aprenderá a:

• Adicionar controles ao seu aplicativo
• Adicionar botões em um painel de layout
• Alterar nomes e locais de controle
• Adicionar componentes de diálogo

Para criar um novo aplicativo do Windows Forms com o .NET, siga o tutorial Criar um aplicativo do Windows Forms com o .NET. Consulte o Guia de Desktop do Windows Forms .NET para saber mais.

Pré-requisitos

• Este tutorial se baseia no tutorial anterior, Criar um aplicativo do visualizador de imagens. Conclua esse primeiro e comece com o projeto que você criou para esse tutorial.

Adicionar controles ao seu aplicativo

O aplicativo Visualizador de Imagens usa um controle PictureBox para exibir uma imagem. Ele usa uma caixa de seleção e vários botões para gerenciar a imagem e a tela de fundo e fechar o aplicativo. Você adicionará a PictureBox e uma caixa de seleção da Caixa de Ferramentas no IDE do Visual Studio.

1. Abra o Visual Studio. Seu projeto visualizador de imagens aparece em Abrir recente.

2. No Designer de Formulários do Windows , selecione o TableLayoutPanelque você adicionou no tutorial anterior. Verifique se tableLayoutPanel1 aparece na janela Propriedades.

3. No lado esquerdo do IDE do Visual Studio, selecione a guia Caixa de Ferramentas. Se não aparecer, selecione Exibir>Caixa de Ferramentas na barra de menus ou Ctrl+Alt+X. Na caixa de ferramentas, expanda Controles Comuns.

4. Clique duas vezes em PictureBox para adicionar um controle PictureBox ao formulário. O Visual Studio adiciona o controle PictureBox à primeira célula vazia do TableLayoutPanel.

5. Escolha o novo controle PictureBox para selecioná-lo e selecione o triângulo preto no novo controle PictureBox para exibir sua lista de tarefas.

   

6. Selecione Encaixar no Contêiner Pai, que define a propriedade PictureBox Dock como Fill. Você pode ver esse valor na janela de Propriedades .

7. Na janela Propriedades da PictureBox, defina a propriedade ColumnSpan como 2. A PictureBox agora preenche ambas as colunas.

8. Defina a propriedade BorderStyle como Fixed3D.

9. No Designer de Formulários do Windows, selecione o TableLayoutPanel. Em seguida, na Caixa de Ferramentas, clique duas vezes no item CheckBox para adicionar um novo controle CheckBox. Sua PictureBox ocupa as duas primeiras células no TableLayoutPanel, de modo que o controle CheckBox é adicionado à célula inferior esquerda.

10. Escolha a propriedade Texto e insira Stretch.

    

Adicionar botões em um painel de layout

Até agora, você adicionou controles ao TableLayoutPanel. Estas etapas mostram como adicionar quatro botões a um novo painel de layout no TableLayoutPanel.

1. Selecione o TableLayoutPanel no formulário. Abra a Caixa de Ferramentas e selecione Contêineres. Clique duas vezes FlowLayoutPanel para adicionar um novo controle à última célula do TableLayoutPanel.

2. Defina a propriedade Dock do FlowLayoutPanel para Fill. Você pode definir essa propriedade selecionando o triângulo preto e, em seguida, selecionando Encaixar no contêiner pai.

   Um FlowLayoutPanel é um contêiner que organiza outros controles em uma linha, um após o outro.

3. Selecione o novo FlowLayoutPanel e, em seguida, abra a caixa de ferramentas e selecione Controles Comuns. Clique duas vezes no item Botão para adicionar um controle de botão chamado button1.

4. Clique duas vezes no Botão novamente para adicionar um outro botão. O IDE chama o próximo de button2.

5. Adicione mais dois botões dessa forma. Outra opção é selecionar button2. Em seguida, selecione Editar>Copiar ou Ctrl+C. Em seguida, escolha Editar>Colar na barra de menus ou pressione Ctrl+V para colar uma cópia do botão. Agora cole-o novamente. O IDE adiciona botão3 e button4 ao FlowLayoutPanel.

6. Selecione o primeiro botão e defina sua propriedade Text como Show a picture.

7. Defina as propriedades Text dos próximos três botões como Limpar a imagem, Definir a cor da tela de fundo e Fechar.

8. Para dimensionar os botões e organizá-los, selecione o FlowLayoutPanel. Defina a propriedade FlowDirection como RightToLeft.

   Os botões devem se alinhar ao lado direito da célula e reverter sua ordem para que o botão Mostrar uma imagem esteja à direita da célula. Você pode arrastar os botões ao redor do FlowLayoutPanel para organizá-los em qualquer ordem.

9. Escolha o botão Fechar para selecioná-lo. Em seguida, para selecionar o restante dos botões ao mesmo tempo, pressione e segure a tecla Ctrl e escolha-os também.

10. Na janela Propriedades, defina a propriedade AutoSize como True. Os botões se redimensionam para ajustar o texto.

    

Você pode executar seu programa para ver a aparência dos controles. Selecione a tecla F5, selecione Depurar>Iniciar Depuraçãoou selecione o botão Iniciar. Os botões adicionados ainda não fazem nada.

Alterar nomes de controle

Há quatro botões em seu formulário, chamados button1, button2, button3e button4 em C#. No Visual Basic, a primeira letra padrão de qualquer nome de controle é maiúscula, portanto, os botões são nomeados Button1, Button2, Button3e Button4. Use estas etapas para dar a eles nomes mais informativos.

1. No formulário, clique no botão Fechar. Se você ainda tiver todos os botões selecionados, escolha Esc para cancelar a seleção.

2. Na janela Propriedades, procure por (Name). Altere o nome para closeButton.

   

   O IDE não aceita nomes que contêm espaços.

3. Renomeie os outros três botões para backgroundButton , clearButton , e showButton . Você pode verificar os nomes escolhendo a lista suspensa seletora de controle na janela Propriedades. Os novos nomes de botão são exibidos.

Você pode alterar o nome de qualquer controle, como TableLayoutPanel ou CheckBox.

Adicionar componentes de diálogo

Seu aplicativo pode abrir arquivos de imagem e escolher uma cor de tela de fundo usando componentes. Um componente é como um controle. Use a caixa de ferramentas para adicionar um componente ao formulário. Você define suas propriedades usando a janela Propriedades.

Ao contrário de um controle, adicionar um componente ao formulário não adiciona um item visível. Em vez disso, ele fornece certos comportamentos que você pode acionar com código. Por exemplo, é um componente que abre uma caixa de diálogo Abrir Arquivo.

Nesta seção, você adicionará um componente OpenFileDialog e um componente ColorDialog ao formulário.

1. Selecione oDesigner de Formulários do Windows (Form1.cs [Design]). Em seguida, abra o Toolbox e selecione o grupo de diálogos .

2. Clique duas vezes em OpenFileDialog para adicionar um componente chamado openFileDialog1 ao seu formulário.

3. Clique duas vezes em ColorDialog para adicionar um componente chamado colorDialog1. Os componentes aparecem na parte inferior do Designer de Formulários do Windows como ícones.

   

4. Escolha o ícone openFileDialog1 e defina duas propriedades:

   • Defina a propriedade Filter com o seguinte valor:

     JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
     

   • Defina a propriedade Title com o seguinte valor: Selecionar um arquivo de imagem.

   As configurações da propriedade Filtro especificam os tipos de arquivo que a caixa de diálogo do arquivo Selecionar uma imagem exibe.

Próxima etapa

Avance para o próximo tutorial para saber como adicionar código ao seu aplicativo.

Tutorial parte 3: Adicionar código ao seu visualizador de imagens