Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide d'un TableLayoutPanel

Article
08/21/2007

Certaines applications exigent un formulaire dont la disposition se réorganise de manière appropriée lorsque le formulaire est redimensionné ou lorsque la taille de son contenu change. Lorsque vous avez besoin d'une disposition dynamique et que vous ne souhaitez pas gérer explicitement des événements Layout dans votre code, pensez à utiliser un panneau de disposition.

Le contrôle FlowLayoutPanel et le contrôle TableLayoutPanel offrent des moyens intuitifs de réorganisation des contrôles sur votre formulaire. Les deux fournissent la capacité automatique et configurable de contrôler les positions relatives des contrôles enfants qu'ils contiennent, et les deux offrent des fonctions de disposition dynamique au moment de l'exécution ; ils peuvent donc redimensionner et repositionner les contrôles enfants lorsque les dimensions du formulaire parent changent. Les panneaux de disposition peuvent être imbriqués dans des panneaux de disposition pour permettre la réalisation d'interfaces utilisateur sophistiquées.

Le FlowLayoutPanel réorganise son contenu dans un sens spécifique du flux : horizontal ou vertical. Son contenu peut être encapsulé d'une ligne à la suivante, ou d'une colonne à la suivante. Alternativement, son contenu peut être découpé au lieu d'être encapsulé. Pour plus d'informations, consultez Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide d'un FlowLayoutPanel.

Le TableLayoutPanel réorganise son contenu dans une grille, en fournissant ainsi des fonctionnalités semblables à l'élément HTML <table>. Le contrôle TableLayoutPanel vous permet de placer des contrôles dans une présentation grille sans requérir que vous spécifiiez précisément la position de chaque contrôle individuel. Ses cellules sont disposées en lignes et colonnes, et ceux-ci peuvent avoir des tailles différentes. Les cellules peuvent être fusionnées à travers les lignes et colonnes. Les cellules peuvent contenir tout ce qu'un formulaire peut contenir et se comportent dans la plupart des cas comme des conteneurs.

Le contrôle TableLayoutPanel fournit également une fonction de redimensionnant proportionnel au moment de l'exécution ; votre disposition peut donc changer doucement lorsque votre formulaire est redimensionné. Cela rend le contrôle TableLayoutPanel parfaitement adapté aux objectifs tels que les formulaires de saisie de données et les applications localisées. Pour plus d'informations, consultez Procédure pas à pas : création un Windows Form redimensionnable pour l'entrée de données et Procédure pas à pas : création d'une présentation qui ajuste la proportion pour la localisation.

En général, vous ne devez pas utiliser un contrôle TableLayoutPanel comme conteneur pour la disposition entière. Utilisez des contrôles TableLayoutPanel pour fournir des fonctions de redimensionnant proportionnel aux parties de la disposition.

Cette procédure pas à pas illustre les tâches suivantes :

Création d'un projet Windows Forms
Réorganisation des contrôles dans les lignes et les colonnes
Définition des propriétés des lignes et des colonnes
Étendue de lignes et de colonnes avec un contrôle
Gestion automatique des dépassements de capacité
Insertion de contrôles par un double-clic dans la boîte à outils
Insertion d'un contrôle en dessinant son plan
Réassignation de contrôles existants à un parent différent

Lorsque vous aurez terminé, vous aurez assimilé le fonctionnement du rôle joué par ces importantes fonctionnalités de disposition.

Notes

Selon vos paramètres actifs ou votre édition, les boîtes de dialogue et les commandes de menu que vous voyez peuvent différer de celles qui sont décrites dans l'aide. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Paramètres Visual Studio.

Création du projet

La première étape consiste à créer le projet et configurer le formulaire.

Pour créer le projet

Créez un projet d'application Windows appelé « TableLayoutPanelExample ». Pour plus d'informations, consultez Comment : créer un projet d'application Windows.
Sélectionnez le formulaire dans le Concepteur Windows Forms.

Réorganisation des contrôles dans les lignes et les colonnes

Le contrôle TableLayoutPanel vous permet de réorganiser facilement des contrôles dans les lignes et colonnes.

Pour réorganiser des contrôles dans les lignes et les colonnes à l'aide d'un TableLayoutPanel

Faites glisser un contrôle TableLayoutPanel de la Boîte à outils vers votre formulaire. Notez que, par défaut, le contrôle TableLayoutPanel a quatre cellules.
Faites glisser un contrôle Button de la Boîte à outils dans le contrôle TableLayoutPanel et déposez-le dans l'une des cellules. Notez que le contrôle Button est créé dans la cellule que vous avez sélectionnée.
Faites glisser trois autres contrôles Button de la Boîte à outils vers le contrôle TableLayoutPanel, afin que chaque cellule contienne un bouton.
Attrapez la poignée de redimensionnement verticale entre les deux colonnes et déplacez-la à gauche. Notez que les contrôles Button dans la première colonne sont redimensionnés selon une plus petite largeur, alors que la taille des contrôles Button dans la deuxième colonne est inchangée.
Attrapez la poignée de redimensionnement verticale entre les deux colonnes et déplacez-la à droite. Notez que les contrôles Button dans la première colonne retournent à leur taille d'origine, alors que les contrôles Button dans la deuxième colonne sont déplacés à droite.
Déplacez la poignée de redimensionnement horizontale vers le haut et le bas pour constater l'effet sur les contrôles dans le panneau.

Positionnement des contrôles dans les cellules à l'aide de l'amarrage et de l'ancrage

Le comportement d'ancrage des contrôles enfants dans un TableLayoutPanel diffère du comportement dans d'autres contrôles conteneurs. Le comportement d'amarrage des contrôles enfants est le même que d'autres contrôles conteneurs.

Positionnement des contrôles dans les cellules

Sélectionnez le premier contrôle Button. Affectez à sa propriété Dock la valeur Fill. Notez que le contrôle Button se développe pour remplir sa cellule.
Sélectionnez l'un des autres contrôles Button. Affectez à sa propriété Anchor la valeur Right. Notez qu'il est déplacé afin que sa bordure droite soit près de la bordure droite de la cellule. La distance entre les bordures est la somme de la propriété Margin du contrôle Button et de la propriété Padding du panneau.
Attribuez à la propriété Anchor du contrôle Button les valeurs Right et Left. Notez que le contrôle est dimensionné selon la largeur de la cellule, avec les valeurs Margin et Padding prises en considération.
Répétez les étapes 2 et 3 avec les styles Top et Bottom.

Définition des propriétés des lignes et des colonnes

Vous pouvez définir des propriétés individuelles de lignes et colonnes en utilisant les collections RowStyles et ColumnStyles.

Pour définir des propriétés de lignes et de colonnes

Sélectionnez le contrôle TableLayoutPanel dans le Concepteur Windows Forms.
Dans les fenêtres Propriétés, ouvrez la collection ColumnStyles en cliquant sur le bouton de sélection () à côté de l'entrée Colonnes.
Sélectionnez la première colonne et modifiez la valeur de sa propriété SizeType en AutoSize. Cliquez sur OK pour accepter les modifications. Notez que la largeur de la première colonne est réduite pour contenir le contrôle Button. Notez également que la largeur de la colonne n'est pas redimensionnable.
Dans la fenêtre Propriétés, ouvrez la collection ColumnStyles et sélectionnez la première colonne. Affectez à sa propriété SizeType la valeur Percent. Cliquez sur OK pour accepter les modifications. Redimensionnez le contrôle TableLayoutPanel à une plus grande largeur et remarquez que la largeur de la première colonne se développe. Redimensionnez le contrôle TableLayoutPanel à une plus petite largeur et remarquez que les boutons dans la première colonne sont dimensionnés de façon à tenir dans la cellule. Notez également que la largeur de la colonne est redimensionnable.
Dans la fenêtre Propriétés, ouvrez la collection ColumnStyles et sélectionnez toutes les colonnes répertoriées. Affectez à chaque propriété SizeType la valeur Percent. Cliquez sur OK pour accepter les modifications. Répétez avec la collection RowStyles.
Saisissez l'une des poignées de redimensionnement et redimensionnez à la fois la largeur et la hauteur du contrôle TableLayoutPanel. Notez que les lignes et les colonnes sont redimensionnées lorsque la taille de contrôle TableLayoutPanel change. Notez également que les lignes et les colonnes sont redimensionnables avec les poignées de dimensionnement horizontale et verticale.

Étendue de lignes et de colonnes avec un contrôle

Le contrôle TableLayoutPanel ajoute plusieurs nouvelles propriétés aux contrôles au moment du design. RowSpan et ColumnSpan sont deux de ces propriétés. Vous pouvez utiliser ces propriétés pour étendre un contrôle sur plusieurs lignes ou colonnes.

Pour couvrir plusieurs lignes et des colonnes avec un contrôle

Sélectionnez le contrôle Button dans la première ligne et la première colonne.
Dans la fenêtre Propriétés, affectez à la propriété ColumnSpan la valeur 2. Notez que le contrôle Button remplit la première colonne et la deuxième colonne. Notez également qu'une ligne supplémentaire a été ajoutée pour tenir compte de cette modification.
Répétez l'étape 2 pour la propriété RowSpan.

Insertion de contrôles par un double-clic dans la boîte à outils

Vous pouvez remplir votre TableLayoutPanel contrôle en double-cliquant sur les contrôles de la Boîte à outils.

