70-526 MCTS

• 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.

• 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.

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.

Column and Row Styles Editor

The behaviour of each Row and Column can be independantly 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 alows 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.

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);

Adding controls to a TableLayoutPanel 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 accomodate 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 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
)

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;

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.

tlp.SetColumnSpan(button1, 2);

To span two rows, either set the RowSpan property of the control to 2, or at run time use the SetRowSpan method.

tlp.SetRowSpan(button1, 2);

MSDN references