Procédure pas à pas : organisation des contrôles dans des Windows Forms à l’aide d’un FlowLayoutPanelWalkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel

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.Some applications require a form with a layout that arranges itself appropriately as the form is resized or as the contents change in size. 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.When you need a dynamic layout and you do not want to handle Layout events explicitly in your code, consider using a layout panel.

Les contrôles FlowLayoutPanel et TableLayoutPanel vous permettent d’organiser de manière intuitive les contrôles sur votre formulaire.The FlowLayoutPanel control and the TableLayoutPanel control provide intuitive ways to arrange controls on your form. 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.Both provide an automatic, configurable ability to control the relative positions of child controls contained within them, and both give you dynamic layout features at run time, so they can resize and reposition child controls as the dimensions of the parent form change. 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.Layout panels can be nested within layout panels, to enable the realization of sophisticated user interfaces.

Le TableLayoutPanel réorganise son contenu dans une grille, fournir des fonctionnalités similaires dans le code HTML <table > élément.The TableLayoutPanel arranges its contents in a grid, providing functionality similar to the HTML <table> element. Ses cellules sont organisées dans des lignes et des colonnes dont la taille peut varier.Its cells are arranged in rows and columns, and these can have different sizes. Pour plus d’informations, consultez Procédure pas à pas : Organisation des contrôles dans les formulaires de Windows à l’aide d’un TableLayoutPanel.For more information, see Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel.

FlowLayoutPanel organise son contenu dans un sens de flux spécifique : horizontal ou vertical.The FlowLayoutPanel arranges its contents in a specific flow direction: horizontal or vertical. Vous pouvez encapsuler son contenu d'une ligne à la suivante ou d'une colonne à la suivante.Its contents can be wrapped from one row to the next, or from one column to the next. Vous pouvez également découper son contenu au lieu de l'encapsuler.Alternately, its contents can be clipped instead of wrapped. Cette procédure pas à pas décrit notamment les tâches suivantes :Tasks illustrated in this walkthrough include:

  • Création d’un projet Windows FormsCreating a Windows Forms project

  • Organisation de contrôles dans le sens horizontal ou verticalArranging Controls Horizontally and Vertically

  • Modification du sens du fluxChanging Flow Direction

  • Insertion d’interruptions de fluxInserting Flow Breaks

  • Organisation des contrôles en utilisant le remplissage et les margesArranging Controls Using Padding and Margins

  • Insertion de contrôles en double-cliquant dessus dans la boîte à outilsInserting Controls by Double-clicking Them in the Toolbox

  • Insertion d’un contrôle en dessinant son contourInserting a Control by Drawing Its Outline

  • Insertion de contrôles en utilisant le signe insertionInserting Controls Using the Caret

  • Réassignation de contrôles existants à un parent différentReassigning Existing Controls to a Different Parent

Lorsque vous avez terminé, vous aurez une compréhension du rôle joué par ces fonctionnalités de disposition importantes.When you are finished, you'll have an understanding of the role played by these important layout features.

