Étape 4 : composer votre formulaire avec un contrôle TableLayoutPanel

Dans cette étape, vous ajoutez un contrôle TableLayoutPanel à 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 composer votre formulaire avec un contrôle TableLayoutPanel

1. Ouvrez le Concepteur Windows Forms.Recherchez l'onglet Boîte à outils dans la partie gauche du formulaire.Maintenez le pointeur de votre souris sur l'onglet Boîte à outils pour afficher la Boîte à outils.(Ou, dans le menu Affichage, cliquez sur Boîte à outils).

2. Cliquez sur le signe plus en regard du groupe Conteneurs pour l'ouvrir, comme indiqué dans l'image suivante.

   Groupe Conteneurs

   

3. Vous pouvez ajouter des contrôles comme des boutons, des cases à cocher et des étiquettes à votre formulaire.Double-cliquez sur le contrôle TableLayoutPanel dans la Boîte à outils.L'IDE ajoute alors un contrôle TableLayoutPanel à votre formulaire, comme indiqué dans l'image suivante.

   Contrôle TableLayoutPanel

   

   [!REMARQUE]

   Après avoir ajouté votre TableLayoutPanel, si une fenêtre intitulée Tâches TableLayoutPanel s'affiche à l'intérieur de votre formulaire, cliquez n'importe où dans le formulaire pour la fermer.Vous en apprendrez davantage sur cette fenêtre dans les prochaines étapes de ce didacticiel.

   [!REMARQUE]

   Notez que la Boîte à outils se développe pour recouvrir votre formulaire lorsque vous cliquez sur son onglet, et se referme lorsque vous cliquez en dehors de celle-ci.Il s'agit de la fonctionnalité Masquer automatiquement de l'IDE.Vous pouvez l'activer ou la désactiver pour chaque fenêtre en cliquant sur l'icône de la punaise dans l'angle supérieur droit de la fenêtre (et ainsi choisir de masquer la fenêtre automatiquement ou de la garder à l'écran).L'icône de la punaise apparaît comme suit.

   Icône de la punaise

   

4. Cliquez sur TableLayoutPanel pour le sélectionner.Vous pouvez vérifier quel contrôle est sélectionné en examinant la liste déroulante en haut de la fenêtre Propriétés, comme indiqué dans l'image suivante.

   Fenêtre Propriétés affichant le contrôle TableLayoutPanel

   

5. Le sélecteur de contrôles est une liste déroulante située en haut de la fenêtre Propriétés.Dans cet exemple, il indique qu'un contrôle appelé tableLayoutPanel1 est sélectionné.Vous pouvez sélectionner des contrôles en cliquant dans le Concepteur Windows Forms ou en utilisant le sélecteur de contrôles.Maintenant que le TableLayoutPanel est sélectionné, recherchez la propriété Dock et cliquez sur Dock, dont la valeur doit être None.Notez qu'une flèche de déroulement s'affiche en regard de la valeur.Cliquez sur la flèche, puis sélectionnez le bouton Fill (le grand bouton au milieu), comme indiqué dans l'image suivante.

   Fenêtre Propriétés avec la valeur Fill sélectionnée

   

6. Une fois que vous avez affecté la valeur Fill à la propriété Dock du TableLayoutPanel, le Panel remplit tout le formulaire.Si vous redimensionnez à nouveau le formulaire, le TableLayoutPanel reste ancré et se redimensionne automatiquement pour s'adapter aux nouvelles dimensions.

   [!REMARQUE]

   Un TableLayoutPanel fonctionne comme un tableau dans Microsoft Office Word : il est composé de lignes et de colonnes, et une même cellule peut s'étendre sur plusieurs lignes et colonnes.Chaque cellule ne peut contenir qu'un seul contrôle (comme un bouton, une case à cocher ou une étiquette).Votre TableLayoutPanel aura un contrôle PictureBox sur toute sa ligne du haut, un contrôle CheckBox dans sa cellule en bas à gauche, et quatre contrôles Button dans sa cellule en bas à droite.

   [!REMARQUE]

   Comme indiqué précédemment, chaque cellule ne peut contenir qu'un seul contrôle : pourtant, celle située en bas à gauche comporte quatre contrôles Button.En effet, vous pouvez insérer un contrôle dans une cellule contenant d'autres contrôles.Ce genre de contrôle est appelé un conteneur, et le TableLayoutPanel en est un exemple.Les prochaines étapes de ce didacticiel vous expliqueront cela plus en détail.

7. Actuellement, le TableLayoutPanel est composé de deux lignes et colonnes de taille égale.Vous devez les redimensionner pour que la ligne du haut et la colonne de droite soient beaucoup plus grandes.Dans le Concepteur Windows Forms, sélectionnez le TableLayoutPanel.Dans l'angle supérieur droit, il y a un petit bouton en forme de triangle noir, comme celui illustré ci-dessous.

   Bouton en triangle

   

   Ce bouton indique que le contrôle dispose de tâches vous permettant de définir ses propriétés automatiquement.

8. Cliquez sur le triangle pour afficher la liste des tâches du contrôle, comme indiqué dans l'image suivante.

   Tâches TableLayoutPanel

   

9. Cliquez sur la tâche Modifier les lignes et les colonnes pour afficher la fenêtre Styles de ligne et de colonne.Cliquez sur Colonne1 et attribuez-lui des dimensions de 15 pour cent en vérifiant que le bouton Pourcentage est sélectionné et en entrant 15 dans la zone Pourcentage.(Il s'agit d'un contrôle NumericUpDown, que vous utiliserez dans un prochain didacticiel.) Cliquez sur Colonne2 et affectez-lui la valeur 85 pour cent.Ne cliquez pas encore sur le bouton OK, sinon la fenêtre se fermera.(Mais si vous le faites, vous pouvez la rouvrir à l'aide de la liste des tâches.)

10. Dans la liste déroulante Afficher en haut de la fenêtre, cliquez sur Lignes.Affectez les valeurs 90 pour cent à Ligne1 et 10 pour cent à Ligne2.

11. Cliquez sur OK.Votre TableLayoutPanel doit maintenant avoir une grande ligne en haut, une petite ligne en bas, une petite colonne à gauche et une grande colonne à droite.Vous pouvez redimensionner les lignes et les colonnes dans le TableLayoutPanel en faisant glisser leurs bordures.

Pour continuer ou examiner

• Pour passer à l'étape suivante du didacticiel, consultez Étape 5 : ajouter des contrôles à votre formulaire.

• Pour revenir à l'étape précédente du didacticiel, consultez Étape 3 : définir les propriétés de votre formulaire.