Procédure pas à pas : organisation de contrôles sur Windows Forms à l’aide d’un TableLayoutPanel

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

Le contrôle FlowLayoutPanel et le contrôle TableLayoutPanel offrent des moyens intuitifs d’organiser les éléments de contrôle sur votre formulaire. Les deux fournissent une possibilité automatique et configurable de contrôler les positions relatives des contrôles enfants qu’ils contiennent, et vous donnent toutes deux des fonctionnalités de disposition dynamiques au moment de l’exécution, afin qu’elles puissent redimensionner et repositionner les contrôles enfants à mesure que les dimensions du formulaire parent changent. Les panneaux de disposition peuvent être imbriqués dans les panneaux de disposition pour permettre la réalisation d’interfaces utilisateur sophistiquées.

Le composant FlowLayoutPanel organise son contenu dans un sens de flux spécifique : horizontal ou vertical. Son contenu peut être encapsulé d’une ligne à l’autre ou d’une colonne à l’autre. Sinon, son contenu peut être coupé au lieu d’être encapsulé. Pour plus d’informations, consultez Procédure pas à pas : Organiser des contrôles sur Windows Forms à l’aide d’un FlowLayoutPanel.

TableLayoutPanel organise son contenu dans une grille, fournissant des fonctionnalités similaires à l’élément <HTML> table. 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 en lignes et en colonnes, et elles peuvent avoir des tailles différentes. 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 offre également une fonctionnalité de redimensionnement proportionnel en temps réel, permettant à votre mise en page de s'adapter harmonieusement au redimensionnement de votre formulaire. 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 un contrôle TableLayoutPanel comme conteneur pour l’ensemble de la mise en page. Utilisez TableLayoutPanel des contrôles pour fournir des fonctionnalités de redimensionnement proportionnelles aux parties de la mise en page.

Les tâches illustrées dans cette procédure pas à pas sont les 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
Extension de lignes et de colonnes avec un élément de 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éaffectation de contrôles existants à un autre parent

Lorsque vous avez terminé, vous aurez une compréhension du 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 de 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 depuis la boîte à outils sur votre 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 dans les cellules à l’aide de l’arrangement et de l’ancrage

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

Positionnement des contrôles dans les cellules

Sélectionnez le premier contrôle Button. Modifiez la valeur de sa propriété Dock en Fill. Notez que le Button contrôle se développe pour remplir sa cellule.
Sélectionnez l’un des autres Button contrôles. Modifiez la valeur de sa propriété Anchor en 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 propriété du contrôleur Button et de la propriété du panneau Margin.
Modifiez la valeur de la propriété de contrôle Button à Anchor et Right. Notez que le contrôle est dimensionné à la largeur de la cellule, les valeurs Margin et Padding étant prises en compte.
Répétez les étapes 2 et 3 avec les styles Top et Bottom.

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 RowStyles et ColumnStyles.

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

Sélectionnez le contrôle TableLayoutPanel dans le Concepteur Windows Forms.
Dans la fenêtre Propriétés, ouvrez la collection ColumnStyles en cliquant sur le bouton Points de Suspension () à côté 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 à l’élément de contrôle Button. 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. Modifiez la valeur de sa propriété SizeType en 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 collection RowStyles.
Saisissez l'une des poignées de redimensionnement de l'angle et modifiez à la fois la largeur et la hauteur du contrôle TableLayoutPanel. 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.

Extension de lignes et de colonnes avec un élément de 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 élément de commande

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 TableLayoutPanel contrôle en double-cliquant sur des contrôles dans la boîte à outils.

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

Faites glisser un contrôle TableLayoutPanel depuis la boîte à outils sur votre formulaire.
Double-cliquez sur l’icône Button de contrôle dans la boîte à outils. Notez qu’un nouveau bouton de contrôle apparaît dans la TableLayoutPanel première cellule du contrôle.
Double-cliquez sur plusieurs contrôles supplémentaires dans la boîte à outils. Notez que les nouvelles commandes apparaissent successivement dans les TableLayoutPanel cases inoccupées du contrôle. Notez également que la TableLayoutPanel commande s'étend pour accueillir les nouvelles commandes si aucune cellule n'est libre.

Gestion automatique des dépassements de capacité

Lorsque vous insérez des contrôles dans le TableLayoutPanel contrôle, il se peut que vous manquiez 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.
Remplacez la valeur de la propriété TableLayoutPanel du contrôle GrowStyle par 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 TableLayoutPanel contrôle 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 depuis la boîte à outils sur votre formulaire.
Dans la boîte à outils, cliquez sur l'icône du Button contrôle. Ne le faites pas glisser sur le formulaire.
Déplacez le pointeur de la souris sur l'élément de commande TableLayoutPanel. Notez que le pointeur passe à un réticule avec l’icône de contrôle Button attachée.
Cliquez et maintenez le bouton de la souris enfoncé.
Faites glisser le pointeur de la souris pour dessiner le contour du Button contrôle. Lorsque vous êtes satisfait de la taille, 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 contrôle TableLayoutPanel ne vous permet pas de déposer le contrôle Button dans la cellule occupée.

Permutation des contrôles

Le contrôle TableLayoutPanel vous permet de permuter 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-le dans 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 à l’aide d’une combinaison de panneaux de disposition et de contrôles. 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. Expérimentez l'ajout d’un TableLayoutPanel élément de contrôle dans l'élément de contrôle existant.
Ancrez le contrôle TableLayoutPanel sur le formulaire parent. Redimensionnez le formulaire et notez l’effet sur la disposition.

Voir aussi

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-05-07