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

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.

Il TableLayoutPanel organise son contenu dans une grille, fournissant des fonctionnalités similaires à l’élément de table> HTML<. Ses cellules sont organisées dans des lignes et des colonnes dont la taille peut varier. Pour plus d'informations, consultez Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel.

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

Création d’un projet Windows Forms
Organisation de contrôles dans le sens horizontal ou vertical
Modification du sens du flux
Insertion d’interruptions de flux
Organisation des contrôles en utilisant le remplissage 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 en utilisant le signe insertion
Réassignation de contrôles existants à un parent différent

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 » (Fichier>Nouveau>projet>Visual C# ou Application Windows Forms De Bureau>Classique Visual Basic).>
Sélectionnez le formulaire dans le Concepteur de formulaires.

Organisation de contrôles dans le sens horizontal ou vertical

Le contrôle FlowLayoutPanel vous permet de placer des contrôles le long des lignes ou des colonnes sans avoir à indiquer précisément la position de chacun d’eux.

Le contrôle FlowLayoutPanel peut redimensionner ou ajuster dynamiquement ses contrôles enfants à mesure que les dimensions du formulaire parent changent.

Pour organiser les contrôles dans les sens horizontal et vertical à l’aide d’un FlowLayoutPanel

Faites glisser un contrôle FlowLayoutPanel de la boîte à outils vers le formulaire.
Faites glisser un contrôle Button de la boîte à outils vers le FlowLayoutPanel. Notez qu’il se déplace automatiquement vers le coin supérieur gauche du contrôle FlowLayoutPanel .
Faites glisser un autre contrôle Button de la boîte à outils vers le FlowLayoutPanel. Notez que le contrôle Button se déplace automatiquement à proximité du contrôle Button . Si votre FlowLayoutPanel est trop étroit pour accueillir les deux contrôles sur la même ligne, le nouveau contrôle Button se déplace automatiquement vers la ligne suivante.
Faites glisser plusieurs autres contrôles Button de la boîte à outils vers le FlowLayoutPanel. Continuez à placer des contrôles Button jusqu’à ce que l’un deux soit renvoyé à la ligne suivante.
Affectez la valeur FlowLayoutPanel à la propriété WrapContents du contrôle false. Notez que les contrôles enfants ne passent plus à la ligne suivante. Au lieu de cela, ils sont déplacés dans la première ligne et détourés.
Affectez la valeur FlowLayoutPanel à la propriété WrapContents du contrôle true. Notez que les contrôles enfants sont à nouveau renvoyés à la ligne suivante.
Diminuez 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 l’adapter à l’élargissement.

Modification du sens du flux

La propriété FlowDirection vous permet de modifier le sens dans lequel 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 le sens du flux dans un FlowLayoutPanel

Affectez la valeur FlowLayoutPanel à la propriété FlowDirection du contrôle TopDown. Notez que les contrôles enfants sont réorganisés en une ou plusieurs colonnes, selon la hauteur du contrôle.
Redimensionnez le FlowLayoutPanel de telle sorte que sa hauteur soit inférieure à la colonne des contrôles Button . Notez que le FlowLayoutPanel réorganise les contrôles enfants pour les placer dans la colonne suivante. Continuez à diminuer la hauteur et notez que les contrôles enfants passent dans les colonnes successives. Affectez la valeur FlowLayoutPanel à la propriété FlowDirection du contrôle RightToLeft. Notez que la position des contrôles enfants est inversée. Observez la disposition quand vous affectez à la propriété FlowDirection la valeur BottomUp.

Insertion d’interruptions de flux

Le contrôle FlowLayoutPanel fournit une propriété FlowBreak à ses contrôles enfants. L'affectation de la valeur true à la propriété FlowBreak fait en sorte que le contrôle FlowLayoutPanel cesse de disposer les contrôles dans le sens du flux actuel et qu'il encapsule à la ligne ou la colonne suivante.

Pour insérer des interruptions de flux

Affectez la valeur FlowLayoutPanel à la propriété FlowDirection du contrôle TopDown.
Sélectionnez l’un des contrôles Button au milieu de la colonne de gauche.
Affectez à la propriété FlowBreak du contrôle Button la valeur true. Notez que la colonne fait l’objet d’un saut et que les contrôles à la suite du contrôle Button sélectionné sont placés dans la colonne suivante. Affectez à la propriété FlowBreak du contrôle Button la valeur false pour revenir au comportement d’origine.

Positionnement des contrôles en utilisant l’ancrage

Le comportement de l’ancrage au niveau des contrôles enfants diffère de celui observé dans les autres contrôles conteneurs. L’ancrage se fait par rapport au plus grand contrôle dans le sens du flux.

Pour positionner les contrôles en utilisant 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 du haut. Augmentez sa largeur de sorte qu’il soit 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 sur la bordure droite du premier contrôle Button .
Remplacez la valeur de sa propriété Anchor par Right et Left. Notez que sa taille est calquée sur la largeur du premier contrôle Button .
Sélectionnez le troisième contrôle Button . Remplacez la valeur de sa propriété Dock par Fill. Notez que sa taille est calquée sur la largeur du premier contrôle Button .

Organisation des contrôles en utilisant le remplissage et les marges

Vous pouvez aussi organiser les contrôles contenus dans le FlowLayoutPanel en modifiant les propriétés Padding et Margin .

La propriété Padding vous permet de contrôler la position des contrôles dans une cellule du contrôle FlowLayoutPanel . Elle 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 en utilisant les propriétés Padding et Margin

Affectez la valeur FlowLayoutPanel à la propriété Dock du contrôle Fill. Si votre formulaire est suffisamment grand, les contrôles Button se déplacent dans la première colonne du contrôle FlowLayoutPanel .
Modifiez la valeur de la propriété FlowLayoutPanel du contrôle Padding en développant l’entrée Padding dans la fenêtre Propriétés et en affectant à la propriété All la valeur 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 se déplacent 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 contenus dans le FlowLayoutPanel et affectez à la propriété Margin la valeur 20. Notez que l’espacement entre les contrôles Button augmente de façon à les écarter davantage. Vous devrez peut-être agrandir le contrôle FlowLayoutPanel pour voir 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 des contrôles dans la boîte à outils.

Pour insérer des contrôles en double-cliquant dessus 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 s’affiche dans le contrôle FlowLayoutPanel .
Double-cliquez sur plusieurs autres contrôles dans la boîte à outils. Notez que les nouveaux contrôles s’affichent 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 la faites pas glisser sur le formulaire.
Placez le pointeur de la souris sur le contrôle FlowLayoutPanel . 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 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 à un emplacement déterminé à l’intérieur d’un contrôle FlowLayoutPanel . Quand vous faites glisser un contrôle dans la zone cliente du contrôle FlowLayoutPanel , une barre d’insertion s’affiche pour indiquer là 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 vers le contrôle FlowLayoutPanel et pointez sur l’espace qui sépare deux contrôles Button . Notez qu’une barre d’insertion est dessinée, indiquant où le Button sera placé lorsqu’il est supprimé dans le FlowLayoutPanel contrôle. Avant de déposer le nouveau contrôle Button dans le contrôle FlowLayoutPanel , déplacez le pointeur de la souris pour observer la façon dont 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, car sa propriété Margin a une valeur différente.

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

Vous pouvez assigner des contrôles existants de votre formulaire à un nouveau contrôle FlowLayoutPanel .

Pour attribuer un nouveau parent aux contrôles existants

Faites glisser trois contrôles Button de la boîte à outils vers le formulaire. Disposez-les près les uns des autres en les laissant non alignés.
Dans la Boîte à outils, cliquez sur l’icône de contrôle FlowLayoutPanel . Ne la faites pas glisser sur le formulaire.
Placez le pointeur de la souris près des trois contrôles Button . Notez que le pointeur devient une croix à laquelle est attachée l’icône de contrôle FlowLayoutPanel .
Cliquez et maintenez le bouton de la souris enfoncé.
Faites glisser le pointeur de la souris pour tracer le contour du contrôle FlowLayoutPanel . Tracez le contour 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 en combinant plusieurs contrôles et panneaux de disposition. Suggestions pour des recherches approfondies :

Agrandissez l’un des contrôles Button et observez l’effet du redimensionnement sur la disposition.
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 FlowLayoutPanel au formulaire parent. Redimensionnez le formulaire et observez-en l’effet sur la disposition.
Affectez à la propriété Visible de l’un des contrôles la valeur false et observez la façon dont le FlowLayoutPanel est réajusté en réponse.