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

Article
06/02/2023

Certaines applications exigent un formulaire dont la disposition s’organise de manière appropriée à mesure que le formulaire est redimensionné ou que le contenu change de taille. Si vous avez besoin d’une disposition dynamique et que vous ne souhaitez pas gérer les événements Layout explicitement dans votre code, envisagez d’utiliser un panneau de disposition.

Les contrôles FlowLayoutPanel et TableLayoutPanel vous permettent d’organiser de manière intuitive les contrôles sur votre formulaire. Tous deux vous permettent de contrôler automatiquement et de configurer la position relative des contrôles enfants qu’ils contiennent, et l’un et l’autre proposent des fonctionnalités de disposition dynamique au moment de l’exécution qui leur permettent de redimensionner et repositionner les contrôles enfants à mesure que les dimensions du formulaire parent changent. Les panneaux de disposition peuvent être imbriqués dans d’autres panneaux de disposition, ce qui permet de créer des interfaces utilisateur sophistiquées.

FlowLayoutPanel organise son contenu dans un sens de flux spécifique : horizontal ou vertical. Vous pouvez encapsuler son contenu d'une ligne à la suivante ou d'une colonne à la suivante. Vous pouvez également découper son contenu au lieu de l'encapsuler. Pour plus d’informations, consultez Procédure pas à pas : Organiser des contrôles sur Windows Forms à l’aide d’un FlowLayoutPanel.

Il TableLayoutPanel organise son contenu dans une grille, fournissant des fonctionnalités similaires à l’élément de table> HTML<. Le TableLayoutPanel contrôle vous permet de placer des contrôles dans une disposition de grille sans vous obliger à spécifier précisément la position de chaque contrôle individuel. Ses cellules sont organisées dans des lignes et des colonnes dont la taille peut varier. Les cellules peuvent être fusionnées entre des lignes et des colonnes. Les cellules peuvent contenir tout ce qu’un formulaire peut contenir et se comporter à la plupart des autres égards en tant que conteneurs.

Le TableLayoutPanel contrôle fournit également une fonctionnalité de redimensionnement proportionnelle au moment de l’exécution, afin que votre disposition puisse changer en douceur à mesure que votre formulaire est redimensionné. Cela rend le TableLayoutPanel contrôle bien adapté à des fins telles que les formulaires d’entrée de données et les applications localisées. Pour plus d’informations, consultez Procédure pas à pas : création d’un Windows Form redimensionnable pour l’entrée de données et la procédure pas à pas : création d’un formulaire Windows localisable.

En règle générale, vous ne devez pas utiliser de TableLayoutPanel contrôle comme conteneur pour l’ensemble de la disposition. Utilisez TableLayoutPanel des contrôles pour fournir des fonctionnalités de redimensionnement proportionnelles aux parties de la disposition.

Cette procédure pas à pas décrit notamment les tâches suivantes :

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

À l’issue de cette procédure, vous comprendrez le rôle joué par ces fonctionnalités de disposition importantes.

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 Guide pratique pour créer un projet d’application Windows Forms.
Sélectionnez le formulaire dans le Concepteur WindowsForms.

Organisation des contrôles dans les lignes et les colonnes

Le TableLayoutPanel contrôle vous permet d’organiser facilement les contrôles en lignes et en colonnes.

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

Faites glisser un contrôle TableLayoutPanel de la boîte à outils vers le formulaire. Notez que, par défaut, le TableLayoutPanel contrôle a quatre cellules.
Faites glisser un Button contrôle de la boîte à outils dans le TableLayoutPanel contrôle et déposez-le dans l’une des cellules. Notez que le Button contrôle est créé dans la cellule que vous avez sélectionnée.
Faites glisser trois Button autres contrôles de la boîte à outils dans le TableLayoutPanel contrôle afin que chaque cellule contienne un bouton.
Récupérez la poignée de dimensionnement verticale entre les deux colonnes et déplacez-la vers la gauche. Notez que les Button contrôles de la première colonne sont redimensionnés à une largeur plus petite, tandis que la Button taille des contrôles de la deuxième colonne n’est pas modifiée.
Saisissez la poignée de dimensionnement verticale entre les deux colonnes et déplacez-la vers la droite. Notez que les Button contrôles de la première colonne retournent à leur taille d’origine, tandis que les Button contrôles de la deuxième colonne sont déplacés vers la droite.
Déplacez la poignée de dimensionnement horizontale vers le haut et le bas pour voir l’effet sur les contrôles du panneau.

Positionnement des contrôles au sein des cellules à l’aide de l’ancrage et de l’ancrage

Le comportement d’ancrage des contrôles enfants dans un TableLayoutPanel autre comportement diffère du comportement dans d’autres contrôles de conteneur. Le comportement d’ancrage des contrôles enfants est identique à d’autres contrôles de conteneur.

Positionnement des contrôles dans les cellules

Sélectionnez le premier contrôle Button. Remplacez la valeur de sa propriété Dock par Fill. Notez que le Button contrôle se développe pour remplir sa cellule.
Sélectionnez l’un des autres Button contrôles. Remplacez la valeur de sa propriété Anchor par Right. Notez qu’il est déplacé afin que sa bordure droite soit proche de la bordure droite de la cellule. La distance entre les bordures est la somme de la Button propriété du Margin contrôle et de la propriété du Padding panneau.
Modifiez la valeur de la Button propriété du Anchor contrôle en Right et Leften . Notez que le contrôle est dimensionné à la largeur de la cellule, avec les Margin Padding valeurs prises en compte.
Répétez les étapes 2 et 3 avec les styles et Bottom les Top styles.

