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

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.

TableLayoutPanel organise son contenu dans une grille, fournissant des fonctionnalités similaires à l’élément <HTML> table. 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 : disposition des contrôles sur Windows Forms à l'aide de TableLayoutPanel.

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é. 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 contrôles à l’aide de l’espacement et des 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

  1. Dans Visual Studio, créez un projet d’application Windows appelé « FlowLayoutPanelExample » (Fichier>Nouveau>projet>Visual C# ou Visual Basic>Bureau Classique>Application Windows Forms).

  2. Sélectionnez le formulaire dans le Concepteur de formulaires.

Organisation des contrôles horizontalement et verticalement

Le FlowLayoutPanel contrôle 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 FlowLayoutPanel contrôle peut redimensionner ou réorganiser ses contrôles enfants au fur et à mesure que les dimensions du formulaire parent changent.

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

  1. Faites glisser un contrôle FlowLayoutPanel depuis la boîte à outils sur votre formulaire.

  2. Faites glisser un Button contrôle de la boîte à outils dans le FlowLayoutPanel. Notez qu’il est automatiquement déplacé vers le coin supérieur gauche du FlowLayoutPanel contrôle.

  3. Faites glisser un autre Button contrôle de la boîte à outils dans le FlowLayoutPanel. Notez que le Button contrôle est automatiquement déplacé vers une position en regard du premier Button contrôle. Si votre FlowLayoutPanel est trop étroit pour placer les deux contrôles sur la même rangée, le nouveau contrôle Button est automatiquement déplacé vers la rangée suivante.

  4. Faites glisser plusieurs autres contrôles Button de la boîte à outils dans le FlowLayoutPanel. Continuez à placer Button des contrôles jusqu’à ce qu’ils s’encapsulent à la ligne suivante.

  5. Remplacez la valeur de la propriété FlowLayoutPanel du contrôle WrapContents 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 tronqués.

  6. Remplacez la valeur de la propriété FlowLayoutPanel du contrôle WrapContents par true. Notez que les contrôles fils sont de nouveau encapsulés et passent à la ligne suivante.

  7. Réduisez la largeur du FlowLayoutPanel contrôle jusqu’à ce que tous les Button contrôles soient déplacés dans la première colonne.

  8. Augmentez la largeur du FlowLayoutPanel contrôle jusqu’à ce que tous les Button contrôles 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 FlowDirection propriété vous permet de modifier la direction dans laquelle les contrôles sont organisés. Vous pouvez organiser les contrôles enfants de haut en bas, de bas en haut, de gauche à droite ou de droite à gauche.

Pour modifier la direction du flux dans un FlowLayoutPanel

  1. Remplacez la valeur de la propriété FlowLayoutPanel du contrôle FlowDirection 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.

  2. Redimensionnez la FlowLayoutPanel afin que sa hauteur soit inférieure à la colonne de contrôles Button. Notez que le FlowLayoutPanel réorganise les contrôles enfant pour qu'ils s'agencent dans la colonne suivante. Continuez à diminuer la hauteur et notez que les contrôles enfants circulent dans des colonnes consécutives. Remplacez la valeur de la propriété FlowLayoutPanel du contrôle FlowDirection par RightToLeft. Remarquez que les positions des contrôles enfants sont inversées. Observez la disposition lorsque vous modifiez la valeur de la propriété FlowDirection à BottomUp.

Insertion de sauts de flux

Le FlowLayoutPanel contrôle dote ses contrôles enfants d'une propriété « FlowBreak ». La définition de la valeur de la propriété FlowBreak entraîne true une interruption FlowLayoutPanel de la disposition des contrôles dans le sens actuel du flux, et le passage à la ligne ou à la colonne suivante.

Pour insérer des sauts de flux

  1. Remplacez la valeur de la propriété FlowLayoutPanel du contrôle FlowDirection par TopDown.

  2. Sélectionnez l’un des Button contrôles au milieu de la colonne la plus à gauche.

  3. Définissez la propriété FlowBreak du contrôle Button à la valeur true. Notez que la colonne est cassée et que les contrôles qui suivent le contrôle sélectionné Button se déversent dans la colonne suivante. Définissez la propriété FlowBreak du contrôle Button sur la valeur false afin de revenir au comportement d’origine.

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

Les comportements d’amarrage et d’ancrage des contrôles enfants diffèrent des comportements dans d’autres contrôles de conteneur. L'amarrage et l'ancrage sont relatifs à la plus grande commande en fonction du flux.

Pour positionner les contrôles à l’aide du docking et de l’ancrage

  1. Augmentez la taille de FlowLayoutPanel jusqu'à ce que les contrôles Button soient tous organisés dans une colonne.

  2. Sélectionnez le contrôle principal Button. Augmentez sa largeur afin qu’elle soit environ deux fois plus large que les autres Button contrôles.

  3. Sélectionnez le deuxième Button contrôle. Changez la valeur de la propriété Anchor à Right. Notez qu’il est déplacé afin que sa bordure droite soit alignée sur la bordure droite de la première commande Button.

  4. Modifiez la valeur de la propriété Anchor à Right et Left. Notez qu’elle est dimensionnée à la même largeur que le premier Button contrôle.

  5. Sélectionnez le troisième Button contrôle. Changez la valeur de la propriété Dock à Fill. Notez qu’elle est dimensionnée à la même largeur que le premier Button contrôle.

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

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

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

La Margin propriété 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

  1. Remplacez la valeur de la propriété FlowLayoutPanel du contrôle Dock par Fill. Si votre formulaire est suffisamment grand, les contrôles Button seront déplacés dans la première colonne du contrôle FlowLayoutPanel.

  2. Modifiez la valeur de la FlowLayoutPanel propriété du Padding contrôle en développant l’entrée Padding dans la fenêtre Propriétés et en définissant la All propriété 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 FlowLayoutPanel contrôle. La valeur accrue de la Padding propriété envoie les contrôles enfants à l’écart des FlowLayoutPanel bordures du contrôle.

  3. Sélectionnez tous les Button contrôles dans la FlowLayoutPanel propriété et définissez la valeur de la Margin propriété sur 20. Notez que l’espacement entre les Button contrôles augmente, de sorte qu’ils sont déplacés plus loin. Vous devrez peut-être redimensionner le FlowLayoutPanel contrôle pour qu’il soit plus grand pour afficher tous les contrôles enfants.

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

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

  1. Double-cliquez sur l’icône Button de contrôle dans la boîte à outils. Notez qu’un nouveau Button contrôle apparaît dans le FlowLayoutPanel contrôle.

  2. Double-cliquez sur plusieurs contrôles supplémentaires dans la boîte à outils. Notez que les nouveaux contrôles apparaissent successivement dans le FlowLayoutPanel contrôle.

Insertion d’un contrôle en dessinant son contour

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

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

  1. Dans la boîte à outils, cliquez sur l'icône du Button contrôle. Ne le faites pas glisser sur le formulaire.

  2. Déplacez le pointeur de la souris sur l'élément de commande FlowLayoutPanel. Notez que le pointeur passe à un crosshair avec l’icône de Button contrôle attachée.

  3. Cliquez et maintenez le bouton de la souris enfoncé.

  4. 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 contrôle Button est créé à la prochaine position ouverte 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 élément de contrôle FlowLayoutPanel. Lorsque vous faites glisser un contrôle dans la FlowLayoutPanel zone cliente du contrôle, 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

  1. Faites glisser un Button contrôle de la boîte à outils vers le FlowLayoutPanel contrôle et pointez vers l’espace entre deux Button contrôles. 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 Button contrôle dans le contrôle FlowLayoutPanel, déplacez le pointeur de la souris pour observer comment se déplace la barre d’insertion.

  2. Déposez le nouveau Button contrôle dans le FlowLayoutPanel contrôle. Notez que le nouveau Button contrôle n’est pas aligné avec les autres, car sa Margin propriété 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 FlowLayoutPanel contrôle.

Pour réparer les contrôles existants

  1. Faites glisser trois Button contrôles de la boîte à outils sur le formulaire. Positionnez-les près les uns des autres, mais laissez-les non alignés.

  2. Dans la boîte à outils, cliquez sur l'icône du FlowLayoutPanel contrôle. Ne le faites pas glisser sur le formulaire.

  3. Déplacez le pointeur de la souris près des trois Button contrôles. Notez que le pointeur passe à un crosshair avec l’icône de FlowLayoutPanel contrôle attachée.

  4. Cliquez et maintenez le bouton de la souris enfoncé.

  5. Faites glisser le pointeur de la souris pour dessiner le contour du FlowLayoutPanel contrôle. Dessinez le contour autour des trois Button contrôles.

  6. Relâchez le bouton de la souris. Notez que les trois contrôles du Button sont au sein du contrôle FlowLayoutPanel.

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

  • Redimensionnez l’un des Button contrôles sur 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'ajout d’un TableLayoutPanel élément de contrôle dans l'élément de contrôle existant.

  • Ancrez le contrôle FlowLayoutPanel sur le formulaire parent. Redimensionnez le formulaire et notez l’effet sur la disposition.

  • Définissez la propriété Visible d’un des contrôles sur false et observez comment FlowLayoutPanel se réorganise en conséquence.

Voir aussi

  • Last updated on