Winforms TableLayoutPanel adding rows programmatically
Solution 1
I just did this last week. Set the GrowStyle
on the TableLayoutPanel
to AddRows
or AddColumns
, then your code should work:
// Adds "myControl" to the first column of each row
myTableLayoutPanel.Controls.Add(myControl1, 0 /* Column Index */, 0 /* Row index */);
myTableLayoutPanel.Controls.Add(myControl2, 0 /* Column Index */, 1 /* Row index */);
myTableLayoutPanel.Controls.Add(myControl3, 0 /* Column Index */, 2 /* Row index */);
Here is some working code that seems similar to what you are doing:
private Int32 tlpRowCount = 0;
private void BindAddress()
{
Addlabel(Addresses.Street);
if (!String.IsNullOrEmpty(Addresses.Street2))
{
Addlabel(Addresses.Street2);
}
Addlabel(Addresses.CityStateZip);
if (!String.IsNullOrEmpty(Account.Country))
{
Addlabel(Address.Country);
}
Addlabel(String.Empty); // Notice the empty label...
}
private void Addlabel(String text)
{
label = new Label();
label.Dock = DockStyle.Fill;
label.Text = text;
label.TextAlign = System.Drawing.ContentAlignment.MiddleLeft;
tlpAddress.Controls.Add(label, 1, tlpRowCount);
tlpRowCount++;
}
The TableLayoutPanel
always gives me fits with size. In my example above, I'm filing an address card that might grow or shrink depending on the account having an address line two, or a country. Because the last row, or column, of the table layout panel will stretch, I throw the empty label in there to force a new empty row, then everything lines up nicely.
Here is the designer code so you can see the table I start with:
//
// tlpAddress
//
this.tlpAddress.AutoSize = true;
this.tlpAddress.BackColor = System.Drawing.Color.Transparent;
this.tlpAddress.ColumnCount = 2;
this.tlpAddress.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Absolute, 25F));
this.tlpAddress.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 100F));
this.tlpAddress.Controls.Add(this.pictureBox1, 0, 0);
this.tlpAddress.Dock = System.Windows.Forms.DockStyle.Fill;
this.tlpAddress.Location = new System.Drawing.Point(0, 0);
this.tlpAddress.Name = "tlpAddress";
this.tlpAddress.Padding = new System.Windows.Forms.Padding(3);
this.tlpAddress.RowCount = 2;
this.tlpAddress.RowStyles.Add(new System.Windows.Forms.RowStyle());
this.tlpAddress.RowStyles.Add(new System.Windows.Forms.RowStyle());
this.tlpAddress.Size = new System.Drawing.Size(220, 95);
this.tlpAddress.TabIndex = 0;
Solution 2
It's a weird design, but the TableLayoutPanel.RowCount
property doesn't reflect the count of the RowStyles
collection, and similarly for the ColumnCount
property and the ColumnStyles
collection.
What I've found I needed in my code was to manually update RowCount
/ColumnCount
after making changes to RowStyles
/ColumnStyles
.
Here's an example of code I've used:
/// <summary>
/// Add a new row to our grid.
/// </summary>
/// The row should autosize to match whatever is placed within.
/// <returns>Index of new row.</returns>
public int AddAutoSizeRow()
{
Panel.RowStyles.Add(new RowStyle(SizeType.AutoSize));
Panel.RowCount = Panel.RowStyles.Count;
mCurrentRow = Panel.RowCount - 1;
return mCurrentRow;
}
Other thoughts
I've never used
DockStyle.Fill
to make a control fill a cell in the Grid; I've done this by setting theAnchors
property of the control.If you're adding a lot of controls, make sure you call
SuspendLayout
andResumeLayout
around the process, else things will run slow as the entire form is relaid after each control is added.
Solution 3
Here's my code for adding a new row to a two-column TableLayoutColumn:
private void AddRow(Control label, Control value)
{
int rowIndex = AddTableRow();
detailTable.Controls.Add(label, LabelColumnIndex, rowIndex);
if (value != null)
{
detailTable.Controls.Add(value, ValueColumnIndex, rowIndex);
}
}
private int AddTableRow()
{
int index = detailTable.RowCount++;
RowStyle style = new RowStyle(SizeType.AutoSize);
detailTable.RowStyles.Add(style);
return index;
}
The label control goes in the left column and the value control goes in the right column. The controls are generally of type Label and have their AutoSize property set to true.
I don't think it matters too much, but for reference, here is the designer code that sets up detailTable:
this.detailTable.ColumnCount = 2;
this.detailTable.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle());
this.detailTable.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle());
this.detailTable.Dock = System.Windows.Forms.DockStyle.Fill;
this.detailTable.Location = new System.Drawing.Point(0, 0);
this.detailTable.Name = "detailTable";
this.detailTable.RowCount = 1;
this.detailTable.RowStyles.Add(new System.Windows.Forms.RowStyle());
this.detailTable.Size = new System.Drawing.Size(266, 436);
this.detailTable.TabIndex = 0;
This all works just fine. You should be aware that there appear to be some problems with disposing controls from a TableLayoutPanel dynamically using the Controls property (at least in some versions of the framework). If you need to remove controls, I suggest disposing the entire TableLayoutPanel and creating a new one.
Solution 4
Create a table layout panel with two columns in your form and name it tlpFields
.
Then, simply add new control to table layout panel (in this case I added 5 labels in column-1 and 5 textboxes in column-2).
tlpFields.RowStyles.Clear(); //first you must clear rowStyles
for (int ii = 0; ii < 5; ii++)
{
Label l1= new Label();
TextBox t1 = new TextBox();
l1.Text = "field : ";
tlpFields.Controls.Add(l1, 0, ii); // add label in column0
tlpFields.Controls.Add(t1, 1, ii); // add textbox in column1
tlpFields.RowStyles.Add(new RowStyle(SizeType.Absolute,30)); // 30 is the rows space
}
Finally, run the code.
Solution 5
I just looked into my code. In one application, I just add the controls, but without specifying the index, and when done, I just loop through the row styles and set the size type to AutoSize. So just adding them without specifying the indices seems to add the rows as intended (provided the GrowStyle is set to AddRows).
In another application, I clear the controls and set the RowCount property to the needed value. This does not add the RowStyles. Then I add my controls, this time specifying the indices, and add a new RowStyle (RowStyles.Add(new RowStyle(...)
) and this also works.
So, pick one of these methods, they both work. I remember the headaches the table layout panel caused me.
Ash
Updated on March 18, 2020Comments
-
Ash about 4 years
I've been fighting with this for a while, and have found that a number of other people struggle with the TableLayoutPanel (.net 2.0 Winforms) as well.
Problem
I am attempting to take a 'blank' tablelayoutpanel, which has 10 columns defined, then at runtime programmatically add rows of controls (i.e. one control per cell).
One might have thought that it should be as simple as
myTableLayoutPanel.Controls.Add(myControl, 0 /* Column Index */, 0 /* Row index */);
But that (for me) doesn't add the rows. So maybe adding in a row style
myTableLayoutPanel.RowStyles.Clear(); myTableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.Absolute, 30F));
But that doesn't work either. I've dug around and found out that the
myTableLayoutPanel.RowCount
usage changes from design time to run time, hence doingmyTableLayoutPanel.RowCount++;
doesn't actually add another row, not even before/after adding a RowStyle entry for it!Another related issue I am encountering is that the controls will be added to the display, but they all simply get rendered at point 0,0 of the TableLayoutPanel, additionally they are not even constrained to be within the Cell bounds that they are supposed to be displayed within (i.e. with Dock = DockStyle.Fill they still appear way too large/small).
Does someone have a working example of adding rows & controls at runtime?
-
Ash almost 15 yearsI'll give these ones a try to see if it behaves itself!
-
Jan Hettich almost 13 yearsThis was very helpful. I found that the DockStyle.Fill attribute was essential. Also, it is surprisingly easy to make mistakes with the counting! Also, note the column and row sizes set with styles. I found that when the RowStyle was set to AutoSize, some unintentional variations in the TextAlign settings (among Top, Middle, and Bottom) made it appear that the table was generating extra rows in some strange way, but that was not the case. The thing works pretty well once you figure it out, but it was painful getting there!
-
JNadal over 11 yearsThanks for the idea for an empty placeholder row! Solved my sizing issues.
-
Muneem Habib over 8 yearshow you are accessing tlpfields? I have created tablelayoutpanel and its name is tabkelayout but i am unabla to access this.
-
John over 7 yearsIf it's useful for anyone, in my case I had to call tableLayoutPanel1.ColumnStyles.Clear(); when the form is loading.
-
RookieCoder over 6 years@MuneemHabib go to tabkelayout properties and change Modifiers from private to public
-
Nick Alexeev about 6 yearsThe question is about TableLayoutPanel, this post is about DataTable. The post is code-only. It doesn't have any text describing what the point might be. No comments in the code either. So, -1.