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

nesta série de três tutoriais, você criará um aplicativo Windows Forms que carrega uma imagem e a exibe. o ambiente de Design integrado do Visual Studio (IDE) fornece as ferramentas necessárias para criar o aplicativo. para saber mais, consulte bem-vindo ao Visual Studio IDE.

Este programa tem uma caixa de imagem, uma CheckBox 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, crie um aplicativo visualizador de imagens. Se você ainda não fez esse tutorial, passe pelo primeiro.

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 o plano de fundo e fechar o aplicativo. você adicionará a PictureBox e uma checkbox da caixa de ferramentas no Visual Studio IDE.

  1. Abra o Visual Studio. Seu projeto do Visualizador de imagens aparece em abrir recente.

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

  3. no lado esquerdo do Visual Studio IDE, selecione a guia caixa de ferramentas . Se você não o 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.

    Captura de tela mostra a caixa de diálogo tarefas PictureBox com encaixe no contêiner pai realçado.

  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, defina a propriedade ColumnSpan como 2. O PictureBox agora preenche ambas as colunas.

  8. Defina a propriedade BorderStyle como Fixed3D.

  9. na Designer de Formulários do Windows, selecione TableLayoutPanel. Em seguida, na caixa de ferramentas, clique duas vezes no item de caixa de seleção para adicionar um novo controle de caixa de seleção. Sua PictureBox ocupa as duas primeiras células no TableLayoutPanel, portanto, o controle CheckBox é adicionado à célula inferior esquerda.

  10. Escolha a propriedade texto e digite Stretch.

    Captura de tela 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 o TableLayoutPanel no formulário. Abra a caixa de ferramentas, selecione contêineres. Clique duas vezes em 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 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 de botão para adicionar um controle de botão chamado Button1.

  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 dessa maneira. Outra opção é selecionar Button2 e, em seguida, selecionar Editar > copiar 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 defina sua propriedade Text para mostrar uma imagem.

  7. Defina as propriedades de texto dos próximos três botões para limpar a imagem, definir a cor do plano 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 a ordem para que o botão mostrar uma imagem esteja à direita. Você pode arrastar os botões em volta do 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-as também.

  10. Na janela Propriedades , defina a propriedade AutoSize como true. Os botões são redimensionados para se ajustarem ao texto.

    Captura de tela mostra o formulário do Visualizador de imagens com quatro botões.

Você pode executar o 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 não fazem nada, ainda.

Alterar nomes de controle

Há quatro botões em seu formulário, chamados Button1, Button2, button3 e Button4 em C#. no Visual Basic, a primeira letra padrão de qualquer nome de controle é capitalizada, de modo que os botões são nomeados Button1, Button2, Button3 e Button4. Use estas etapas para fornecer 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 botãoFechar.

    A janela Propriedades com nome de closeButton

    O IDE não aceita nomes que contenham 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 o TableLayoutPanel ou a caixa de seleção.

Adicionar componentes de caixa 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. Você usa 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, a adição de 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 ColorDialog componente ao seu formulário.

  1. selecione o Designer de Formulários do Windows (Form1. cs [Design]). Em seguida, abra a caixa de ferramentas e selecione o grupo de caixas de diálogo .

  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.