Affichage d'images : utilisation du contrôle PictureBox

Mise à jour : novembre 2007

Dans cette leçon, vous apprendrez comment utiliser un contrôle PictureBox pour afficher des images, et également comment afficher une image en tant qu'arrière-plan d'un formulaire.

Une image vaut mieux qu'un long discours ; en fait, nombre de programmes utilisent des images pour véhiculer des informations. Il y a plusieurs manières d'afficher des images en Visual Basic ; la plus répandue consiste à utiliser un contrôle PictureBox.

Le contrôle PictureBox agit en tant que conteneur d'images ; vous choisissez l'image à afficher en définissant la propriété Image. La propriété Image peut être définie dans la fenêtre Propriétés. Vous pouvez également écrire le code pour signifier au programme l'image à afficher.

Voici d'autres propriétés utiles du contrôle PictureBox : AutoSize, qui détermine si PictureBox s'étire pour s'adapter à la taille de l'image et la propriété SizeMode, qui s'utilise pour étirer, centrer ou zoomer l'image dans le contrôle PictureBox.

Avant d'ajouter une image à un contrôle PictureBox, vous allez généralement ajouter le fichier image à votre projet en tant que ressource. Une fois qu'une ressource est ajoutée à votre projet, vous pouvez la réutiliser autant de fois que vous le souhaitez ; par exemple, vous pouvez afficher la même image à plusieurs endroits.

Essayez !

Pour ajouter une image en tant que ressource

1. Dans le menu Fichier, cliquez sur Nouveau projet.

2. Dans la boîte de dialogue Nouveau projet, dans le volet Modèles, cliquez sur Application Windows.

3. Dans la zone Nom, tapez Pictures, puis cliquez sur OK.

   Un nouveau projet Windows Forms s'ouvre.

4. Dans la fenêtre Explorateur de solutions, double-cliquez sur le nœud My Project pour ouvrir le Concepteur de projets.

5. Dans le Concepteur de projets, cliquez sur l'onglet Ressources.

6. Cliquez sur Ajouter une ressource, puis sélectionnez Ajouter un fichier existant dans la liste déroulante.

   La boîte de dialogue Ajouter le fichier existant aux ressources s'affiche. Si aucun fichier image ne s'affiche, naviguez jusqu'à un dossier qui contient des images.

7. Sélectionnez un fichier image (avec l'extension .bmp, .gif ou .jpg), puis cliquez sur Ouvrir. Dans cet exemple, il est recommandé de choisir une petite image.

   L'image est ajoutée à votre projet et s'affiche dans la fenêtre Gestionnaire des ressources.

8. Répétez les deux étapes précédentes pour ajouter une deuxième image à votre projet.

9. Dans le menu Fichier, cliquez sur Fermer. Si vous êtes invité à enregistrer des modifications, cliquez sur Oui.

Pour afficher des images à l'aide d'un contrôle PictureBox

1. Dans l'Explorateur de solutions, sélectionnez Form1.vb, puis dans le menu Affichage, cliquez sur Concepteur.

2. À partir de la Boîte à outils, faites glisser un contrôle PictureBox dans le formulaire.

3. Dans la fenêtre Propriétés, cliquez sur le bouton Sélection (…) placé en regard de la propriété Image pour ouvrir la boîte de dialogue Sélectionner une ressource.

4. Dans la liste Entrée, sélectionnez l'une des images que vous avez ajoutées, puis cliquez sur OK.

5. Sélectionnez la propriété SizeMode et affectez-lui la valeur AutoSize.

   Remarquez la manière dont le contrôle PictureBox se redimensionne automatiquement pour s'adapter à l'image.

6. Dans le formulaire, double-cliquez sur le contrôle PictureBox pour ouvrir le gestionnaire d'événements PictureBox1_Click dans l'éditeur de code.

7. Ajoutez le code suivant au gestionnaire d'événements PictureBox1_Click :

   Remarque :
   Vous devez remplacer "MyPictureName2" par le nom réel de la deuxième image ajoutée auparavant.

   PictureBox1.Image = My.Resources.MyPictureName2
   

8. Appuyez sur F5 pour exécuter le programme. Lorsque le formulaire s'affiche, cliquez sur l'image pour en faire la deuxième image à s'afficher.

Affichage d'une image d'arrière-plan sur un formulaire

En plus d'afficher une image dans un contrôle PictureBox, vous pouvez également afficher une image en tant qu'arrière-plan du formulaire. La propriété BackgroundImage d'un formulaire permet d'afficher une image qui apparaît derrière tous autres contrôles sur le formulaire, à la manière d'un papier peint sur le bureau de Windows.

Tout comme Windows vous permet de choisir si le papier peint est centré, en mosaïque, ou étiré pour occuper l'écran, la propriété BackgroundImageLayout permet de faire de même pour un formulaire.

Conseil :
Nombre d'autres contrôles, tels que Panel, GroupBox et même Button, disposent également d'une propriété BackgroundImage. Essayez-les pour voir !

Essayez !

Pour afficher une image d'arrière-plan sur un formulaire

1. Dans l'Explorateur de solutions, sélectionnez Form1.vb, puis dans le menu Affichage, cliquez sur Concepteur.

2. Sélectionnez le formulaire en cliquant hors de PictureBox.

3. Dans la fenêtre Propriétés, cliquez sur le bouton Sélection (…) placé en regard de la propriété BackgroundImage pour ouvrir la boîte de dialogue Sélectionner une ressource.

4. Dans la liste Entrée, sélectionnez l'une des images que vous avez ajoutées auparavant, puis cliquez sur OK.

   Remarquez que l'image s'affiche sur le formulaire derrière le PictureBox et que, par défaut, elle est disposée en mosaïque.

   Remarque :
   Si l'image présente dans le contrôle PictureBox est trop grande, vous pouvez ne pas être en mesure de voir l'image d'arrière-plan. Dans ce cas, sélectionnez le contrôle PictureBox et faites-le glisser jusqu'au bas du formulaire pour l'écarter.

5. Sélectionnez la propriété BackgroundImageLayout et affectez-lui la valeur Stretch.

   Notez la manière dont l'image s'étire pour occuper l'intégralité du formulaire.

6. Double-cliquez sur le formulaire pour ouvrir l'éditeur de code.

7. Assurez-vous que Form1 Événements est bien sélectionné dans la liste déroulante de gauche, puis cliquez sur Click dans celle de droite.

8. Ajouter le code suivant au gestionnaire d'événements Form1_Click

   If Me.BackgroundImageLayout = ImageLayout.Stretch Then
     Me.BackgroundImageLayout = ImageLayout.Center
   Else
     Me.BackgroundImageLayout = ImageLayout.Stretch
   End If
   

9. Appuyez sur F5 pour exécuter le programme. Lorsque le formulaire s'affiche, cliquez dedans pour modifier la disposition.

Étapes suivantes

Dans cette leçon, vous avez appris comment utiliser le contrôle PictureBox pour afficher des images, et comment utiliser la propriété BackgroundImage d'un formulaire. Dans la leçon suivante, vous apprendrez comment créer des menus pour présenter des choix aux utilisateurs.

Leçon suivante : Proposer des choix à l'utilisateur : création de menus au moment du design

Voir aussi

Tâches

Comment : définir l'arrière-plan d'un panneau Windows Forms

Référence

Vue d'ensemble du contrôle PictureBox (Windows Forms)