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

Article
08/10/2011

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 TableLayoutPanel réorganise son contenu dans une grille, en fournissant ainsi des fonctionnalités semblables à l'élément HTML <table>. Ses cellules sont disposées en lignes et colonnes, et ceux-ci peuvent avoir des tailles différentes. Pour plus d'informations, consultez Procédure pas à pas : organisation des contrôles dans les Windows Forms à l'aide d'un TableLayoutPanel.

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é. Cette procédure pas à pas illustre les tâches suivantes :

Création d'un projet Windows Forms
Réorganisation horizontale et verticale des contrôles
Modification du sens du déroulement
Insertion d'interruptions de flux
Réorganisation des contrôles à l'aide de remplissage et marges
Insertion de contrôles par un double-clic dans la Boîte à outils
Insertion d'un contrôle en dessinant son plan
Insertion de contrôles à l'aide du signe insertion
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

Les boîtes de dialogue et les commandes de menu qui s'affichent peuvent être différentes de celles qui sont décrites dans l'aide, en fonction de vos paramètres actifs ou de l'édition utilisée. Pour modifier vos paramètres, choisissez Importation et exportation de paramètres dans le menu Outils. Pour plus d'informations, consultez Utilisation des paramètres.

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é « FlowLayoutPanelExample ». Pour plus d'informations, consultez Comment : créer un projet d'Application Windows Forms.
Sélectionnez le formulaire dans le Concepteur Forms.

Réorganisation horizontale et verticale des contrôles

Le contrôle FlowLayoutPanel vous permet de placer des contrôles le long de lignes ou colonnes sans requérir que vous spécifiiez précisément la position de chaque contrôle individuel.

Le contrôle FlowLayoutPanel peut redimensionner ou refluer ses contrôles enfants comme dimensions de la modification du formulaire parent.

Pour réorganiser les contrôles horizontalement et verticalement à l'aide d'un FlowLayoutPanel

Faites glisser un contrôle FlowLayoutPanel de la Boîte à outils vers votre formulaire.
Faites glisser un contrôle Button de la Boîte à outils jusqu'au FlowLayoutPanel. Notez qu'il est déplacé automatiquement à l'angle supérieur gauche du contrôle FlowLayoutPanel.
Faites glisser un autre contrôle Button de la Boîte à outils jusqu'au FlowLayoutPanel. Notez que le contrôle Button est déplacé automatiquement à une position à côté du premier contrôle Button. Si votre FlowLayoutPanel est trop étroit pour mettre les deux contrôles sur la même ligne, le nouveau contrôle Button est déplacé automatiquement à la ligne suivante.
Faites glisser plusieurs autres contrôles Button de la Boîte à outils jusqu'au FlowLayoutPanel. Continuez à placer les contrôles Button jusqu'à ce que l'un d'eux soit encapsulé à la ligne suivante.
Affectez à la propriété WrapContents du contrôle FlowLayoutPanel la valeur false. Notez que le déroulement des contrôles enfants ne se poursuit plus à la ligne suivante. Ces contrôles sont maintenant déplacés à la première ligne et découpés.
Affectez à la propriété WrapContents du contrôle FlowLayoutPanel la valeur true. Notez que les contrôles enfants sont encore encapsulés à la ligne suivante.
Réduisez la largeur du contrôle FlowLayoutPanel jusqu'à ce que tous les contrôles Button soient déplacés vers la première colonne.
Augmentez la largeur du contrôle FlowLayoutPanel jusqu'à ce que tous les contrôles Button soient déplacés vers la première ligne. Vous pouvez devoir redimensionner votre formulaire pour tenir compte de la largeur supérieure.

Modification du sens du déroulement

La propriété FlowDirection vous permet de modifier la direction dans laquelle les contrôles sont réorganisés. Vous pouvez réorganiser les contrôles enfants de gauche à droite, de droite à gauche, de haut en bas, ou de bas en haut.

Pour modifier le sens du déroulement dans un FlowLayoutPanel

