Walkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel
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 will have an understanding of the role played by these important layout features.
The dialog boxes and menu commands you see might differ from those described in Help depending on your active settings or edition. To change your settings, choose Import and Export Settings on the Tools menu. For more information, see Customizing Development Settings in Visual Studio.
The first step is to create the project and set up the form.
To create the project
Create a Windows-based application project called "FlowLayoutPanelExample". For more information, see b2f93fed-c635-4705-8d0e-cf079a264efa.
Select the form in the Forms Designer.
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 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.
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
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.
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
Select one of the Button controls in the middle of the leftmost column.
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
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 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.
You can populate your FlowLayoutPanel control by double-clicking controls in the Toolbox.
To insert controls by double-clicking in the Toolbox
Double-click several more controls in the Toolbox. Note that the new controls appear successively in the FlowLayoutPanel control.
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.
Click and hold the mouse button.
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.
You can assign controls that exist on your form to a new FlowLayoutPanel control.
To reparent existing controls
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.
Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel
Walkthrough: Arranging Controls on Windows Forms Using Snaplines
Microsoft Windows User Experience, Official Guidelines for User Interface Developers and Designers. Redmond, WA: Microsoft Press, 1999. (USBN: 0-7356-0566-1)
AutoSize Property Overview
How to: Dock Controls on Windows Forms
How to: Anchor Controls on Windows Forms
Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property