Tutoriel : Ajouter du code à l’application Windows Forms de visionneuse d’images (.NET Framework)

2025-08-07

Dans cette série de trois didacticiels, vous créez une application Windows Forms qui charge une image et l’affiche. Visual Studio Integrated Design Environment (IDE) fournit les outils dont vous avez besoin pour créer l’application.

Les contrôles utilisent du code C# ou Visual Basic pour effectuer les actions associées.

Dans ce troisième tutoriel, vous allez apprendre à :

Ajouter des gestionnaires d’événements pour vos contrôles
Écrire du code pour ouvrir une boîte de dialogue
Écrire du code pour les autres contrôles
Exécuter votre application

Pour créer une application Windows Forms avec .NET, suivez le tutoriel Créer une application Windows Forms avec .NET. Pour en savoir plus, consultez le guide Desktop sur Windows Forms .NET.

Conditions préalables

Ce didacticiel s’appuie sur les didacticiels précédents, Créer une application visionneuse d’images et Ajouter des contrôles d’interface utilisateur à la visionneuse d’images. Effectuez-les tout d’abord et commencez par le projet que vous avez créé pour ces didacticiels.

Ajouter des gestionnaires d’événements pour vos contrôles

Dans cette section, ajoutez des gestionnaires d’événements pour les contrôles que vous avez ajoutés dans le deuxième didacticiel, Ajouter des contrôles à une application de visionneuse d’images. Votre application appelle un gestionnaire d’événements lorsqu’une action a lieu, par exemple en sélectionnant un bouton.

Ouvrez Visual Studio. Votre projet Visionneuse d’images s’affiche sous Ouvrir récent.
Dans le Designer Windows Forms, double-cliquez sur le bouton Afficher une image. À la place, vous pouvez sélectionner le bouton Afficher une image dans le formulaire, puis appuyer sur Entrée.

L’IDE Visual Studio ouvre un onglet dans la fenêtre principale. Pour C#, l’onglet est nommé Form1.cs. Si vous utilisez Visual Basic, l’onglet est nommé Form1.vb.

Cet onglet affiche le fichier de code derrière le formulaire.

Remarque

Votre onglet Form1.vb peut afficher showButton comme ShowButton.

Concentrez-vous sur cette partie du code.

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

Private Sub showButton_Click() Handles showButton.Click

End Sub

Choisissez à nouveau l’onglet Concepteur Windows Forms, puis double-cliquez sur le bouton Effacer l’image pour ouvrir son code. Répétez l'action pour les deux boutons restants. Chaque fois, l’IDE Visual Studio ajoute une nouvelle méthode au fichier de code du formulaire.

Double-cliquez sur le contrôle CheckBox dans Concepteur Windows Forms pour ajouter une méthode checkBox1_CheckedChanged(). Lorsque vous activez ou désactivez la case à cocher, elle appelle cette méthode.

L’extrait de code suivant montre le nouveau code que vous voyez dans l’éditeur de code.

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)
{
}

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

Les méthodes, y compris les gestionnaires d’événements, peuvent avoir n’importe quel nom souhaité. Lorsque vous ajoutez un gestionnaire d’événements avec l’IDE, il crée un nom en fonction du nom du contrôle et de l’événement géré.

Par exemple, l’événement Click d’un bouton nommé showButton est appelé showButton_Click() ou ShowButton_Click(). Si vous souhaitez modifier un nom de variable de code, cliquez avec le bouton droit sur la variable dans le code, puis choisissez Refactoriser>Renommer. Cette action renomme toutes les instances de cette variable dans le code. Pour plus d’informations, consultez Renommer la refactorisation.

Écrire du code pour ouvrir une boîte de dialogue

Le bouton Afficher une image utilise le composant OpenFileDialog pour afficher un fichier image. Cette procédure ajoute le code utilisé pour appeler ce composant.

L’IDE Visual Studio offre un outil puissant appelé IntelliSense. Lorsque vous tapez, IntelliSense suggère du code possible.