Affectez à la propriété FlowDirection du contrôle FlowLayoutPanel la valeur TopDown. Notez que les contrôles enfants sont réorganisés dans une ou plusieurs colonnes, selon la hauteur du contrôle.
Redimensionnez le FlowLayoutPanel afin que sa hauteur soit plus courte que la colonne des contrôles Button. Notez que le FlowLayoutPanel réorganise les contrôles enfants pour qu'ils se déroulent dans la colonne suivante. Continuez à réduire la hauteur et remarquez que les contrôles enfants se déroulent dans des colonnes consécutives. Affectez à la propriété FlowDirection du contrôle FlowLayoutPanel la valeur RightToLeft. Notez que les positions des contrôles enfants sont inversées. Observez la disposition lorsque vous remplacez la valeur de la propriété FlowDirection par BottomUp.

Insertion d'interruptions de flux

Le contrôle FlowLayoutPanel fournit une propriété FlowBreak à ses contrôles enfants. Lorsque vous affectez à la propriété FlowBreak la valeur true le contrôle FlowLayoutPanel cesse de disposer des contrôles dans le sens du déroulement actuel et encapsule à la ligne ou à la colonne suivante.

Pour insérer des interruptions de flux

Affectez à la propriété FlowDirection du contrôle FlowLayoutPanel la valeur TopDown.
Sélectionnez l'un des contrôles Button dans le milieu de la colonne la plus à gauche.
Affectez à la propriété FlowBreak du contrôle Button la valeur true. Notez que la colonne est interrompue et les contrôles qui suivent le flux du contrôle Button sélectionné se déroulent dans la colonne suivante. Attribuez à la propriété FlowBreak du contrôle Button la valeur false pour retourner au comportement d'origine.

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

Les comportements d'amarrage et d'ancrage des contrôles enfants diffèrent des comportements dans les autres contrôles conteneur. L'ancrage et l'amarrage se rapportent tous deux au plus grand contrôle dans le sens du déroulement.

Pour positionner les contrôles à l'aide de l'amarrage et de l'ancrage

Augmentez la taille du FlowLayoutPanel jusqu'à ce que les contrôles Button soient tous réorganisés dans une colonne.
Sélectionnez le contrôle Button supérieur. Augmentez sa largeur afin qu'il soit à peu près deux fois plus large que les autres contrôles Button.
Sélectionnez le deuxième contrôle Button. Affectez à sa propriété Anchor la valeur Right. Notez qu'il est déplacé afin que sa bordure droite soit alignée sur la première bordure droite du contrôle Button.
Affectez à sa propriété Anchor les valeurs Right et Left. Notez qu'il est dimensionné selon la même largeur que le premier contrôle Button.
Sélectionnez le troisième contrôle Button. Affectez à sa propriété Dock la valeur Fill. Notez qu'il est dimensionné selon la même largeur que le premier contrôle Button.

Réorganisation des contrôles à l'aide de remplissage et marges

Vous pouvez également réorganiser des contrôles dans votre contrôle FlowLayoutPanel en modifiant les propriétés Padding et Margin.

La propriété Padding vous permet de contrôler le positionnement des contrôles dans une cellule du contrôle FlowLayoutPanel. Il spécifie l'espacement entre les contrôles enfants et la bordure du contrôle FlowLayoutPanel.

La propriété Margin vous permet de contrôler l'espacement entre les contrôles.

Pour réorganiser des contrôles à l'aide des propriétés Padding et Margin

