--- title: Arrange Controls Using FlowLayoutPanel description: Learn how to use the FlowLayoutPanel control and the TableLayoutPanel control to provide intuitive ways to arrange controls in your Windows Forms project. ms.date: "03/30/2017" helpviewer_keywords: - "FlowLayoutPanel control [Windows Forms], walkthroughs" - "Windows Forms controls, arranging" - "controls [Windows Forms], arranging with FlowLayoutPanel" - "layout [Windows Forms], walkthroughs" ms.assetid: a1744323-0316-49c2-992e-ebfc0a976b85 --- # 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 events explicitly in your code, consider using a layout panel. The control and the 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 arranges its contents in a grid, providing functionality similar to the HTML \ 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](walkthrough-arranging-controls-on-windows-forms-using-a-tablelayoutpanel.md). The 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 1. 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. Select the form in the **Forms Designer**. ## Arranging Controls Horizontally and Vertically The control allows you to place controls along rows or columns without requiring you to precisely specify the position of each individual control. The 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 1. Drag a control from the **Toolbox** onto your form. 2. Drag a control from the **Toolbox** into the . Note that it is automatically moved to the upper-left corner of the control. 3. Drag another control from the **Toolbox** into the . Note that the control is automatically moved to a position next to the first control. If your is too narrow to fit the two controls on the same row, the new control is automatically moved to the next row. 4. Drag several more controls from the **Toolbox** into the . Continue placing controls until one wraps to the next row. 5. Change the value of the control's 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. 6. Change the value of the control's property to `true`. Note that the child controls again wrap to the next row. 7. Decrease the width of the control until all the controls are moved into the first column. 8. Increase the width of the control until all the controls are moved into the first row. You may need to resize your form to accommodate the greater width. ## Changing Flow Direction The 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 1. Change the value of the control's property to . Note that the child controls are rearranged into one or more columns, depending on the height of the control. 2. Resize the so its height is shorter than the column of controls. Note that the 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 control's property to . Note that the positions of the child controls are reversed. Observe the layout when you change the value of the property to . ## Inserting Flow Breaks The control provides a FlowBreak property to its child controls. Setting the value of the FlowBreak property to `true` causes the control to stop laying out controls in the current flow direction and wrap to the next row or column. ### To insert flow breaks 1. Change the value of the control's property to . 2. Select one of the controls in the middle of the leftmost column. 3. Set the value of the control's FlowBreak property to `true`. Note that the column is broken and the controls following the selected control flow into the next column. Set the value of the 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 1. Increase the size of the until the controls are all arranged in a column. 2. Select the top control. Increase its width so that it is about twice as wide as the other controls. 3. Select the second control. Change the value of its property to . Note that it is moved so that its right border is aligned with the first control's right border. 4. Change the value of its property to and . Note that it is sized to the same width as the first control. 5. Select the third control. Change the value of its property to . Note that it is sized to the same width as the first control. ## Arranging Controls Using Padding and Margins You can also arrange controls in your control by changing the and properties. The property allows you to control the placement of controls within a control's cell. It specifies the spacing between the child controls and the control's border. The property allows you to control the spacing between controls. ### To arrange controls using the Padding and Margin properties 1. Change the value of the control's property to . If your form is large enough, the controls will be moved into the first column of the control. 2. Change the value of the control's property by expanding the entry in the **Properties** window and setting the property to **20**. For more information, see [Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property](windows-forms-controls-padding-autosize.md). Note that the child controls are moved toward the center of the control. The increased value for the property pushes the child controls away from the control's borders. 3. Select all of the controls in the and set the value of the property to **20**. Note that the spacing between the controls increases, so they are moved further apart. You may need to resize the control to be larger to see all of the child controls. ## Inserting Controls by Double-clicking Them in the Toolbox You can populate your control by double-clicking controls in the **Toolbox**. ### To insert controls by double-clicking in the Toolbox 1. Double-click the control icon in the **Toolbox**. Note that a new control appears in the control. 2. Double-click several more controls in the **Toolbox**. Note that the new controls appear successively in the control. ## Inserting a Control by Drawing Its Outline You can insert a control into a control and specify its size by drawing its outline in a cell. ### To insert a Control by drawing its outline 1. In the **Toolbox**, click the control icon. Do not drag it onto the form. 2. Move the mouse pointer over the control. Note that the pointer changes to a crosshair with the control icon attached. 3. Click and hold the mouse button. 4. Drag the mouse pointer to draw the outline of the control. When you are satisfied with the size, release the mouse button. Note that the control is created in the next open location of the control. ## Inserting Controls Using the Insertion Bar You can insert controls at a specific position in a control. When you drag a control into the control's client area, an insertion bar appears to indicate where the control will be inserted. ### To insert a control using the caret 1. Drag a control from the **Toolbox** into the control and point to the space between two controls. Note that an insertion bar is drawn, indicating where the will be placed when it is dropped into the control. Before you drop the new control into the control, move the mouse pointer around to observe how the insertion bar moves. 2. Drop the new control into the control. Note that the new control is not aligned with the others, because its property has a different value. ## Reassigning Existing Controls to a Different Parent You can assign controls that exist on your form to a new control. ### To reparent existing controls 1. Drag three controls from the **Toolbox** onto the form. Position them near to each other, but leave them unaligned. 2. In the **Toolbox**, click the control icon. Do not drag it onto the form. 3. Move the mouse pointer close to the three controls. Note that the pointer changes to a crosshair with the control icon attached. 4. Click and hold the mouse button. 5. Drag the mouse pointer to draw the outline of the control. Draw the outline around the three controls. 6. Release the mouse button. Note that the three controls are inserted into the 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 controls to a larger size and note the effect on the layout. - Layout panels can contain other layout panels. Experiment with dropping a control into the existing control. - Dock the control to the parent form. Resize the form and note the effect on the layout. - Set the property of one of the controls to `false` and note how the reflows in response. ## See also - - - [Walkthrough: Arranging Controls on Windows Forms Using a TableLayoutPanel](walkthrough-arranging-controls-on-windows-forms-using-a-tablelayoutpanel.md) - [Walkthrough: Arranging Controls on Windows Forms Using Snaplines](walkthrough-arranging-controls-on-windows-forms-using-snaplines.md) - [AutoSize Property Overview](autosize-property-overview.md) - [How to: Dock Controls on Windows Forms](how-to-dock-controls-on-windows-forms.md) - [How to: Anchor Controls on Windows Forms](how-to-anchor-controls-on-windows-forms.md) - [Walkthrough: Laying Out Windows Forms Controls with Padding, Margins, and the AutoSize Property](windows-forms-controls-padding-autosize.md)