TableLayoutPanel

Microsoft .NET Framework, ASP.NET, Visual C# (CSharp, C Sharp, C-Sharp) Developer Training, Visual Studio

Exam 70-526 Preparation Guide: Group and arrange controls by using the TableLayoutPanel control.

1 Inheritance hierarchy
2 Useful properties
3 TableLayoutPanel Tasks
4 Column and Row Styles Editor
5 Adding a TableLayoutPanel manually
6 Adding controls manually
7 Editing Column and Row Styles manually
8 Merging Cells
9 MSDN references

The TableLayoutPanel control is a container control where child controls are added within a table structure. Each cell in the table contains a single control, unless a container such as a Panel is added first.

Assuming default values of zero for both ColumnCount and RowCount, this control mimics a FlowLayoutPanel instance with FlowDirection set to Horizontal and WrapContents set to True.

[edit]

Inheritance hierarchy

System.Object 
  System.MarshalByRefObject 
    System.ComponentModel.Component 
      System.Windows.Forms.Control 
        System.Windows.Forms.ScrollableControl 
          System.Windows.Forms.Panel
            System.Windows.Forms.TableLayoutPanel

[edit]

Useful properties

CellBorderStyle - This property determines if the cell is outlined with a border or not. A value from the TableLayoutPanelCellBorderStyle enumeration is required, the default value is None:
- Inset - A single-line sunken border.
- InsetDouble - A double-line sunken border.
- None - No borders.
- Outset - A single-line raised border.
- OutsetDouble - A double-line raised border.
- OutsetPartial - A single-line border containing a raised portion.
- Single - A single-line border.

ColumnCount - Determines the number of columns in the table.

ColumnStyles - A collection of column styles, one for each column in the TableLayoutPanel control.

Controls - Gets the collection of controls contained within the control.

GrowStyle - Determines whether the control should expand to accommodate new cells when all existing cells are occupied. A value from the TableLayoutPanelGrowStyle enumeration is required, the default value is AddRows:
- AddColumns - The TableLayoutPanel gains additional columns after it is full.
- AddRows - The TableLayoutPanel gains additional rows after it is full.
- FixedSize - The TableLayoutPanel does not allow additional rows or columns after it is full.

Note:

If an attempt is made to add a control to a full TableLayoutPanel control, and the value of GrowStyle is FixedSize, then an ArgumentException is thrown.

RowCount - Determines the number of rows in the table.

RowStyles - A collection of row styles, one for each row in the TableLayoutPanel control.

[edit]

`TableLayoutPanel` Tasks

Clicking on the Smart Tag icon causes a small menu to appear.

The menus items are pretty much self explanatory. The last menu item launches the Column and Row Styles Editor.

[edit]

Column and Row Styles Editor

The behaviour of each Row and Column can be independently defined through the RowStyles and ColumnStyles properties. These properties are not exposed through the properties pane of the IDE, but instead can be accessed through the virtual properties named Rows and Columns, and the Column and Row Styles Editor.

This editor can be launched in one of three ways:

Click on the Columns Collection in the property pane of the IDE.
Click on the Rows Collection in the property pane of the IDE.
The last menu item of the TableLayoutPanel Tasks menu (see above).

This dialog allows you to edit the SizeType property of each of the Columns and Rows in the TableLayoutPanel. The SizeType property determines how the Height (RowStyle) or Width (ColumnStyle) should be interpreted. A value from the SizeType enumeration is required, the default value is Percent:

Absolute - The row or column should be sized to an exact number of pixels.
AutoSize - The row or column should be automatically sized to share space with its peers.
Percent - The row or column should be sized as a percentage of the parent container.

[edit]

Adding a `TableLayoutPanel` manually

Adding a TableLayoutPanel at run time is a simple process:

// Create TableLayoutPanel
TableLayoutPanel tlp = new TableLayoutPanel();
 
// Set the BorderStyle to Inset
tlp.CellBorderStyle = TableLayoutPanelCellBorderStyle.Inset;
 
// Grid has two columns
tlp.ColumnCount = 2;
 
// Grid has two rows
tlp.RowCount = 2;
 
// If grid is full add extra cells by adding column
tlp.GrowStyle = TableLayoutPanelGrowStyle.AddColumns;
 
// Padding (pixels)within each cell (left, top, right, bottom)
tlp.Padding = new Padding(1, 1, 4, 5);
 
// Add TableLayoutPanel to the Forms controls
this.Controls.Add(tlp);

[edit]

Adding controls manually

Adding a control to a TableLayoutPanel at run time can be done in a couple of ways. Simply using the Add method with just the name of the control adds the control to the first available cell.

// Create buttons
Button button1 = new Button();
button1.Text = "Click Me";
 
// Add buttons to TableLayoutPanel
tlp.Controls.Add(button1);

Adding a second control

Adding a third control changes the order again.

And a fourth control

When a fifth control is added, the behaviour is determined by the GrowStyle property. In this case a column is added to accommodate the new control.

To correct the layout of the panel set the AutoSize property to true.

// Resize the TableLayoutPanel
tlp.AutoSize = true;

Alternatively, you can place controls in exactly the cell you want them by specifying the Row and Column. For instance: The following code is used to add a control to the second column and the first row.

// Add buttons to TableLayoutPanel
tlp.Controls.Add(button1, 1, 0);

The format for this version of the method is

public virtual void Add(
  Control control,
  int column,
  int row
)

[edit]

Editing `Column` and `Row` Styles manually

To change the Style of a Column or Row at run time, simply set the style:

tableLayoutPanel1.ColumnStyles[0].SizeType = SizeType.Absolute;
tableLayoutPanel1.ColumnStyles[0].Width = 20;
tableLayoutPanel1.RowStyles[0].SizeType = SizeType.Percent;
tableLayoutPanel1.RowStyles[0].Height = 50;

[edit]

Merging Cells

Cells can be merged in the TableLayoutPanel control by setting the ColumnSpan or RowSpan properties on a child control. To span two columns, either set the ColumnSpan property of the control to 2, or at run time use the SetColumnSpan method.