Créer le projetCreate the project

  1. Dans Visual Studio, créez un projet d’application Windows appelé « FlowLayoutPanelExample » (fichier > New > projet > Visual C# ou Visual Basic > bureau classique > Windows Forms Application).In Visual Studio, create a Windows-based application project called "FlowLayoutPanelExample" (File > New > Project > Visual C# or Visual Basic > Classic Desktop > Windows Forms Application).

  2. Sélectionnez le formulaire dans le Concepteur de formulaires.Select the form in the Forms Designer.

Organisation de contrôles dans le sens horizontal ou verticalArranging Controls Horizontally and Vertically

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.The FlowLayoutPanel control allows you to place controls along rows or columns without requiring you to precisely specify the position of each individual control.

Le contrôle FlowLayoutPanel peut redimensionner ou ajuster dynamiquement ses contrôles enfants à mesure que les dimensions du formulaire parent changent.The FlowLayoutPanel control can resize or reflow its child controls as the dimensions of the parent form change.

Pour organiser les contrôles dans les sens horizontal et vertical à l’aide d’un FlowLayoutPanelTo arrange controls horizontally and vertically using a FlowLayoutPanel

  1. Faites glisser un contrôle FlowLayoutPanel de la boîte à outils vers le formulaire.Drag a FlowLayoutPanel control from the Toolbox onto your form.

  2. Faites glisser un contrôle Button de la boîte à outils vers le FlowLayoutPanel.Drag a Button control from the Toolbox into the FlowLayoutPanel. Notez qu’il se déplace automatiquement vers le coin supérieur gauche du contrôle FlowLayoutPanel .Note that it is automatically moved to the upper-left corner of the FlowLayoutPanel control.

  3. Faites glisser un autre contrôle Button de la boîte à outils vers le FlowLayoutPanel.Drag another Button control from the Toolbox into the FlowLayoutPanel. Notez que le contrôle Button se déplace automatiquement à proximité du contrôle Button .Note that the Button control is automatically moved to a position next to the first Button control. 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.If your FlowLayoutPanel is too narrow to fit the two controls on the same row, the new Button control is automatically moved to the next row.

  4. Faites glisser plusieurs autres contrôles Button de la boîte à outils vers le FlowLayoutPanel.Drag several more Button controls from the Toolbox into the FlowLayoutPanel. Continuez à placer des contrôles Button jusqu’à ce que l’un deux soit renvoyé à la ligne suivante.Continue placing Button controls until one wraps to the next row.

  5. Affectez la valeur FlowLayoutPanel à la propriété WrapContents du contrôle false.Change the value of the FlowLayoutPanel control's WrapContents property to false. Notez que les contrôles enfants ne passent plus à la ligne suivante.Note that the child controls no longer flow to the next row. Au lieu de cela, ils sont déplacés dans la première ligne et détourés.Instead, they are moved to the first row and clipped.

  6. Affectez la valeur FlowLayoutPanel à la propriété WrapContents du contrôle true.Change the value of the FlowLayoutPanel control's WrapContents property to true. Notez que les contrôles enfants sont à nouveau renvoyés à la ligne suivante.Note that the child controls again wrap to the next row.

  7. Diminuez la largeur du contrôle FlowLayoutPanel jusqu’à ce que tous les contrôles Button soient déplacés dans la première colonne.Decrease the width of the FlowLayoutPanel control until all the Button controls are moved into the first column.

  8. Augmentez la largeur du contrôle FlowLayoutPanel jusqu’à ce que tous les contrôles Button soient déplacés dans la première ligne.Increase the width of the FlowLayoutPanel control until all the Button controls are moved into the first row. Vous devrez peut-être redimensionner votre formulaire pour l’adapter à l’élargissement.You may need to resize your form to accommodate the greater width.

Modification du sens du fluxChanging Flow Direction

La propriété FlowDirection vous permet de modifier le sens dans lequel les contrôles sont organisés.The FlowDirection property allows you to change the direction in which controls are arranged. Vous pouvez organiser les contrôles enfants de gauche à droite, de droite à gauche, de haut en bas ou de bas en haut.You can arrange the child controls from left to right, from right to left, from top to bottom, or from bottom to top.

Pour modifier le sens du flux dans un FlowLayoutPanelTo change the flow direction in a FlowLayoutPanel

  1. Affectez la valeur FlowLayoutPanel à la propriété FlowDirection du contrôle TopDown.Change the value of the FlowLayoutPanel control's FlowDirection property to TopDown. Notez que les contrôles enfants sont réorganisés en une ou plusieurs colonnes, selon la hauteur du contrôle.Note that the child controls are rearranged into one or more columns, depending on the height of the control.

  2. Redimensionnez le FlowLayoutPanel de telle sorte que sa hauteur soit inférieure à la colonne des contrôles Button .Resize the FlowLayoutPanel so its height is shorter than the column of Button controls. Notez que le FlowLayoutPanel réorganise les contrôles enfants pour les placer dans la colonne suivante.Note that the FlowLayoutPanel rearranges the child controls to flow into the next column. Continuez à diminuer la hauteur et notez que les contrôles enfants passent dans les colonnes successives.Continue decreasing the height and note that the child controls flow into consecutive columns. Affectez la valeur FlowLayoutPanel à la propriété FlowDirection du contrôle RightToLeft.Change the value of the FlowLayoutPanel control's FlowDirection property to RightToLeft. Notez que la position des contrôles enfants est inversée.Note that the positions of the child controls are reversed. Observez la disposition quand vous affectez à la propriété FlowDirection la valeur BottomUp.Observe the layout when you change the value of the FlowDirection property to BottomUp.

Insertion d’interruptions de fluxInserting Flow Breaks

Le contrôle FlowLayoutPanel fournit une propriété FlowBreak à ses contrôles enfants.The FlowLayoutPanel control provides a FlowBreak property to its child controls. 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.Setting the value of the FlowBreak property to true causes the FlowLayoutPanel control to stop laying out controls in the current flow direction and wrap to the next row or column.

Pour insérer des interruptions de fluxTo insert flow breaks

  1. Affectez la valeur FlowLayoutPanel à la propriété FlowDirection du contrôle TopDown.Change the value of the FlowLayoutPanel control's FlowDirection property to TopDown.

  2. Sélectionnez l’un des contrôles Button au milieu de la colonne de gauche.Select one of the Button controls in the middle of the leftmost column.

  3. Affectez à la propriété FlowBreak du contrôle Button la valeur true.Set the value of the Button control's FlowBreak property to 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.Note that the column is broken and the controls following the selected Button control flow into the next column. Affectez à la propriété FlowBreak du contrôle Button la valeur false pour revenir au comportement d’origine.Set the value of the Button control's FlowBreak property to false to return to the original behavior.

Positionnement des contrôles en utilisant l’ancragePositioning Controls Using Docking and Anchoring

Le comportement de l’ancrage au niveau des contrôles enfants diffère de celui observé dans les autres contrôles conteneurs.Docking and anchoring behaviors of child controls differ from the behaviors in other container controls. L’ancrage se fait par rapport au plus grand contrôle dans le sens du flux.Both docking and anchoring are relative to the largest control in the flow direction.

Pour positionner les contrôles en utilisant l’ancrageTo position controls using docking and anchoring

  1. Augmentez la taille du FlowLayoutPanel jusqu’à ce que les contrôles Button soient tous organisés dans une colonne.Increase the size of the FlowLayoutPanel until the Button controls are all arranged in a column.

  2. Sélectionnez le contrôle Button du haut.Select the top Button control. Augmentez sa largeur de sorte qu’il soit deux fois plus large que les autres contrôles Button .Increase its width so that it is about twice as wide as the other Button controls.

  3. Sélectionnez le deuxième contrôle Button .Select the second Button control. Remplacez la valeur de sa propriété Anchor par Right.Change the value of its Anchor property to 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 .Note that it is moved so that its right border is aligned with the first Button control's right border.

  4. Remplacez la valeur de sa propriété Anchor par Right et Left.Change the value of its Anchor property to Right and Left. Notez que sa taille est calquée sur la largeur du premier contrôle Button .Note that it is sized to the same width as the first Button control.

  5. Sélectionnez le troisième contrôle Button .Select the third Button control. Remplacez la valeur de sa propriété Dock par Fill.Change the value of its Dock property to Fill. Notez que sa taille est calquée sur la largeur du premier contrôle Button .Note that it is sized to the same width as the first Button control.

Organisation des contrôles en utilisant le remplissage et les margesArranging Controls Using Padding and Margins

Vous pouvez aussi organiser les contrôles contenus dans le FlowLayoutPanel en modifiant les propriétés Padding et Margin .You can also arrange controls in your FlowLayoutPanel control by changing the Padding and Margin properties.

La propriété Padding vous permet de contrôler la position des contrôles dans une cellule du contrôle FlowLayoutPanel .The Padding property allows you to control the placement of controls within a FlowLayoutPanel control's cell. Elle spécifie l’espacement entre les contrôles enfants et la bordure du contrôle FlowLayoutPanel .It specifies the spacing between the child controls and the FlowLayoutPanel control's border.

La propriété Margin vous permet de contrôler l’espacement entre les contrôles.The Margin property allows you to control the spacing between controls.

Pour organiser les contrôles en utilisant les propriétés Padding et MarginTo arrange controls using the Padding and Margin properties

  1. Affectez la valeur FlowLayoutPanel à la propriété Dock du contrôle Fill.Change the value of the FlowLayoutPanel control's Dock property to Fill. Si votre formulaire est suffisamment grand, les contrôles Button se déplacent dans la première colonne du contrôle FlowLayoutPanel .If your form is large enough, the Button controls will be moved into the first column of the FlowLayoutPanel control.

  2. 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.Change the value of the FlowLayoutPanel control's Padding property by expanding the Padding entry in the Properties window and setting the All property to 20. Pour plus d’informations, consultez Procédure pas à pas : Disposition des Windows Forms contrôles avec les propriétés Padding, marges et la propriété AutoSize.For more information, see Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property. Notez que les contrôles enfants se déplacent vers le centre du contrôle FlowLayoutPanel .Note that the child controls are moved toward the center of the FlowLayoutPanel control. La valeur augmentée de la propriété Padding éloigne les contrôles enfants des bordures du contrôle FlowLayoutPanel .The increased value for the Padding property pushes the child controls away from the FlowLayoutPanel control's borders.

  3. Sélectionnez tous les contrôles Button contenus dans le FlowLayoutPanel et affectez à la propriété Margin la valeur 20.Select all of the Button controls in the FlowLayoutPanel and set the value of the Margin property to 20. Notez que l’espacement entre les contrôles Button augmente de façon à les écarter davantage.Note that the spacing between the Button controls increases, so they are moved further apart. Vous devrez peut-être agrandir le contrôle FlowLayoutPanel pour voir tous les contrôles enfants.You may need to resize the FlowLayoutPanel control to be larger to see all of the child controls.

Insertion de contrôles en double-cliquant dessus dans la boîte à outilsInserting Controls by Double-clicking Them in the Toolbox

Vous pouvez remplir votre contrôle FlowLayoutPanel en double-cliquant sur des contrôles dans la boîte à outils.You can populate your FlowLayoutPanel control by double-clicking controls in the Toolbox.

Pour insérer des contrôles en double-cliquant dessus dans la boîte à outilsTo insert controls by double-clicking in the Toolbox

  1. Double-cliquez sur l’icône de contrôle Button dans la boîte à outils.Double-click the Button control icon in the Toolbox. Notez qu’un nouveau contrôle Button s’affiche dans le contrôle FlowLayoutPanel .Note that a new Button control appears in the FlowLayoutPanel control.

  2. Double-cliquez sur plusieurs autres contrôles dans la boîte à outils.Double-click several more controls in the Toolbox. Notez que les nouveaux contrôles s’affichent successivement dans le contrôle FlowLayoutPanel .Note that the new controls appear successively in the FlowLayoutPanel control.

Insertion d’un contrôle en dessinant son contourInserting a Control by Drawing Its Outline

Vous pouvez insérer un contrôle dans un contrôle FlowLayoutPanel et spécifier sa taille en dessinant son contour dans une cellule.You can insert a control into a FlowLayoutPanel control and specify its size by drawing its outline in a cell.

Pour insérer un contrôle en dessinant son contourTo insert a Control by drawing its outline

  1. Dans la boîte à outils, cliquez sur l’icône de contrôle Button .In the Toolbox, click the Button control icon. Ne la faites pas glisser sur le formulaire.Do not drag it onto the form.

  2. Placez le pointeur de la souris sur le contrôle FlowLayoutPanel .Move the mouse pointer over the FlowLayoutPanel control. Notez que le pointeur devient une croix à laquelle est attachée l’icône de contrôle Button .Note that the pointer changes to a crosshair with the Button control icon attached.

  3. Cliquez et maintenez le bouton de la souris enfoncé.Click and hold the mouse button.

  4. Faites glisser le pointeur de la souris pour tracer le contour du contrôle Button .Drag the mouse pointer to draw the outline of the Button control. Quand la taille vous convient, relâchez le bouton de la souris.When you are satisfied with the size, release the mouse button. Notez que le contrôle Button est créé à l’emplacement ouvert suivant du contrôle FlowLayoutPanel .Note that the Button control is created in the next open location of the FlowLayoutPanel control.

Insertion de contrôles à l’aide de la barre d’insertionInserting Controls Using the Insertion Bar

Vous pouvez insérer des contrôles à un emplacement déterminé à l’intérieur d’un contrôle FlowLayoutPanel .You can insert controls at a specific position in a FlowLayoutPanel control. 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é.When you drag a control into the FlowLayoutPanel control's client area, an insertion bar appears to indicate where the control will be inserted.

Pour insérer un contrôle à l’aide du signe insertionTo insert a control using the caret

  1. 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 .Drag a Button control from the Toolbox into the FlowLayoutPanel control and point to the space between two Button controls. Notez qu’une barre d’insertion est dessinée, indiquant là où le Button sera placé lorsqu’il est déposé dans le FlowLayoutPanel contrôle.Note that an insertion bar is drawn, indicating where the Button will be placed when it is dropped into the FlowLayoutPanel control. 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.Before you drop the new Button control into the FlowLayoutPanel control, move the mouse pointer around to observe how the insertion bar moves.

  2. Déposez le nouveau contrôle Button dans le contrôle FlowLayoutPanel .Drop the new Button control into the FlowLayoutPanel control. Notez que le nouveau contrôle Button n’est pas aligné sur les autres, car sa propriété Margin a une valeur différente.Note that the new Button control is not aligned with the others, because its Margin property has a different value.

Réassignation de contrôles existants à un parent différentReassigning Existing Controls to a Different Parent

Vous pouvez assigner des contrôles existants de votre formulaire à un nouveau contrôle FlowLayoutPanel .You can assign controls that exist on your form to a new FlowLayoutPanel control.

Pour attribuer un nouveau parent aux contrôles existantsTo reparent existing controls

  1. Faites glisser trois contrôles Button de la boîte à outils vers le formulaire.Drag three Button controls from the Toolbox onto the form. Disposez-les près les uns des autres en les laissant non alignés.Position them near to each other, but leave them unaligned.

  2. Dans la boîte à outils, cliquez sur l’icône de contrôle FlowLayoutPanel .In the Toolbox, click the FlowLayoutPanel control icon. Ne la faites pas glisser sur le formulaire.Do not drag it onto the form.

  3. Placez le pointeur de la souris près des trois contrôles Button .Move the mouse pointer close to the three Button controls. Notez que le pointeur devient une croix à laquelle est attachée l’icône de contrôle FlowLayoutPanel .Note that the pointer changes to a crosshair with the FlowLayoutPanel control icon attached.

  4. Cliquez et maintenez le bouton de la souris enfoncé.Click and hold the mouse button.

  5. Faites glisser le pointeur de la souris pour tracer le contour du contrôle FlowLayoutPanel .Drag the mouse pointer to draw the outline of the FlowLayoutPanel control. Tracez le contour des trois contrôles Button .Draw the outline around the three Button controls.

  6. Relâchez le bouton de la souris.Release the mouse button. Notez que les trois contrôles Button sont insérés dans le contrôle FlowLayoutPanel .Note that the three Button controls are inserted into the FlowLayoutPanel control.

Étapes suivantesNext Steps

Vous pouvez obtenir une disposition complexe en combinant plusieurs contrôles et panneaux de disposition.You can achieve a complex layout using a combination of layout panels and controls. Suggestions pour des recherches approfondies :Suggestions for more exploration include:

  • Agrandissez l’un des contrôles Button et observez l’effet du redimensionnement sur la disposition.Resize one of the Button controls to a larger size and note the effect on the layout.

  • Les panneaux de disposition peuvent contenir d’autres panneaux de disposition.Layout panels can contain other layout panels. Faites l’expérience de déposer un contrôle TableLayoutPanel dans le contrôle existant.Experiment with dropping a TableLayoutPanel control into the existing control.

  • Ancrez le contrôle FlowLayoutPanel au formulaire parent.Dock the FlowLayoutPanel control to the parent form. Redimensionnez le formulaire et observez-en l’effet sur la disposition.Resize the form and note the effect on the layout.

  • 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.Set the Visible property of one of the controls to false and note how the FlowLayoutPanel reflows in response.

Voir aussiSee also