RSS

TableLayoutPanel

09 Feb

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 FlowDirection.LeftToRight and WrapContents set to true.

 

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

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.

 

TableLayoutPanel Tasks

Clicking on the Smart Tag icon Image:SmartTagGlyph.jpg causes a small menu to appear.

Image:526-39.jpg

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 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:

  1. Click on the Columns Collection in the property pane of the IDE.
  2. Click on the Rows Collection in the property pane of the IDE.
  3. The last menu item of the TableLayoutPanel Tasks menu (see above).
Image:526-40.jpg

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.

 

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

Image:526-41.jpg
Adding a second control

Image:526-42a.jpg
Adding a third control changes the order again.

Image:526-43.jpg
And a fourth control

Image:526-44.jpg
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.

Image:526-45.jpg
To correct the layout of the panel set the AutoSize property to true.

// Resize the TableLayoutPanel
tlp.AutoSize = true;

Image:526-46.jpg
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
)

 

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

Referenced by http://en.csharp-online.net/TableLayoutPanel

Advertisements
 
Leave a comment

Posted by on February 9, 2011 in C#, Window Application

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: