Étape 5 : ajouter des contrôles à votre formulaire

Dans cette étape, vous ajoutez des contrôles à votre formulaire (notamment des contrôles PictureBox et CheckBox).Vous ajoutez ensuite des boutons à votre formulaire.

Pour obtenir une version vidéo de cette rubrique, consultez Tutorial 1: Create a Picture Viewer in Visual Basic - Video 2 ou Tutorial 1: Create a Picture Viewer in C# - Video 2.

Pour ajouter des contrôles à votre formulaire

1. Ouvrez la Boîte à outils et développez le groupe Contrôles communs.Il affiche les principaux contrôles que vous apercevez dans les formulaires.

2. Double-cliquez sur le contrôle PictureBox.L'IDE ajoute un contrôle PictureBox à votre formulaire.Étant donné que le TableLayoutPanel est ancré pour remplir votre formulaire, l'IDE ajoute le contrôle PictureBox à la première cellule vide.

3. Cliquez sur le triangle noir du nouveau contrôle PictureBox pour afficher sa liste des tâches, comme indiqué dans l'image suivante.

   Tâches PictureBox

   

   [!REMARQUE]

   Si vous ajoutez par erreur un type de contrôle incorrect à votre TableLayoutPanel, vous pouvez le supprimer.Cliquez avec le bouton droit sur le contrôle, puis cliquez sur Supprimer dans le menu.Vous pouvez également sélectionner Annuler dans le menu Edition pour supprimer des contrôles du formulaire.

4. Cliquez sur le lien Ancrer dans le conteneur parent.La valeur Fill est alors affectée automatiquement à la propriété Dock de PictureBox.Pour vous en assurer, cliquez sur le contrôle PictureBox pour le sélectionner, ouvrez la fenêtre Propriétés et vérifiez que la valeur Fill est bien affectée à la propriété Dock.

5. Modifiez la propriété ColumnSpan du PictureBox pour qu'il s'étende sur deux colonnes.Sélectionnez le contrôle PictureBox et affectez la valeur 2 à sa propriété ColumnSpan.Vous voulez également que le PictureBox affiche un cadre vide lorsqu'il ne contient aucun élément.Affectez la valeur Fixed3D à sa propriété BorderStyle.

6. Ajoutez le contrôle CheckBox au formulaire.Double-cliquez sur l'élément CheckBox dans la Boîte à outils pour demander à l'IDE d'ajouter un nouveau contrôle CheckBox à la cellule libre suivante de votre tableau.Étant donné que le PictureBox occupe les deux premières cellules, le contrôle CheckBox est ajouté à la cellule en bas à gauche.Sélectionnez le nouveau contrôle CheckBox et affectez la valeur Étendre à sa propriété Text, comme indiqué dans l'image suivante.

   Contrôle TextBox avec la propriété Étendre

   

7. Ouvrez le groupe Conteneurs dans la Boîte à outils (où vous avez obtenu votre contrôle TableLayoutPanel ) et double-cliquez sur l'élément FlowLayoutPanel pour ajouter un nouveau contrôle à la dernière cellule du PictureBox.Ensuite, ancrez-le dans le conteneur parent (en séléctionnant Ancrer dans le conteneur parent dans la liste des tâches, ou en affectant la valeur Fill à sa propriété Dock).

   [!REMARQUE]

   Un FlowLayoutPanel est un conteneur qui classe, dans l'ordre, d'autres contrôles au sein de lignes structurées.Lorsque vous redimensionnez un FlowLayoutPanel, il dispose tous ses contrôles sur une même ligne s'il a suffisamment de place pour le faire.Sinon, il les réorganise par lignes, les unes au-dessus des autres.Vous allez utiliser un FlowLayoutPanel pour contenir quatre boutons.

Pour ajouter des boutons

1. Sélectionnez le FlowLayoutPanel que vous avez ajouté.Accédez aux Contrôles communs dans la Boîte à outils et double-cliquez sur l'icône Bouton pour ajouter un bouton appelé button1 à votre FlowLayoutPanel.Répétez la même opération pour ajouter un deuxième bouton.L'IDE détermine qu'il existe déjà un bouton appelé button1 et appelle donc le suivant button2.

   [!REMARQUE]

   En Visual Basic, les noms des boutons commencent par une majuscule : button1 s'appelle donc Button1, button2 s'appelle Button2, et ainsi de suite.

2. En général, vous ajoutez les autres boutons à l'aide de la Boîte à outils.Cette fois-ci, cliquez sur button2, puis dans le menu Edition, cliquez sur Copier (ou appuyez sur Ctrl+C).Dans le menu Edition, cliquez sur Coller (ou appuyez sur Ctrl+V) pour coller une copie de votre bouton.Maintenant collez-le à nouveau.L'IDE a désormais ajouté button3 et button4.

   [!REMARQUE]

   Vous pouvez copier et coller n'importe quel contrôle.L'IDE nomme et place les nouveaux contrôles de façon logique.Si vous collez un contrôle dans un conteneur, l'IDE choisit de le placer dans l'espace logique suivant.

3. Sélectionnez le premier bouton et affectez la valeur Afficher une image à sa propriété Text.Ensuite, affectez les valeurs Effacer l'image, Définir la couleur d'arrière-plan et Fermer aux propriétés Text des trois boutons suivants.

4. L'étape suivante consiste à redimensionner les boutons et à les réorganiser pour qu'ils soient alignés à gauche du panneau.Sélectionnez le FlowLayoutPanel et recherchez sa propriété FlowDirection.Modifiez-la pour qu'elle ait la valeur RightToLeft.Une fois la modification effectuée, les boutons doivent s'aligner automatiquement à droite de la cellule et se positionner dans l'ordre inverse pour que le bouton Afficher une image soit à droite.

   [!REMARQUE]

   Si les boutons sont encore dans le désordre, vous pouvez les faire glisser autour du FlowLayoutPanel pour les réorganiser comme vous le voulez.Vous pouvez cliquer sur l'un des boutons et le faire glisser à gauche ou à droite.

5. Cliquez sur le bouton Fermer pour le sélectionner.Maintenez la touche CTRL enfoncée et cliquez sur les autres trois boutons pour tous les sélectionner.Lorsque tous les boutons sont sélectionnés, ouvrez la fenêtre Propriétés et faites défiler jusqu'à la propriété AutoSize.Cette propriété indique au bouton qu'il doit se redimensionner automatiquement pour s'ajuster à l'ensemble de son texte.Affectez-lui la valeur true.Vos boutons doivent maintenant avoir des dimensions correctes et se trouver dans le bon ordre.(Si les quatre boutons sont sélectionnés, vous pouvez modifier les quatre propriétés AutoSize en même temps.) L'image suivante montre les quatre boutons.

   Visionneuse d'images avec quatre boutons

   

6. Maintenant, exécutez à nouveau votre programme pour examiner la nouvelle présentation de votre formulaire.Les boutons et la case à cocher sont pour le moment inactifs si vous cliquez dessus, mais ils fonctionneront bientôt.

Pour continuer ou examiner

• Pour passer à l'étape suivante du didacticiel, consultez Étape 6 : affecter un nom à vos contrôles bouton.

• Pour revenir à l'étape précédente du didacticiel, consultez Étape 4 : composer votre formulaire avec un contrôle TableLayoutPanel.