Tutorial: Adicionar código 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.

Os controles usam código C# ou Visual Basic para executar as ações associadas a eles.

Neste terceiro tutorial, você aprenderá a:

• Adicionar manipuladores de eventos para seus controles
• Escrever código para abrir uma caixa de diálogo
• Escrever código para os outros controles
• Execute seu aplicativo

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 nos tutoriais anteriores, Criar um aplicativo de visualizador de imagens e Adicionar controles de interface do usuário ao visualizador de imagens. Conclua-os primeiro e comece com o projeto que você criou para esses tutoriais.

Adicionar manipuladores de eventos para seus controles

Nesta seção, adicione manipuladores de eventos para os controles que você adicionou no segundo tutorial, Adicionar controles a um aplicativo visualizador de imagens. Seu aplicativo chama um manipulador de eventos quando uma ação ocorre, como selecionar um botão.

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

2. No Windows Forms Designer, clique duas vezes no botão Mostrar uma imagem . Em vez disso, você pode selecionar o botão Mostrar uma imagem no formulário e pressionar Enter.

   O IDE do Visual Studio abre uma guia na janela principal. Para C#, a guia é chamada Form1.cs. Se você estiver usando o Visual Basic, a guia será chamada Form1.vb.

   Esta guia exibe o arquivo de código por trás do formulário.

   

   Observação

   A guia Form1.vb pode exibir showButton como ShowButton.

3. Concentre-se nesta parte do código.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
   End Sub
   

4. Selecione novamente a aba Windows Forms Designer e, em seguida, clique duas vezes no botão Limpar a imagem para abrir o seu código. Repita para os dois botões restantes. Cada vez, o IDE do Visual Studio adiciona um novo método ao arquivo de código do formulário.

5. Clique duas vezes no controle CheckBox no Windows Forms Designer para adicionar um método checkBox1_CheckedChanged(). Quando você marca ou desmarca a caixa de seleção, ela chama esse método.

   O trecho a seguir mostra o novo código que você vê no editor de códigos.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
   }
   
   private void backgroundButton_Click(object sender, EventArgs e)
   {
   }
   
   private void closeButton_Click(object sender, EventArgs e)
   {
   }
   
   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
   
   End Sub
   
   Private Sub backgroundButton_Click() Handles backgroundButton.Click
   
   End Sub
   
   Private Sub closeButton_Click() Handles closeButton.Click
   
   End Sub
   
   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
   
   End Sub
   

---

Os métodos, incluindo manipuladores de eventos, podem ter qualquer nome desejado. Quando você adiciona um manipulador de eventos com o IDE, ele cria um nome com base no nome do controle e no evento que está sendo manipulado.

Por exemplo, o evento Click para um botão chamado showButton é chamado showButton_Click() ou ShowButton_Click(). Se desejar alterar o nome de uma variável de código, clique com o botão direito do mouse na variável no código e escolha Refatorar>Renomear. Essa ação renomeia todas as instâncias dessa variável no código. Para obter mais informações, consulte Renomear refatoração.

Escrever código para abrir uma caixa de diálogo

O botão Mostrar uma imagem usa o componente OpenFileDialog para exibir um arquivo de imagem. Este procedimento adiciona o código usado para chamar esse componente.

O IDE do Visual Studio oferece uma ferramenta poderosa chamada IntelliSense. À medida que você digita, o IntelliSense sugere um código possível.

1. No Windows Forms Designer, clique duas vezes no botão Mostrar uma imagem. O IDE move o cursor dentro do método showButton_Click() ou ShowButton_Click().

2. Escreva um i na linha vazia entre as duas chaves { }ou entre Private Sub... e End Sub. Uma janela IntelliSense é aberta.

   

3. A janela IntelliSense deve realçar a palavra if. Selecione a tecla Tab duas vezes para inserir o if trecho.

4. Selecione true e digite op para substituí-lo por C# ou Op por Visual Basic.

   

   O IntelliSense exibe openFileDialog1.

5. Selecione Tab para adicionar openFileDialog1.

6. Digite um ponto (.) ou ponto, logo após openFileDialog1. O IntelliSense fornece todas as propriedades e métodos do OpenFileDialog componente. Comece a digitar ShowDialog e selecione Tab. O método ShowDialog() mostra a caixa de diálogo Abrir Arquivo.

7. Adicione parênteses () imediatamente após o "g" em ShowDialog. Seu código deve ser openFileDialog1.ShowDialog().

8. Para C#, adicione um espaço e, em seguida, adicione dois sinais de igual (==). Para Visual Basic, adicione um espaço e, em seguida, use um único sinal de igual (=).

9. Adicione outro espaço. Use o IntelliSense para inserir DialogResult.

10. Digite um ponto para abrir o valor DialogResult na janela IntelliSense. Digite a letra O e escolha a tecla Tab para inserir OK.

    Observação

    A primeira linha de código deve estar completa. Para C#, deve ser semelhante ao seguinte.

    if (openFileDialog1.ShowDialog() == DialogResult.OK)

    Para Visual Basic, deve ser o seguinte.

    If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

11. Adicione a seguinte linha de código.

    C#

    pictureBox1.Load(openFileDialog1.FileName);  
    

    VB

    PictureBox1.Load(OpenFileDialog1.FileName)
    

    Você pode copiar e colar ou usar o IntelliSense para adicioná-lo. Seu método de showButton_Click() final deve ser semelhante ao código a seguir.

    C#

    private void showButton_Click(object sender, EventArgs e)
    {
        if (openFileDialog1.ShowDialog() == DialogResult.OK)
        {
            pictureBox1.Load(openFileDialog1.FileName);  
        }
    }
    

    VB

    Private Sub showButton_Click() Handles showButton.Click
        If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
            PictureBox1.Load(OpenFileDialog1.FileName)
        End If
    
    End Sub
    

