Automatically resize rows and columns in tableLayoutPanel in C#

Question

I created a game which consist of a 4x4 grid. When a player wins, I'd like to make the game harder by expanding the grid to 10x10.

I've made the form bigger by adding this line:

 this.Size = new Size(1375, 1375);

The tableLayoutPanel resizes itself because its Dock property is set to fill.

Then I changed the amount of rows and columns to 10:

this.tableLayoutPanel1.RowCount = 10;
this.tableLayoutPanel1.ColumnCount = 10;

I want each cell to take up 10% of the space, so I tried:

this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 10F));
this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 10F));

but it doesn't work: the columns and rows that were there before keep their size, one new row and one new column takes up the rest of the space, and the remaining ones don't take any space at all.

So how can I reset the size of the previous cells and make each one take up 10% of the space?

voytek voytek · Accepted Answer · 2015-08-25T22:23:19

You need to clear styles first:

    this.tableLayoutPanel1.RowStyles.Clear();
    this.tableLayoutPanel1.ColumnStyles.Clear();

The whole code will look like this:

    this.Size = new Size(1375, 1375);
    this.tableLayoutPanel1.RowCount = 10;
    this.tableLayoutPanel1.ColumnCount = 10;
    this.tableLayoutPanel1.RowStyles.Clear();
    this.tableLayoutPanel1.ColumnStyles.Clear();
    for (int i = 1; i <= this.tableLayoutPanel1.RowCount; i++)
    {
        tableLayoutPanel1.RowStyles.Add(new RowStyle(SizeType.Percent, 1));
    }
    for (int i = 1; i <= this.tableLayoutPanel1.ColumnCount; i++)
    {
        tableLayoutPanel1.ColumnStyles.Add(new ColumnStyle(SizeType.Percent, 1));
    }

Automatically resize rows and columns in tableLayoutPanel in C#

1 Answers