Resizing rows and columns in a TableLayoutPanel when resized

Question

I'm developing a simple app that is used to emulate a serial keyboard. The app needs to have a resizable window, with the 'keys' (buttons in this case) stretch with the window. I've decided to use a docked TableLayoutPanel and set the columns and rows to size using a percentage.

Say I have a 7 x 3 grid of virtual keys on my keyboard as follows:

+--+--+--+--+--+--+--+
|  |  |  |  |  |  |  |
+--+--+--+--+--+--+--+
|  |  |  |  |  |  |  |
+--+--+--+--+--+--+--+
|  |  |  |  |  |  |  |
+--+--+--+--+--+--+--+

When I resize my form, the last row and column take up the slack when the space can't be divided equally.

As I'm going to dock a button in each cell, it looks odd when the last row/column of buttons is larger.

I've fixed this by simply adding an extra row and column that doesn't have any buttons, but that looks ugly when all the slack space is to the right and the bottom, what I really want is to essentially centre the keyboard.

I've tried creating a 9 x 5 grid and setting the first and last column and row to autosize, but I can't seem to do what I want to achieve.

There must be a way of doing this?

Edit: Here is my designer code. I'm actually emulating a keyboard with a 19 x 10 grid.

this.tlpKeyboard1.ColumnCount = 20;
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 5F));
this.tlpKeyboard1.Dock = System.Windows.Forms.DockStyle.Fill;
this.tlpKeyboard1.Location = new System.Drawing.Point(3, 3);
this.tlpKeyboard1.Name = "tlpKeyboard1";
this.tlpKeyboard1.RowCount = 11;
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 9.090908F));
this.tlpKeyboard1.Size = new System.Drawing.Size(977, 528);

Sounds like the Columns arent setup to be percentages. Can you post your code you have so far? — SwDevMan81

SwDevMan81 SwDevMan81 · Accepted Answer · 2011-02-17T12:40:02

This code in the designer seems to work fine for me. It has 3 columns and 2 rows (one button in each area) and autosizes properly when I expand and contract the window. Maybe you can compare it to what you have:

     // 
     // tableLayoutPanel1
     // 
     this.tableLayoutPanel1.ColumnCount = 3;
     this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.33333F));
     this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.33333F));
     this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle(System.Windows.Forms.SizeType.Percent, 33.33333F));
     this.tableLayoutPanel1.Controls.Add(this.button9, 2, 1);
     this.tableLayoutPanel1.Controls.Add(this.button8, 1, 1);
     this.tableLayoutPanel1.Controls.Add(this.button7, 0, 1);
     this.tableLayoutPanel1.Controls.Add(this.button6, 1, 0);
     this.tableLayoutPanel1.Controls.Add(this.button5, 0, 0);
     this.tableLayoutPanel1.Controls.Add(this.button10, 2, 0);
     this.tableLayoutPanel1.Dock = System.Windows.Forms.DockStyle.Fill;
     this.tableLayoutPanel1.Location = new System.Drawing.Point(0, 0);
     this.tableLayoutPanel1.Name = "tableLayoutPanel1";
     this.tableLayoutPanel1.RowCount = 2;
     this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
     this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 50F));
     this.tableLayoutPanel1.Size = new System.Drawing.Size(292, 266);
     this.tableLayoutPanel1.TabIndex = 6;

Resizing rows and columns in a TableLayoutPanel when resized

1 Answers