TablePanelLayout: An Overview
The .net framework 2.0 has brought a few new controls to the winform environment. Among these new controls is the TableLayoutControl. At first glance, one might wonder why there is a need for this new control. It is easy to drag and drop controls exactly where you want them in a windows form. The control does exactly what it says, displays data in a table format. This technique is common to web developers. With correct table design it is possible to make very interesting layouts on the screen. This has now been ported to the desktop, but is it as useful as expected?
The TableLayoutPanel can be found during design time in the toolbox under Containers. When you first drag the control onto the form it will prompt you with a dialog to set up its rows and columns. By default, the panel has 2 rows and 2 columns. The panel is now ready to be set up how it is needed. Row and column spanning is fully supported.
So how are controls added to the table? Controls are added in design time by dragging the control into a cell. The first thing you should start to notice is that a cell can only contain one control. As a control is dragged over a cell with a control already in it, the drag icon signals that the item cannot be dropped there. This appears to be the first limitation with the tablelayoutpanel. To get around this limitation, one would have to create a custom composite control to use. This would allow multiple controls to be placed into a single cell. Adding controls at runtime is done by calling the TableLayoutPanel.Controls.Add method. Controls are added to the next available cell.
The tablelayoutpanel’s GrowStyle property determines how the cells are added at runtime. The GrowStyle property has three values:
- Fixed Size – This value does not allow adding more columns or rows then what was set up initially. An attempt to add a control when the table is full will result in a ArgumentException.
- AddColumns – This value means that when new controls are added and the table is full, it will automatically add a new column and add the control there.
- AddRows (default) – This value means that when new controls are added and the table is full, it will automatically add a new row and add the control there.
If you have already tried the tablelayoutpanel you might have found that all of your data is not displayed. By default, the control sets the AutoSize property to false. When adding controls at runtime it is easy to overrun the the bounds of the default grid. Setting the AutoSize to True will allow the grid to grow with the data.
When a control is added to the tablelayoutpanel it provides four new properties (although the properties actually exist in the panel and not in the control):
- Column – This represents the column index of the control.
- ColumnSpan – This represents the number of columns the control spans.
- Row – This represents the row index of the control.
- RowSpan – This represents the number of rows the control spans.
The listed properties are available during design time by editing them in the properties window of the specified control. These properties are only available during runtime by using the following methods of the TableLayoutPanel:
- SetColumnSpan – Sets the column span of the specified control.
- SetColumn – Sets the column index of the specified control.
- SetRowSpan – Sets the row span of the specified control.
- SetRow – Sets the row of the specified control.
An example would be:
TableLayout1.SetColumnSpan(2,Label1)
Here is an example of a table that has 2 buttons side by side followed by an image below them (repeated).
Create a windows form and add a tablelayoutpanel.
Set the AutoSize property to true.
Leave the default 2×2 table layout.
In the Form_Load event add the following code.
For _index as Int32 = 0 to 3
Dim _button1 as New Button
_button1.Text = "Save"
TableLayoutPanel1.Controls.Add(_button1)
Dim _button2 as New Button
_button2.Text = "Print"
TableLayoutPanel1.Controls.Add(_button2)
Dim _picBox as new PictureBox
_picBox.Image = Image.fromFile("C:\filePath.jpg")
TableLayoutPanel1.Controls.Add(_picBox)
'Add the column spanning for the photo.
TableLayoutPanel1.SetColumnSpan(2,_picBox)
Next
After running this code you should see a table with two buttons above an image repeated a few times. The next question would be how to change the column widths and heights. There is another post about this that you can view. It is performed by using the row and column style classes.
The TablePanelLayout control can be useful when the situation is right. Many people are against the new panel but after gaining a solid understanding of the control, it can be very useful.
(this was originally posted on my original blog on 7/10/2006)
Comments
Follow Us
