Tutorial: Adicionar controles ao visualizador de imagens Aplicativo Windows Forms (.NET Framework)

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

Este programa tem uma caixa de imagem, uma caixa de seleção e vários botões, que você usa para controlar o aplicativo. 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 Windows Forms com .NET, siga o tutorial Criar um aplicativo Windows Forms com .NET. Consulte o Guia da Área de Trabalho do no Windows Forms .NET para saber mais.

Pré-requisitos

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

Adicionar controles ao seu aplicativo

O aplicativo Picture Viewer 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 o plano de fundo e para fechar o aplicativo. Você adiciona o PictureBox e uma caixa de seleção da caixa de ferramentas no IDE do Visual Studio.

1. Abra o Visual Studio. Seu projeto do Visualizador de Imagens aparece em Abrirrecente .

2. No Windows Forms Designer, selecione o TableLayoutPanel que você adicionou no tutorial anterior. Verifique se tableLayoutPanel1 aparece na janela de propriedades .

3. No lado esquerdo do IDE do Visual Studio, selecione a guia Caixa de Ferramentas. Se não o vir, selecione Ver>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 controlo PictureBox ao seu formulário. Visual Studio adiciona o controle PictureBox para a primeira célula vazia do TableLayoutPanel.

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

   

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

7. Na janela Properties para PictureBox, defina a propriedade ColumnSpan como 2. O PictureBox agora preenche ambas as colunas.

8. Defina a propriedade BorderStyle como Fixed3D.

9. No Windows Forms Designer, selecione o TableLayoutPanel. Em seguida, na Caixa de Ferramentas, clique duas vezes no item CheckBox para adicionar um novo controlo CheckBox. O seu PictureBox ocupa as duas primeiras células no TableLayoutPanel, portanto, o controlo CheckBox é adicionado à célula inferior esquerda.

10. Escolha a propriedade Text 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 o Toolboxe selecione Containers. Clique duas vezes FlowLayoutPanel para adicionar um novo controle à última célula do TableLayoutPanel.

2. Defina a propriedade Dock do FlowLayoutPanel como Fill. Você pode definir essa propriedade selecionando o triângulo preto e, em seguida, selecionando Dock 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 o Toolbox e selecione Controles comuns. Clique duas vezes no item botão para adicionar um controle de botão chamado botão1.

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

5. Adicione mais dois botões desta forma. Outra opção é selecionar o botão 2. 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 botão4 ao FlowLayoutPanel.

6. Selecione o primeiro botão e defina sua propriedade Text como Mostrar uma imagem.

7. Defina as propriedades de texto dos próximos três botões para Limpar a imagem, Definir a cor de fundoe Fechar.

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

   Os botões devem alinhar-se ao lado direito da célula e inverter a 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 resto 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 são redimensionados para se ajustarem ao texto.

    

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

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, escolha o botão Fechar. Se você ainda tiver todos os botões selecionados, escolha Esc para cancelar a seleção.

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

   

   O IDE não aceita nomes que contenham espaços.

3. Renomeie os outros três botões para backgroundButton, clearButtone showButton. Você pode verificar os nomes escolhendo a lista suspensa do seletor de controlo na janela Propriedades. Os novos nomes de botões 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 plano de fundo usando componentes. Um componente é como um controle. Use o Toolbox para adicionar um componente ao formulário. Você define as 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ê adiciona um componente OpenFileDialog e um componente ColorDialog ao formulário.

1. Selecione o do Windows Forms Designer (Form1.cs [Design]). Em seguida, abra a Caixa de Ferramentas e selecione o grupo Caixas de Diálogo .

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

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

   

4. Escolha o ícone de 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: Selecione um arquivo de imagem.

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

Próximo passo

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