Tutorial: Adicionar controles de interface do usuário ao visualizador de imagens Windows Forms no Visual Studio

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

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 caixa de diálogo

Pré-requisitos

Este tutorial se baseia no tutorial anterior, Criar um aplicativo de visualizador de imagens. Se você ainda não fez esse tutorial, primeiro, confira 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 plano de fundo e fechar o aplicativo. Você adicionará o PictureBox e uma caixa de seleção da Caixa de Ferramentas no Visual Studio IDE.

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

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

  3. No lado esquerdo do IDE Visual Studio, selecione a guia Caixa de Ferramentas. Se você não a vir, 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. Visual Studio IDE adiciona o controle PictureBox à 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.

    A captura de tela mostra a caixa de diálogo Tarefas pictureBox com Dock in Parent Container realçada.

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

  7. Na janela Propriedades da PictureBox, de definido a propriedade ColumnSpan como 2. A PictureBox agora preenche as duas colunas.

  8. De definir a propriedade BorderStyle como Fixed3D.

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

  10. Escolha a propriedade Texto e insira Stretch.

    Captura de tela que mostra o controle de caixa de seleção chamado Stretch.

Adicionar botões em um painel de layout

Os controles até agora foram adicionados ao TableLayoutPanel. Estas etapas mostram como adicionar quatro botões a um novo painel de layout no TableLayoutPanel.

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

  2. De definir a propriedade Dock do FlowLayoutPanel como 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, 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 em Botão novamente para adicionar outro botão. O IDE chama o próximo botão2.

  5. Adicione mais dois botões dessa maneira. Outra opção é selecionar button2 e, em seguida, selecionar Editar > Cópia ou pressionar 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. Observe que o IDE adiciona button3 e button4 ao FlowLayoutPanel.

  6. Selecione o primeiro botão e de definir sua propriedade Texto como Mostrar uma imagem.

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

  8. Para tamanho dos botões e organizá-los, selecione FlowLayoutPanel. De definir a propriedade FlowDirection como RightToLeft.

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

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

  10. Na janela Propriedades, de definir a propriedade AutoSize como True. Os botões são reorganizado para se ajustarem ao texto.

    A captura de tela mostra o formulário visualizador de imagens com quatro botões.

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

Alterar nomes de controle

Há quatro botões no formulário, chamados button1, button2, button3 e 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, Button3 e 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 (Nome). Altere o nome para closeButton.

    A janela Propriedades com nome de 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 nomes dos novos botões aparecem.

Você pode alterar o nome de qualquer controle, como TableLayoutPanel ou caixa de seleção.

Adicionar componentes de caixa de diálogo

Seu aplicativo pode abrir arquivos de imagem e escolher uma cor da tela de fundo usando componentes. Um componente é como um controle. Use a Caixa de Ferramentas para adicionar um componente ao formulário. Você pode definir 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, fornece determinados comportamentos que você pode disparar com código. Por exemplo, é um componente que abre uma caixa de diálogo Abrir Arquivo.

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

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

  2. Clique duas vezes em 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 da Designer de Formulários do Windows como ícones.

    Componentes da caixa de diálogo

  4. Escolha o ícone de OpenFileDialog1 e defina duas propriedades:

    • Defina a propriedade de filtro para o seguinte:

      JPEG Files (*.jpg)|*.jpg|PNG Files (*.png)|*.png|BMP Files (*.bmp)|*.bmp|All files (*.*)|*.*
      
    • Defina a propriedade Título como o seguinte: Selecionar um arquivo de imagem

    As configurações de propriedade de filtro especificam os tipos que a caixa de diálogo selecionar uma imagem exibe.

Próximas etapas

Avance para o próximo tutorial para aprender a adicionar código ao seu aplicativo.