Pour insérer des contrôles par un double-clic dans la boîte à outils

Faites glisser un contrôle TableLayoutPanel de la Boîte à outils vers votre formulaire.
Double-cliquez sur l'icône du contrôle Button dans la Boîte à outils. Notez qu'un nouveau contrôle de bouton apparaît dans la première cellule du contrôle TableLayoutPanel.
Double-cliquez sur plusieurs autres contrôles dans la Boîte à outils. Notez que les nouveaux contrôles apparaissent successivement dans les cellules inoccupées du contrôle TableLayoutPanel. Notez également que le contrôle TableLayoutPanel se développe pour tenir compte des nouveaux contrôles si aucune cellule ouverte n'est disponible.

Gestion automatique des dépassements de capacité

Lorsque vous insérez des contrôles dans le contrôle TableLayoutPanel, vous pouvez manquer de cellules vides pour vos nouveaux contrôles. Le contrôle TableLayoutPanel gère cette situation automatiquement en augmentant le nombre de cellules.

Pour observer la gestion automatique des dépassements de capacité

S'il y a encore des cellules vides dans le contrôle TableLayoutPanel, continuez à insérer de nouveaux contrôles Button jusqu'à ce que le contrôle TableLayoutPanel soit complet.
Une fois que le contrôle TableLayoutPanel est complet, double-cliquez sur l'icône Button dans la Boîte à outils pour insérer un autre contrôle Button. Notez que le contrôle TableLayoutPanel crée de nouvelles cellules pour tenir compte du nouveau contrôle. Insérez d'autres contrôles et observez le comportement de redimensionnement.
Affectez à la propriété GrowStyle du contrôle TableLayoutPanel la valeur FixedSize. Double-cliquez sur l'icône Button dans la Boîte à outils pour insérer des contrôles Button jusqu'à ce que le contrôle TableLayoutPanel soit complet. Double-cliquez de nouveau sur l'icône Button dans la Boîte à outils. Remarquez que vous obtenez un message d'erreur du Concepteur Windows Forms qui vous informe qu'il n'est pas possible de créer des lignes et des colonnes supplémentaires.

Insertion d'un contrôle en dessinant son plan

Vous pouvez insérer un contrôle dans un contrôle TableLayoutPanel et spécifier sa taille en dessinant son plan dans une cellule.

Pour insérer un contrôle en dessinant son plan

Faites glisser un contrôle TableLayoutPanel de la Boîte à outils vers votre formulaire.
Dans la Boîte à outils, cliquez sur l'icône du contrôle Button. Ne la faites pas glisser sur le formulaire.
Placez le pointeur de la souris sur le contrôle TableLayoutPanel. Notez que le pointeur se transforme en croix avec l'icône du contrôle Button jointe.
Cliquez et maintenez le bouton de la souris enfoncé.
Faites glisser le pointeur de la souris pour dessiner le plan du contrôle Button. Lorsque la taille vous convient, relâchez le bouton de souris. Notez que le contrôle Button est créé dans la cellule dans laquelle vous avez dessiné le plan du contrôle.

Les contrôles multiples dans les cellules ne sont pas autorisés

Le contrôle TableLayoutPanel ne peut contenir qu'un seul contrôle enfant par cellule.

Pour montrer que les contrôles multiples dans les cellules ne sont pas autorisés

Faites glisser un contrôle Button de la Boîte à outils dans le contrôle TableLayoutPanel et déposez-le dans l'une des cellules occupées. Notez que le contrôle TableLayoutPanel ne vous permet pas de déposer le contrôle Button dans la cellule occupée.

Échange de contrôles

Le contrôle TableLayoutPanel vous permet d'échanger des contrôles qui occupent deux cellules différentes.

Pour échanger des contrôles

Faites glisser l'un des contrôles Button d'une cellule occupée et déposez-le sur une autre cellule occupée. Notez que les deux contrôles sont déplacés d'une cellule dans l'autre.

Étapes suivantes

Vous pouvez obtenir une disposition complexe à l'aide d'une combinaison de panneaux de disposition et de contrôles. Voici quelques suggestions pour une exploration plus approfondie :

Essayez de redimensionner l'un des contrôles Button à une plus grande taille et notez l'effet produit sur la disposition.
Collez une sélection de plusieurs contrôles dans le contrôle TableLayoutPanel et notez comment les contrôles sont insérés.
Les panneaux de disposition peuvent contenir d'autres panneaux de disposition. Essayez de déposer un contrôle TableLayoutPanel dans le contrôle existant.
Ancrez le contrôle TableLayoutPanel au formulaire parent. Redimensionnez le formulaire et notez l'effet produit sur la disposition.

Voir aussi