Use the TableLayoutPanel control in C#


Much ado is made of WPF’s Grid control, and rightly so because it’s a pretty powerful control. However, many developers forget that Windows Forms has a TableLayoutPanel control that provides many of the same features.

Place the control on a form. If you select the control, its Smart Tag lets you add, remove, and edit its rows and columns.

If you click the Smart Tag’s “Edit Rows and Columns” command, a dialog appears that lets you add and remove rows and columns, and set row and column sizes. You can set a row’s/column’s height/width to an absolute value in pixels, to a percentage, or to AutoSize to make it resize to fit its contents. (Percentage sizes aren’t really percentages. Instead they’re relative values. For example, if you have two columns with percentages set to 50% and 25%, then they’re resized so one is always twice as big as the other.)

If you resize the control, its rows and columns resize automatically as appropriate. For example, suppose you want to divide a form into two equally sized halves. To do that, you can use a TableLayoutPanel with Dock = Fill and with two columns having widths set to 50%. Now when you or the user resize the form, the columns automatically resize to divide up the form’s area.

After you build the TableLayoutPanel, you can add controls to it. You can then set a control’s RowSpan and ColumnSpan properties to make the control span more than one row or column.

By default, a control is aligned to the upper left corner of its panel cell. Use the control’s Anchor properties to align it in a different way. For example, the Anchor value None centers the control in its cell. The value Top, Bottom, Left, Right makes the control stretch to fill its cell. (Alternatively set its Dock property to Fill.) Use a control’s Margin property to add some room around the control so controls in adjacent cells don’t touch.

The example program uses a TableLayoutPanel control with two columns and three rows. The first row has a fixed height of 30 pixels. The other two rows have heights of 33.33% and 66.66%, so the second row is always twice as tall as the first. The columns have widths of 50% so they equally divide the form horizontally.

The top left cell contains a Label with Dock = Fill and TextAlign = MiddleCenter. It also has ColumnSpan = 2 so it fills the entire first row.

The smiley PictureBox on the lower left has SizeMode = Zoom so it resizes its picture to display it at the largest size possible without squashing or stretching it. The smiley has a white background so, if the PictureBox were to display only the picture, there would be non-white areas in the cell where the form’s background would show through.

A cell can hold only a single control, so to solve this problem that cell actually contains a Panel (with BackColor = White and Dock = Fill) and that control contains the PictureBox (also with Dock = Fill).

Finally, the lower right cell contains a PictureBox (with Anchor = Top, Bottom, Left, Right and SizeMode = Zoom) that displays a C# Helper banner.

Take a few minutes to experiment with the TableLayoutPanel control. Then when you need it later, you may remember that it exists.

Edit rows and columns

Download Example   Follow me on Twitter   RSS feed

This entry was posted in controls and tagged , , , , , , , , , , , , . Bookmark the permalink.

6 Responses to Use the TableLayoutPanel control in C#

  1. comment says:

    there is no exist code in the form.
    and not example with code or design.

  2. Rod Stephens says:

    Yes, this example has no code. It doesn’t need any. It’s about using the TableLayoutControl to arrange controls in possibly complex patterns and you can do it all at design time. Give it a try.

    If you download the example, you can run it and see how the control resizes the example’s buttons as you resize the form.

  3. Adrian says:

    Another great article, Rod.
    Suppose I create a control at design time. Now I want to replicate that control into every element of an NxM table; think of chess-board and wanting all 64 squares to be instances of the same control. How do I do the replication at either design or run time? And, how do I access the individual controls at run time. Perhaps this is a well documented and described problem but I have not found the correct search terms for a web search.

    • RodStephens says:

      There are a couple of ways you can create the controls. The easiest is to just make one control and copy and paste it all at design time.

      You can also make controls at run time. In that case, you need to use code to set their properties and hook up their event handlers. See this example: Create controls for a tic-tac-toe application at run time in C#.

      As for how you access the controls in code, if you create them at design time, then you can simply use their names. If you peek at the automatically generated code behind the form, you’ll see that Visual Studio makes a variable to represent each control. That’s how you refer to them by name.

      If you make the controls with code, then you can do something similar and make variables for them all.

  4. peter says:

    I’m a user , i didnt get how you changed the cell background color

    • RodStephens says:

      Actually the color of the TableLayoutPanel’s cells is not colored. Some of the cells contain Label controls and those have colored backgrounds.

      If you want colored cells, put something in there such as a Panel that can contain other controls. Set its BackColor property and set Dock = Fill. Then you can place other controls inside it and it acts as if the cell has been colored.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.