Définition des propriétés de ligne et de colonne

Vous pouvez définir des propriétés individuelles de lignes et de colonnes à l’aide des collections et ColumnStyles des RowStyles lignes.

Pour définir les propriétés de ligne et de colonne

Sélectionnez le TableLayoutPanel contrôle dans le Concepteur Windows Forms.
Dans les fenêtres Propriétés, ouvrez la ColumnStyles collection en cliquant sur le bouton de sélection () en regard de l’entrée Colonnes.
Sélectionnez la première colonne et remplacez la valeur de sa SizeType propriété AutoSizepar . Cliquez sur OK pour accepter la modification. Notez que la largeur de la première colonne est réduite pour s’adapter au Button contrôle. Notez également que la largeur de la colonne n’est pas redimensionnable.
Dans la fenêtre Propriétés , ouvrez la ColumnStyles collection et sélectionnez la première colonne. Remplacez la valeur de sa propriété SizeType par Percent. Cliquez sur OK pour accepter la modification. Redimensionnez le TableLayoutPanel contrôle sur une largeur plus grande et notez que la largeur de la première colonne se développe. Redimensionnez le TableLayoutPanel contrôle sur une largeur plus petite et notez que les boutons de la première colonne sont dimensionnés pour s’adapter à la cellule. Notez également que la largeur de la colonne est redimensionnable.
Dans la fenêtre Propriétés , ouvrez la ColumnStyles collection et sélectionnez toutes les colonnes répertoriées. Définissez la valeur de chaque SizeType propriété sur Percent. Cliquez sur OK pour accepter la modification. Répétez avec la RowStyles collection.
Saisissez l’une des poignées de redimensionnement d’angle et redimensionnez à la fois la largeur et la hauteur du TableLayoutPanel contrôle. Notez que les lignes et les colonnes sont redimensionnées à mesure que la TableLayoutPanel taille du contrôle 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 TableLayoutPanel contrôle ajoute plusieurs nouvelles propriétés aux contrôles au moment du design. Deux de ces propriétés sont RowSpan et ColumnSpan. Vous pouvez utiliser ces propriétés pour faire en sorte qu’un contrôle s’étende sur plusieurs lignes ou colonnes.

Pour étendre des lignes et des colonnes avec un contrôle

Sélectionnez le Button contrôle dans la première ligne et la première colonne.
Dans les fenêtres Propriétés , remplacez la valeur de la ColumnSpan propriété par 2. Notez que le Button contrôle remplit la première colonne et la deuxième colonne. Notez également qu’une ligne supplémentaire a été ajoutée pour prendre en charge cette modification.
Répétez l’étape 2 pour la RowSpan propriété.

Insertion de contrôles en double-cliquant dessus dans la boîte à outils

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

Pour insérer des contrôles en double-cliquant dessus dans la boîte à outils

Faites glisser un contrôle TableLayoutPanel de la boîte à outils vers le formulaire.
Double-cliquez sur l’icône de contrôle Button dans la boîte à outils. Notez qu’un nouveau contrôle de bouton apparaît dans la TableLayoutPanel première cellule du contrôle.
Double-cliquez sur plusieurs autres contrôles dans la boîte à outils. Notez que les nouveaux contrôles apparaissent successivement dans les TableLayoutPanel cellules inoccupées du contrôle. Notez également que le TableLayoutPanel contrôle s’étend pour prendre en charge les 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 TableLayoutPanel contrôle, vous risquez de manquer de cellules vides pour vos nouveaux contrôles. Le TableLayoutPanel contrôle gère cette situation automatiquement en augmentant le nombre de cellules.

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

S’il existe toujours des cellules vides dans le TableLayoutPanel contrôle, continuez à insérer de nouveaux Button contrôles jusqu’à ce que le TableLayoutPanel contrôle soit plein.
Une fois le TableLayoutPanel contrôle plein, double-cliquez sur l’icône Button dans la boîte à outils pour insérer un autre Button contrôle. Notez que le TableLayoutPanel contrôle crée de nouvelles cellules pour prendre en charge le nouveau contrôle. Insérez quelques contrôles supplémentaires et observez le comportement de redimensionnement.
Affectez la valeur TableLayoutPanel à la propriété GrowStyle du contrôle FixedSize. Double-cliquez sur l’icône Button dans la boîte à outils pour insérer Button des contrôles jusqu’à ce que le TableLayoutPanel contrôle soit plein. Double-cliquez sur l’icône Button dans la boîte à outils . Notez que vous recevez un message d’erreur du Concepteur Windows Forms vous informant que des lignes et des colonnes supplémentaires ne peuvent pas être créées.

Insertion d’un contrôle en dessinant son contour

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

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

Faites glisser un contrôle TableLayoutPanel de la boîte à outils vers le formulaire.
Dans la Boîte à outils, cliquez sur l’icône de 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 devient une croix à laquelle est attachée l’icône de contrôle Button .
Cliquez et maintenez le bouton de la souris enfoncé.
Faites glisser le pointeur de la souris pour tracer le contour du contrôle Button . Quand la taille vous convient, relâchez le bouton de la souris. Notez que le Button contrôle est créé dans la cellule dans laquelle vous avez dessiné le contour du contrôle.

Plusieurs contrôles dans les cellules ne sont pas autorisés

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

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

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

Permutation des contrôles

Le TableLayoutPanel contrôle vous permet d’échanger les contrôles occupant deux cellules différentes.

Pour échanger des contrôles

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

Étapes suivantes

Vous pouvez obtenir une disposition complexe en combinant plusieurs contrôles et panneaux de disposition. Suggestions pour des recherches approfondies :

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