Events
Mar 17, 11 PM - Mar 21, 11 PM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowThis browser is no longer supported.
Upgrade to Microsoft Edge to take advantage of the latest features, security updates, and technical support.
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 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. For more information, see Walkthrough: Arranging Controls on Windows Forms Using a FlowLayoutPanel.
The TableLayoutPanel arranges its contents in a grid, providing functionality similar to the HTML <table> element. The TableLayoutPanel control allows you to place controls in a grid layout without requiring you to precisely specify the position of each individual control. Its cells are arranged in rows and columns, and these can have different sizes. Cells can be merged across rows and columns. Cells can contain anything a form can contain and behave in most other respects as containers.
The TableLayoutPanel control also provides a proportional resizing capability at run time, so your layout can change smoothly as your form is resized. This makes the TableLayoutPanel control well suited for purposes such as data-entry forms and localized applications. For more information, see Walkthrough: Creating a Resizable Windows Form for Data Entry and Walkthrough: Creating a Localizable Windows Form.
In general, you should not use a TableLayoutPanel control as a container for the whole layout. Use TableLayoutPanel controls to provide proportional resizing capabilities to parts of the layout.
Tasks illustrated in this walkthrough include:
Creating a Windows Forms project
Arranging Controls in Rows and Columns
Setting Row and Column Properties
Spanning Rows and Columns with a Control
Automatic Handling of Overflows
Inserting Controls by Double-clicking Them in the Toolbox
Inserting a Control by Drawing Its Outline
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 first step is to create the project and set up the form.
Create a Windows Application project called "TableLayoutPanelExample". For more information, see How to: Create a Windows Forms application project .
Select the form in the Windows Forms Designer.
The TableLayoutPanel control allows you to easily arrange controls into rows and columns.
Drag a TableLayoutPanel control from the Toolbox onto your form. Note that, by default, the TableLayoutPanel control has four cells.
Drag a Button control from the Toolbox into the TableLayoutPanel control and drop it into one of the cells. Note that the Button control is created within the cell you selected.
Drag three more Button controls from the Toolbox into the TableLayoutPanel control, so that each cell contains a button.
Grab the vertical sizing handle between the two columns and move it to the left. Note that the Button controls in the first column are resized to a smaller width, while size of the Button controls in the second column is unchanged.
Grab the vertical sizing handle between the two columns and move it to the right. Note that the Button controls in the first column return to their original size, while the Button controls in the second column are moved to the right.
Move the horizontal sizing handle up and down to see the effect on the controls in the panel.
The anchoring behavior of child controls in a TableLayoutPanel differs from the behavior in other container controls. The docking behavior of child controls is the same as other container controls.
Select the first Button control. Change the value of its Dock property to Fill. Note that the Button control expands to fill its cell.
Select one of the other Button controls. Change the value of its Anchor property to Right. Note that it is moved so that its right border is near the right border of the cell. The distance between the borders is the sum of the Button control's Margin property and the panel's Padding property.
Change the value of the Button control's Anchor property to Right and Left. Note that the control is sized to the width of the cell, with the Margin and Padding values taken into account.
You can set individual properties of rows and columns by using the RowStyles and ColumnStyles collections.
Select the TableLayoutPanel control in the Windows Forms Designer.
In the Properties windows, open the ColumnStyles collection by clicking the ellipsis () button next to the Columns entry.
Select the first column and change the value of its SizeType property to AutoSize. Click OK to accept the change. Note that the width of the first column is reduced to fit the Button control. Also note that the width of the column is not resizable.
In the Properties window, open the ColumnStyles collection and select the first column. Change the value of its SizeType property to Percent. Click OK to accept the change. Resize the TableLayoutPanel control to a larger width and note that the width of the first column expands. Resize the TableLayoutPanel control to a smaller width and note that the buttons in the first column are sized to fit the cell. Also note that the width of the column is resizable.
In the Properties window, open the ColumnStyles collection and select all the listed columns. Set the value of every SizeType property to Percent. Click OK to accept the change. Repeat with the RowStyles collection.
Grab one of the corner resizing handles and resize both the width and height of the TableLayoutPanel control. Note that the rows and columns are resized as the TableLayoutPanel control's size changes. Also note that the rows and columns are resizable with the horizontal and vertical sizing handles.
The TableLayoutPanel control adds several new properties to controls at design time. Two of these properties are RowSpan
and ColumnSpan
. You can use these properties to make a control span more than one row or column.
Select the Button control in the first row and first column.
In the Properties windows, change the value of the ColumnSpan
property to 2. Note that the Button control fills the first column and the second column. Also note than an extra row has been added to accommodate this change.
Repeat step 2 for the RowSpan
property.
You can populate your TableLayoutPanel control by double-clicking controls in the Toolbox.
Drag a TableLayoutPanel control from the Toolbox onto your form.
Double-click the Button control icon in the Toolbox. Note that a new button control appears in the TableLayoutPanel control's first cell.
Double-click several more controls in the Toolbox. Note that the new controls appear successively in the TableLayoutPanel control's unoccupied cells. Also note that the TableLayoutPanel control expands to accommodate the new controls if no open cells are available.
When you are inserting controls into the TableLayoutPanel control, you may run out of empty cells for your new controls. The TableLayoutPanel control handles this situation automatically by increasing the number of cells.
If there are still empty cells in the TableLayoutPanel control, continue inserting new Button controls until the TableLayoutPanel control is full.
Once the TableLayoutPanel control is full, double-click the Button icon in the Toolbox to insert another Button control. Note that the TableLayoutPanel control creates new cells to accommodate the new control. Insert a few more controls and observe the resizing behavior.
Change the value of the TableLayoutPanel control's GrowStyle property to FixedSize. Double-click the Button icon in the Toolbox to insert Button controls until the TableLayoutPanel control is full. Double-click the Button icon in the Toolbox again. Note that you receive an error message from the Windows Forms Designer informing you that additional rows and columns cannot be created.
You can insert a control into a TableLayoutPanel control and specify its size by drawing its outline in a cell.
Drag a TableLayoutPanel control from the Toolbox onto your form.
In the Toolbox, click the Button control icon. Do not drag it onto the form.
Move the mouse pointer over the TableLayoutPanel 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 cell in which you drew the control's outline.
The TableLayoutPanel control can contain only one child control per cell.
The TableLayoutPanel control enables you to swap the controls occupying two different cells.
You can achieve a complex layout using a combination of layout panels and controls. Suggestions for more exploration include:
Try resizing one of the Button controls to a larger size and note the effect on the layout.
Paste a selection of multiple controls into the TableLayoutPanel control and note how the controls are inserted.
Layout panels can contain other layout panels. Experiment with dropping a TableLayoutPanel control into the existing control.
Dock the TableLayoutPanel control to the parent form. Resize the form and note the effect on the layout.
.NET Desktop feedback feedback
.NET Desktop feedback is an open source project. Select a link to provide feedback:
Events
Mar 17, 11 PM - Mar 21, 11 PM
Join the meetup series to build scalable AI solutions based on real-world use cases with fellow developers and experts.
Register nowTraining
Module
Customize layout in .NET MAUI XAML pages - Training
Create consistent user interfaces across different devices by using StackLayout and Grid.
Documentation
How to: Span Rows and Columns in a TableLayoutPanel Control - Windows Forms .NET Framework
Learn how to span rows and columns in a TableLayoutPanel control in Windows Forms via this 5-step procedure.
AutoSize Behavior in the TableLayoutPanel Control - Windows Forms .NET Framework
Learn more about how to autosize behavior in the TableLayoutPanel control in Windows Forms, which supports automatic sizing behavior in two ways.
How to: Anchor and Dock Child Controls in a TableLayoutPanel Control - Windows Forms .NET Framework
Learn how to anchor, dock, align, and stretch child controls in a TableLayoutPanel control by adjusting the value of properties.