Affectez à la propriété Dock du contrôle FlowLayoutPanel la valeur Fill. Si votre formulaire est assez grand, les contrôles Button seront déplacés dans la première colonne du contrôle FlowLayoutPanel.
Modifiez la valeur de la propriété Padding du contrôle FlowLayoutPanel en développant l'entrée Padding dans la fenêtre Propriétés et en attribuant à la propriété All la valeur 20. Pour plus d'informations, consultez Procédure pas à pas : disposition des contrôles Windows Forms avec les propriétés Padding, Margins et AutoSize. Notez que les contrôles enfants sont déplacés vers le centre du contrôle FlowLayoutPanel. La valeur augmentée de la propriété Padding éloigne les contrôles enfants des bordures du contrôle FlowLayoutPanel.
Sélectionnez tous les contrôles Button dans le FlowLayoutPanel et attribuez à la propriété Margin la valeur 20. Notez que l'espacement entre les contrôles Button augmente ; ils sont donc davantage éloignés les uns des autres. Vous pouvez avoir besoin de redimensionner le contrôle FlowLayoutPanel et le rendre plus grand pour voir tous les contrôles enfants.

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

Vous pouvez remplir votre contrôle FlowLayoutPanel 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

Double-cliquez sur l'icône du contrôle Button dans la Boîte à outils. Notez qu'un nouveau contrôle Button apparaît dans le contrôle FlowLayoutPanel.
Double-cliquez sur plusieurs autres contrôles dans la Boîte à outils. Notez que les nouveaux contrôles apparaissent successivement dans le contrôle FlowLayoutPanel.

Insertion d'un contrôle en dessinant son plan

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

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

Dans la Boîte à outils, cliquez sur l'icône du contrôle Button. Ne le faites pas glisser sur le formulaire.
Placez le pointeur de la souris sur le contrôle FlowLayoutPanel. 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 l'emplacement ouvert suivant du contrôle FlowLayoutPanel.

Insertion de contrôles à l'aide de la barre d'insertion

Vous pouvez insérer des contrôles à une position spécifique dans un contrôle FlowLayoutPanel. Lorsque vous faites glisser un contrôle dans la zone cliente du contrôle FlowLayoutPanel, une barre d'insertion semble indiquer où le contrôle sera inséré.

Pour insérer un contrôle à l'aide du signe insertion

Faites glisser un contrôle Button de la Boîte à outils dans le contrôle FlowLayoutPanel et pointez sur l'espace entre deux contrôles Button. Notez qu'une barre d'insertion est dessinée, en indiquant où le Button sera placé lorsqu'il sera déposé dans le contrôle FlowLayoutPanel. Avant de déposer le nouveau contrôle Button dans le contrôle FlowLayoutPanel, déplacez le pointeur de la souris autour afin d'observer comment la barre d'insertion se déplace.
Déposez le nouveau contrôle Button dans le contrôle FlowLayoutPanel. Notez que le nouveau contrôle Button n'est pas aligné sur les autres, parce que sa propriété Margin a une valeur différente.

Réassignation des contrôles existants à un parent différent

Vous pouvez assigner des contrôles qui existent sur votre formulaire à un nouveau contrôle FlowLayoutPanel.

Pour définir l'état de changement de parent (reparent) de contrôles existants

Faites glisser trois contrôles Button de la Boîte à outils vers le formulaire. Positionnez-les proches à l'un l'autre, mais laissez-les non alignés.
Dans la Boîte à outils, cliquez sur l'icône du contrôle FlowLayoutPanel. Ne le faites pas glisser sur le formulaire.
Déplacez le pointeur de la souris près des trois contrôles Button. Notez que le pointeur se transforme en croix avec l'icône du contrôle FlowLayoutPanel jointe.
Cliquez et maintenez le bouton de la souris enfoncé.
Faites glisser le pointeur de la souris pour dessiner le plan du contrôle FlowLayoutPanel. Dessinez le plan autour des trois contrôles Button.
Relâchez le bouton de la souris. Notez que les trois contrôles Button sont insérés dans le contrôle FlowLayoutPanel.

É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 :

Redimensionnez l'un des contrôles Button à une plus grande taille et notez l'effet produit sur la disposition.
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 FlowLayoutPanel au formulaire parent. Redimensionnez le formulaire et notez l'effet produit sur la disposition.
Attribuez à la propriété Visible de l'un des contrôles la valeur false et remarquez comment le FlowLayoutPanel se redéroule en réaction.

Voir aussi