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.
Create a Windows-based application project called "FlowLayoutPanelExample". For more information, see How to: Create a Windows Application Project.
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.
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.
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.
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
falseto return to the original behavior.
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.
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.
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.
You can populate your FlowLayoutPanel control by double-clicking controls 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.
In the Toolbox, click the Button control icon. Do not drag it onto the form.
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.
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.
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 theFlowLayoutPanel 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.
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.
Click and hold the mouse button.
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