---

1. Adicione o seguinte comentário ao seu código.

   C#

   private void showButton_Click(object sender, EventArgs e)
   {
       // Show the Open File dialog. If the user clicks OK, load the
       // picture that the user chose.
       if (openFileDialog1.ShowDialog() == DialogResult.OK)
       {
           pictureBox1.Load(openFileDialog1.FileName);
       }
   }
   

   VB

   Private Sub showButton_Click() Handles showButton.Click
   
       ' Show the Open File dialog. If the user clicks OK, load the
       ' picture that the user chose.
       If OpenFileDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.Load(OpenFileDialog1.FileName)
       End If
   
   End Sub
   

---

É a melhor prática sempre comentar seu código. Os comentários de código facilitam a compreensão e a manutenção do seu código no futuro.

Escrever código para os outros controles

Se você executar seu aplicativo agora, você pode selecionar Mostrar uma imagem. O Visualizador de Imagens abre a caixa de diálogo Abrir Ficheiro, onde pode selecionar uma imagem para apresentar.

Nesta seção, adicione o código para os outros manipuladores de eventos.

1. No Windows Forms Designer, clique duas vezes no botão Limpar a imagem. Para C#, adicione o código em chaves. Para Visual Basic, adicione o código entre Private Sub e End Sub.

   C#

   private void clearButton_Click(object sender, EventArgs e)
   {
       // Clear the picture.
       pictureBox1.Image = null;
   }
   

   VB

   Private Sub clearButton_Click() Handles clearButton.Click
       ' Clear the picture.
       PictureBox1.Image = Nothing
   End Sub   
   

2. Clique duas vezes no botão Definir a cor do plano de fundo e adicione o código.

   C#

   private void backgroundButton_Click(object sender, EventArgs e)
   {
       // Show the color dialog box. If the user clicks OK, change the
       // PictureBox control's background to the color the user chose.
       if (colorDialog1.ShowDialog() == DialogResult.OK)
           pictureBox1.BackColor = colorDialog1.Color;
   }
   

   VB

   Private Sub backgroundButton_Click() Handles backgroundButton.Click
       ' Show the color dialog box. If the user clicks OK, change the
       ' PictureBox control's background to the color the user chose.
       If ColorDialog1.ShowDialog() = DialogResult.OK Then
           PictureBox1.BackColor = ColorDialog1.Color
       End If
   End Sub
   

3. Clique duas vezes no botão Fechar e adicione o código.

   C#

   private void closeButton_Click(object sender, EventArgs e)
   {
       // Close the form.
       this.Close();
   }
   
   

   VB

   Private Sub closeButton_Click() Handles closeButton.Click
       ' Close the form.
       Close()
   End Sub  
   

4. Clique duas vezes na caixa de seleção Stretch e adicione o código.

   C#

   private void checkBox1_CheckedChanged(object sender, EventArgs e)
   {
       // If the user selects the Stretch check box, 
       // change the PictureBox's
       // SizeMode property to "Stretch". If the user clears 
       // the check box, change it to "Normal".
       if (checkBox1.Checked)
           pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
       else
           pictureBox1.SizeMode = PictureBoxSizeMode.Normal;
   }
   

   VB

   Private Sub CheckBox1_CheckedChanged() Handles CheckBox1.CheckedChanged
       ' If the user selects the Stretch check box, change 
       ' the PictureBox's SizeMode property to "Stretch". If the user 
       ' clears the check box, change it to "Normal".
       If CheckBox1.Checked Then
           PictureBox1.SizeMode = PictureBoxSizeMode.StretchImage
       Else
           PictureBox1.SizeMode = PictureBoxSizeMode.Normal
       End If
   End Sub   
   

Execute seu aplicativo

Você pode executar seu aplicativo a qualquer momento enquanto o escreve. Depois de adicionar o código na seção anterior, o Visualizador de imagens será concluído. Como nos tutoriais anteriores, use um dos seguintes métodos para executar seu aplicativo:

• Selecione a tecla F5.
• Na barra de menus, selecione Depurar>Iniciar Depuração.
• Na barra de ferramentas, selecione o botão Start.

É apresentada uma janela com o título Visualizador de Imagens. Teste todos os controles.

1. Selecione o botão para definir a cor do plano de fundo. A caixa de diálogo Color é aberta.

   

2. Escolha uma cor para definir a cor de fundo.

3. Selecione Mostrar uma imagem para exibir uma imagem.

   

4. Selecione e deselecione Esticar.

5. Selecione o botão Limpar a imagem para garantir que o ecrã é limpo.

6. Selecione Fechar para sair do aplicativo.

Parabéns;! Você concluiu esta série de tutoriais. Você realizou estas tarefas de programação e design no IDE do Visual Studio:

• Criado um projeto do Visual Studio que usa o Windows Forms
• Layout adicionado para o aplicativo de visualização de imagens
• Botões adicionados e uma caixa de seleção
• Caixas de diálogo adicionadas
• Manipuladores de eventos foram adicionados para os seus controles
• Código escrito em C# ou Visual Basic para manipular os eventos

Próximo passo

Continue aprendendo com outra série de tutoriais sobre como criar um questionário de matemática cronometrado.

Tutorial 2: Criar um teste de matemática cronometrado