Tutorial: Adicionar código ao aplicativo de Visualizador de Imagens do Windows Forms (.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.

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
• Executar seu aplicativo

Para criar um novo aplicativo do Windows Forms com o .NET, siga o tutorial Criar um aplicativo do Windows Forms com o .NET. Confira o Guia da área de trabalho no .NET do Windows Forms para saber mais.

Pré-requisitos

• Este tutorial se baseia nos tutoriais anteriores, Criar um aplicativo do 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 adicionados no segundo tutorial, Adicionar controles a um aplicativo de visualização 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 visualizador de imagens aparece em Abrir recente.

2. No Designer de Formulários do Windows , 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 é nomeada Form1.cs. Se você estiver usando o Visual Basic, a guia será nomeada Form1.vb.

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

   

   Nota

   Sua 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. Escolha a guia Designer de Formulários do Windows novamente e clique duas vezes no botão Limpar a imagem para abrir o código dela. Repita isso 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 Designer de Formulários do Windows para adicionar um método checkBox1_CheckedChanged(). Quando você seleciona ou desmarca a caixa de seleção, ela chama esse método.

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

   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 tratado.

Por exemplo, o evento Click para um botão chamado showButton é chamado showButton_Click() ou ShowButton_Click(). Se você quiser alterar um nome de 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, confira Refatoração de renomeaçã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. Conforme você digita, o IntelliSense sugere um código possível.

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

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

   

3. A janela do IntelliSense deve estar realçando a palavra if. Selecione a tecla Tab duas vezes para inserir o snippet de código if.

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

   

   O IntelliSense exibe openFileDialog1.

5. Selecione a aba para adicionar openFileDialog1.

6. Digite um ponto final (.) ou ponto, logo após openFileDialog1. O IntelliSense fornece todas as propriedades e métodos do componente OpenFileDialog. 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 adicione dois sinais de igual (==). Para o Visual Basic, adicione um espaço e 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 do IntelliSense. Insira a letra O e pressione a tecla da guia para inserir OK.

    Nota

    A primeira linha de código deve ser concluída. Para C#, ele deve ser semelhante ao seguinte.

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

    Para o 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 comentário a seguir 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 código no futuro.

Escrever código para os outros controles

Se você executar seu aplicativo agora, poderá selecionar Mostrar uma imagem. O Visualizador de Imagens abre a caixa de diálogo Abrir Arquivo, na qual você pode selecionar uma imagem a ser exibida.

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

1. No Designer de Formulários do Windows, clique duas vezes no botão Limpar a imagem. Para C#, adicione o código entre chaves. Para o 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 da tela 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   
   

Executar seu aplicativo

Você pode executar seu aplicativo a qualquer momento enquanto o está escrevendo. 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 chave F5.
• Na barra de menus, selecione Depurar>Iniciar depuração.
• Na barra de ferramentas, selecione o botão Iniciar.

Uma janela com o título Visualizador de Imagens é exibida. Teste todos os controles.

1. Selecione o botão Definir a cor da tela de fundo. A caixa de diálogo Cor é aberta.

   

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

3. Selecione Mostrar uma imagem para exibir uma imagem.

   

4. Selecione e deselecione Stretch.

5. Selecione o botão Limpar a imagem para garantir que a exibição seja limpa.

6. Selecione Fechar para sair do aplicativo.

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

• Criou um projeto do Visual Studio que usa o Windows Forms
• Layout adicionado para o aplicativo de exibição de imagem
• Botões adicionados e uma caixa de seleção
• Caixas de diálogo adicionadas
• Adicionou manipuladores de eventos para seus controles
• Código C# ou Visual Basic gravado para lidar com os eventos

Próxima etapa

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

Tutorial 2: Criar um teste de matemática cronometrado