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

Article
12/18/2024

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 é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 des contrôles 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 TableLayoutPanel organise son contenu dans une grille, fournissant des fonctionnalités similaires à l'élément de table HTML <>. Ses cellules sont organisées en lignes et en colonnes, et elles peuvent avoir des tailles différentes. Pour plus d’informations, consultez procédure pas à pas : organiser des contrôles sur Windows Forms à l’aide d’unTableLayoutPanel .

Le FlowLayoutPanel organise son contenu dans une direction de flux spécifique : horizontale ou verticale. 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é. 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 horizontalement et verticalement
Modification du sens du flux
Insertion de sauts de flux
Organisation des commandes en utilisant l'espacement et les marges
Insertion de contrôles en double-cliquant dessus dans la boîte à outils
Insertion d’un contrôle en dessinant son contour
Insertion de contrôles à l’aide du caret
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éer le projet

Dans Visual Studio, créez un projet d’application Windows appelé « FlowLayoutPanelExample » (File>New>Project>Visual C# ou Visual Basic>Classic Desktop>Application Windows Forms).
Sélectionnez le formulaire dans le concepteur de formulaires .

Organisation des contrôles horizontalement et verticalement

Le contrôle FlowLayoutPanel vous permet de placer des contrôles le long des lignes ou des colonnes sans vous obliger à spécifier précisément la position de chaque contrôle individuel.

Le contrôle FlowLayoutPanel peut redimensionner ou réorganiser les contrôles enfants à mesure que les dimensions du formulaire parent changent.

Pour organiser les contrôles horizontalement et verticalement à l’aide d’un FlowLayoutPanel

Faites glisser un contrôle FlowLayoutPanel depuis la boîte à outils vers votre formulaire.
Faites glisser un contrôle Button depuis la boîte à outils vers le FlowLayoutPanel. Notez qu’il est automatiquement déplacé vers le coin supérieur gauche du contrôle FlowLayoutPanel.
Faites glisser un autre contrôle Button de la boîte à outils dans FlowLayoutPanel. Notez que le contrôle Button est automatiquement déplacé vers une position en regard du premier contrôle Button. Si votre FlowLayoutPanel est trop étroite pour ajuster les deux contrôles sur la même ligne, le nouveau contrôle Button est automatiquement déplacé vers la ligne suivante.
Faites glisser plusieurs contrôles Button supplémentaires de la boîte à outils dans le FlowLayoutPanel. Continuez à placer des contrôles Button jusqu'à ce qu’un passe à la ligne suivante.
Remplacez la valeur de la propriété WrapContents du contrôle FlowLayoutPanel par false. Notez que les contrôles enfants ne circulent plus vers la ligne suivante. Au lieu de cela, ils sont déplacés vers la première rangée et coupés.
Remplacez la valeur de la propriété WrapContents du contrôle FlowLayoutPanel par true. Notez que les contrôles enfants passent encore une fois à la ligne suivante.
Réduisez la largeur du contrôle FlowLayoutPanel jusqu’à ce que tous les contrôles Button soient déplacés dans la première colonne.
Augmentez la largeur du contrôle FlowLayoutPanel jusqu’à ce que tous les contrôles Button soient déplacés dans la première ligne. Vous devrez peut-être redimensionner votre formulaire pour prendre en charge la plus grande largeur.

Modification du sens du flux

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

Pour modifier la direction du flux dans un FlowLayoutPanel

Remplacez la valeur de la propriété FlowDirection du contrôle FlowLayoutPanel par TopDown. Notez que les contrôles enfants sont réorganisés en une ou plusieurs colonnes, en fonction de la hauteur du contrôle.
Redimensionnez l'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 s'étendent dans la colonne suivante. Continuez à diminuer la hauteur et notez que les éléments enfants se répartissent dans des colonnes consécutives. Remplacez la valeur de la propriété FlowDirection du contrôle FlowLayoutPanel par RightToLeft. Notez que les positions des éléments de contrôle secondaires sont inversées. Observez la disposition lorsque vous modifiez la valeur de la propriété FlowDirection en BottomUp.

Insertion de sauts de flux

Le contrôle FlowLayoutPanel fournit une propriété FlowBreak à ses contrôles enfants. Définir la valeur de la propriété FlowBreak à true entraîne l'arrêt du contrôle FlowLayoutPanel dans l'agencement des contrôles selon la direction de flux actuelle, et le passage à la ligne ou colonne suivante.

Pour insérer des sauts de flux

Remplacez la valeur de la propriété FlowDirection du contrôle FlowLayoutPanel par TopDown.
Sélectionnez l’un des contrôles Button au milieu de la colonne la plus à gauche.
Définissez la valeur de la propriété FlowBreak du contrôle Button sur true. Notez que la colonne est brisée et que les contrôles suivants le contrôle Button sélectionné se déversent dans la colonne suivante. Définissez la valeur de la propriété FlowBreak du contrôle Button sur false pour revenir au comportement d’origine.

Positionnement des contrôles à l’aide du docking et de l’ancrage

Les comportements d'amarrage et d’ancrage des contrôles enfants diffèrent des comportements dans d'autres contrôles de conteneurs. L'amarrage et l'ancrage sont relatifs au plus grand contrôle dans la direction du flux.

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 organisés dans une colonne.
Sélectionnez le contrôle Button supérieur. Augmentez sa largeur afin qu’elle soit environ deux fois plus large que les autres contrôles Button.
Sélectionnez le deuxième contrôle Button. Remplacez la valeur de sa propriété Anchor par Right. Notez qu’il est déplacé de sorte que sa bordure droite soit alignée avec celle du bord droit du premier contrôle Button.
Remplacez la valeur de sa propriété Anchor par Right et Left. Notez qu’il est dimensionné à la même largeur que le premier contrôle Button.
Sélectionnez le troisième contrôle Button. Remplacez la valeur de sa propriété Dock par Fill. Notez qu’il est dimensionné à la même largeur que le premier contrôle Button.

Disposition des contrôles à l’aide de l’espacement et des marges

Vous pouvez également 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 la cellule d’un 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 organiser les contrôles à l’aide des propriétés Padding et Margin

Remplacez la valeur de la propriété Dock du contrôle FlowLayoutPanel par Fill. Si votre formulaire est suffisamment grand, les contrôles Button sont 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 définissant la propriété All sur 20. Pour plus d’informations, consultez procédure pas à pas : disposition des contrôles Windows Forms avec remplissage, marges et propriété autoSize. Notez que les contrôles enfants sont déplacés vers le centre du contrôle FlowLayoutPanel. La valeur accrue 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 définissez la valeur de la propriété Margin sur 20. Notez que l’espacement entre les contrôles Button augmente, de sorte qu’ils sont déplacés plus loin. Vous devrez peut-être redimensionner le contrôle FlowLayoutPanel pour l'agrandir afin d'afficher tous les contrôles enfants.

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

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

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

Double-cliquez sur l’icône de 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 contrôles supplémentaires 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 contour

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

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

Dans la boîte à outils , cliquez sur l’icône de contrôle Button. Ne le faites pas glisser sur le formulaire.
Déplacez le pointeur de la souris au-dessus du contrôle FlowLayoutPanel. Notez que le pointeur passe à un croisement 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 contrôle Button. Lorsque vous êtes satisfait de la taille, relâchez le bouton de la souris. Notez que le contrôle Button est créé à 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 s’affiche pour indiquer où le contrôle sera inséré.

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

Faites glisser un contrôle Button de la boîte à outils dans le contrôle FlowLayoutPanel et pointez vers l’espace entre deux contrôles Button. Notez qu’une barre d’insertion est dessinée, indiquant où le Button sera placé lorsqu’il est 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 pour 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é avec les autres, car sa propriété Margin a une valeur différente.

Réaffectation de contrôles existants à un autre parent

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

Pour réparer les contrôles existants

Faites glisser trois contrôles Button de la boîte à outils sur le formulaire. Positionnez-les près les uns des autres, mais laissez-les non alignés.
Dans la boîte à outils , cliquez sur l’icône de 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 passe à un croisement avec l’icône de contrôle FlowLayoutPanel attachée.
Cliquez et maintenez le bouton de la souris enfoncé.
Faites glisser le pointeur de la souris pour dessiner le contour du contrôle FlowLayoutPanel. Dessinez le contour 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. Les suggestions d’exploration supplémentaires sont les suivantes :

Redimensionnez l’un des contrôles Button à une plus grande taille et notez l’effet sur la disposition.
Les panneaux de disposition peuvent contenir d’autres panneaux de disposition. Expérimentez l’insertion d’un contrôle TableLayoutPanel dans le contrôle existant.
Ancrez le contrôle FlowLayoutPanel au formulaire parent. Redimensionnez le formulaire et notez l’effet sur la disposition.
Définissez la propriété Visible de l’un des contrôles sur false et notez comment le FlowLayoutPanel reflowe en réponse.

Partager via