Walkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel

Artikel
02/06/2023

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

The FlowLayoutPanel control and the TableLayoutPanel control provide intuitive ways to arrange controls on your form. 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. Layout panels can be nested within layout panels, to enable the realization of sophisticated user interfaces.

The TableLayoutPanel arranges its contents in a grid, providing functionality similar to the HTML <table> element. Its cells are arranged in rows and columns, and these can have different sizes. For more information, see Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel.

The FlowLayoutPanel arranges its contents in a specific flow direction: horizontal or vertical. Its contents can be wrapped from one row to the next, or from one column to the next. Alternately, its contents can be clipped instead of wrapped. Tasks illustrated in this walkthrough include:

Creating a Windows Forms project
Arranging Controls Horizontally and Vertically
Changing Flow Direction
Inserting Flow Breaks
Arranging Controls Using Padding and Margins
Inserting Controls by Double-clicking Them in the Toolbox
Inserting a Control by Drawing Its Outline
Inserting Controls Using the Caret
Reassigning Existing Controls to a Different Parent

When you are finished, you'll have an understanding of the role played by these important layout features.

Create the project

In Visual Studio, create a Windows-based application project called "FlowLayoutPanelExample" (File > New > Project > Visual C# or Visual Basic > Classic Desktop > Windows Forms Application).
Select the form in the Forms Designer.

Arranging Controls Horizontally and Vertically

The FlowLayoutPanel control allows you to place controls along rows or columns without requiring you to precisely specify the position of each individual control.

The FlowLayoutPanel control can resize or reflow its child controls as the dimensions of the parent form change.

To arrange controls horizontally and vertically using a FlowLayoutPanel

Drag a FlowLayoutPanel control from the Toolbox onto your form.
Drag a Button control from the Toolbox into the FlowLayoutPanel. Note that it is automatically moved to the upper-left corner of the FlowLayoutPanel control.
Drag another Button control from the Toolbox into the FlowLayoutPanel. Note that the Button control is automatically moved to a position next to the first Button control. 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.
Drag several more Button controls from the Toolbox into the FlowLayoutPanel. Continue placing Button controls until one wraps to the next row.
Change the value of the FlowLayoutPanel control's WrapContents property to false. Note that the child controls no longer flow to the next row. Instead, they are moved to the first row and clipped.
Change the value of the FlowLayoutPanel control's WrapContents property to true. Note that the child controls again wrap to the next row.
Decrease the width of the FlowLayoutPanel control until all the Button controls are moved into the first column.
Increase the width of the FlowLayoutPanel control until all the Button controls are moved into the first row. You may need to resize your form to accommodate the greater width.

Changing Flow Direction

The FlowDirection property allows you to change the direction in which controls are arranged. You can arrange the child controls from left to right, from right to left, from top to bottom, or from bottom to top.

To change the flow direction in a FlowLayoutPanel

Change the value of the FlowLayoutPanel control's FlowDirection property to TopDown. Note that the child controls are rearranged into one or more columns, depending on the height of the control.
Resize the FlowLayoutPanel so its height is shorter than the column of Button controls. Note that the FlowLayoutPanel rearranges the child controls to flow into the next column. Continue decreasing the height and note that the child controls flow into consecutive columns. Change the value of the FlowLayoutPanel control's FlowDirection property to RightToLeft. Note that the positions of the child controls are reversed. Observe the layout when you change the value of the FlowDirection property to BottomUp.

Inserting Flow Breaks

The FlowLayoutPanel control provides a FlowBreak property to its child controls. 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.

To insert flow breaks

Change the value of the FlowLayoutPanel control's FlowDirection property to TopDown.
Select one of the Button controls in the middle of the leftmost column.
Set the value of the Button control's FlowBreak property to true. Note that the column is broken and the controls following the selected Button control flow into the next column. Set the value of the Button control's FlowBreak property to false to return to the original behavior.

Positioning Controls Using Docking and Anchoring

Docking and anchoring behaviors of child controls differ from the behaviors in other container controls. Both docking and anchoring are relative to the largest control in the flow direction.

To position controls using docking and anchoring

Increase the size of the FlowLayoutPanel until the Button controls are all arranged in a column.
Select the top Button control. Increase its width so that it is about twice as wide as the other Button controls.
Select the second Button control. Change the value of its Anchor property to Right. Note that it is moved so that its right border is aligned with the first Button control's right border.
Change the value of its Anchor property to Right and Left. Note that it is sized to the same width as the first Button control.
Select the third Button control. Change the value of its Dock property to Fill. Note that it is sized to the same width as the first Button control.

Arranging Controls Using Padding and Margins

You can also arrange controls in your FlowLayoutPanel control by changing the Padding and Margin properties.

The Padding property allows you to control the placement of controls within a FlowLayoutPanel control's cell. It specifies the spacing between the child controls and the FlowLayoutPanel control's border.

The Margin property allows you to control the spacing between controls.

To arrange controls using the Padding and Margin properties

Change the value of the FlowLayoutPanel control's Dock property to Fill. If your form is large enough, the Button controls will be moved into the first column of the FlowLayoutPanel control.
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. For more information, see Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property. Note that the child controls are moved toward the center of the FlowLayoutPanel control. The increased value for the Padding property pushes the child controls away from the FlowLayoutPanel control's borders.
Select all of the Button controls in the FlowLayoutPanel and set the value of the Margin property to 20. Note that the spacing between the Button controls increases, so they are moved further apart. You may need to resize the FlowLayoutPanel control to be larger to see all of the child controls.

Inserting Controls by Double-clicking Them in the Toolbox

You can populate your FlowLayoutPanel control by double-clicking controls in the Toolbox.

To insert controls by double-clicking in the Toolbox

Double-click the Button control icon in the Toolbox. Note that a new Button control appears in the FlowLayoutPanel control.
Double-click several more controls in the Toolbox. Note that the new controls appear successively in the FlowLayoutPanel control.

Inserting a Control by Drawing Its Outline

You can insert a control into a FlowLayoutPanel control and specify its size by drawing its outline in a cell.

To insert a Control by drawing its outline

In the Toolbox, click the Button control icon. Do not drag it onto the form.
Move the mouse pointer over the FlowLayoutPanel control. Note that the pointer changes to a crosshair with the Button control icon attached.
Click and hold the mouse button.
Drag the mouse pointer to draw the outline of the Button control. When you are satisfied with the size, release the mouse button. Note that the Button control is created in the next open location of the FlowLayoutPanel control.

Inserting Controls Using the Insertion Bar

You can insert controls at a specific position in a FlowLayoutPanel control. When you drag a control into the FlowLayoutPanel control's client area, an insertion bar appears to indicate where the control will be inserted.

To insert a control using the caret

Drag a Button control from the Toolbox into the FlowLayoutPanel control and point to the space between two Button controls. Note that an insertion bar is drawn, indicating where the Button will be placed when it is dropped into the FlowLayoutPanel control. Before you drop the new Button control into the FlowLayoutPanel control, move the mouse pointer around to observe how the insertion bar moves.
Drop the new Button control into the FlowLayoutPanel control. Note that the new Button control is not aligned with the others, because its Margin property has a different value.

Reassigning Existing Controls to a Different Parent

You can assign controls that exist on your form to a new FlowLayoutPanel control.

To reparent existing controls

Drag three Button controls from the Toolbox onto the form. Position them near to each other, but leave them unaligned.
In the Toolbox, click the FlowLayoutPanel control icon. Do not drag it onto the form.
Move the mouse pointer close to the three Button controls. Note that the pointer changes to a crosshair with the FlowLayoutPanel control icon attached.
Click and hold the mouse button.
Drag the mouse pointer to draw the outline of the FlowLayoutPanel control. Draw the outline around the three Button controls.
Release the mouse button. Note that the three Button controls are inserted into the FlowLayoutPanel control.

Next Steps

You can achieve a complex layout using a combination of layout panels and controls. Suggestions for more exploration include:

Resize one of the Button controls to a larger size and note the effect on the layout.
Layout panels can contain other layout panels. Experiment with dropping a TableLayoutPanel control into the existing control.
Dock the FlowLayoutPanel control to the parent form. Resize the form and note the effect on the layout.
Set the Visible property of one of the controls to false and note how the FlowLayoutPanel reflows in response.

Dela via