Dans Windows Forms Designer, double-cliquez sur le bouton Afficher une image. L’IDE déplace votre curseur à l’intérieur de la méthode showButton_Click() ou ShowButton_Click().
Tapez un i sur la ligne vierge entre les deux accolades { }ou entre Private Sub... et End Sub. Une fenêtre IntelliSense s’ouvre.
La fenêtre IntelliSense doit mettre en surbrillance le mot if. Sélectionnez la touche Tab, deux fois, pour insérer l’extrait de code if.
Sélectionnez true, puis tapez op pour le remplacer pour C# ou Op pour Visual Basic.

IntelliSense affiche openFileDialog1.
Sélectionnez l'onglet pour ajouter openFileDialog1.
Tapez un point (.) ou un point, juste après openFileDialog1. IntelliSense fournit toutes les propriétés et méthodes du composant OpenFileDialog. Commencez à taper ShowDialog et sélectionnez l'onglet . La méthode ShowDialog() affiche la boîte de dialogue Ouvrir un fichier.
Ajoutez des parenthèses () immédiatement après le « g » dans ShowDialog. Votre code doit être openFileDialog1.ShowDialog().
Pour C#, ajoutez un espace, puis ajoutez deux signes égaux (==). Pour Visual Basic, ajoutez un espace, puis utilisez un signe égal unique (=).
Ajoutez un autre espace. Utilisez IntelliSense pour entrer DialogResult.
Tapez un point pour ouvrir la fenêtre IntelliSense de la valeur DialogResult. Tapez la lettre O et appuyez sur la touche Tab pour insérer OK.

Remarque

La première ligne de code doit être terminée. Pour C#, il doit être similaire à ce qui suit.

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

Pour Visual Basic, il doit s’agir des éléments suivants.

If OpenFileDialog1.ShowDialog() = DialogResult.OK Then

Ajoutez la ligne de code suivante.

pictureBox1.Load(openFileDialog1.FileName);

PictureBox1.Load(OpenFileDialog1.FileName)

Vous pouvez copier et coller ou utiliser IntelliSense pour l’ajouter. Votre méthode de showButton_Click() finale doit ressembler au code suivant.

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

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

End Sub

Ajoutez le commentaire suivant à votre code.

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);
    }
}

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

Il est recommandé de toujours commenter votre code. Les commentaires de code facilitent la compréhension et la maintenance de votre code à l’avenir.

Écrire du code pour les autres contrôles

Si vous exécutez votre application maintenant, vous pouvez sélectionner Afficher une image. L’Observateur d’images ouvre la boîte de dialogue Ouvrir un fichier, où vous pouvez sélectionner une image à afficher.

Dans cette section, ajoutez le code pour les autres gestionnaires d’événements.

Dans le Concepteur Windows Forms, double-cliquez sur le bouton Effacer l’image. Pour C#, ajoutez le code dans les accolades. Pour Visual Basic, ajoutez le code entre Private Sub et End Sub.

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

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

Double-cliquez sur le bouton « Définir la couleur d'arrière-plan et ajoutez le code.

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;
}

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

Double-cliquez sur le bouton Fermer et ajoutez le code.

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

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

Double-cliquez sur la case Stretch et ajoutez le code.

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;
}

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

Exécuter votre application

Vous pouvez exécuter votre application à tout moment pendant que vous l’écrivez. Une fois que vous avez ajouté le code dans la section précédente, la Visionneuse d’images est terminée. Comme dans les didacticiels précédents, utilisez l’une des méthodes suivantes pour exécuter votre application :

Sélectionnez la touche F5.
Dans la barre de menus, sélectionnez Débogage>Démarrer le débogage.
Dans la barre d’outils, sélectionnez le bouton Démarrer.

Une fenêtre avec le titre Visionneuse d’images s’affiche. Testez tous les contrôles.

Sélectionnez le bouton Définir la couleur d’arrière-plan. La boîte de dialogue Couleur s’ouvre.
Choisissez une couleur pour définir la couleur d’arrière-plan.
Sélectionnez Afficher une image pour afficher une image.
Sélectionnez et désélectionnez Stretch.
Choisissez le bouton Effacer l’image pour vous assurer que l’affichage s’efface.
Sélectionnez Fermer pour quitter l’application.