TableLayoutPanel - resize each cell on resizing parent control

Question

I'm working on a control, which contains a TableLayoutPanel. The panel contains X rows and Y columns - where each cell is the same size. Each cell contains a Control When the parent controls is being resized, I want each cell to be resized as well, and keep the same size to each other.

I've tried to set the Controls' Anchor when added to the cell:

control.Anchor = AnchorStyles.Left | AnchorStyles.Top |
                 AnchorStyles.Right | AnchorStyles.Bottom;

But this only makes the bottom row and the right most column expand.

Answer 1

Using designer or code, you can set SizeType of the columns and rows to Percent and assign same percentage value for their size. Also set Dock property of your controls to Fill.

For example:

tableLayoutPanel1.ColumnStyles.Clear();
tableLayoutPanel1.RowStyles.Clear();
for (var i = 0; i < tableLayoutPanel1.ColumnCount; i++)
{
    var percent = 100f / (float)tableLayoutPanel1.ColumnCount;
    tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, percent));
}
for (var i = 0; i < tableLayoutPanel1.RowCount; i++)
{
    var percent = 100f / (float)tableLayoutPanel1.RowCount;
    tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, percent));
}