Automatically resize TableLayoutPanel row when window is resized

John NoCookies picture John NoCookies · Jul 18, 2013 · Viewed 28.3k times · Source

I have a simple 1x3 TableLayoutPanel. I want to achieve a very simple thing: When the window is resized, resize the middle row and keep top and bottom ones the same. I tried doing the logical thing, which is setting rigid top and bottom row sizes and autosize for the middle row. Unfortunately, it's the bottom row that resizes.

// 
// tableLayoutPanel1
// 
this.tableLayoutPanel1.ColumnCount = 1;
this.tableLayoutPanel1.ColumnStyles.Add(new System.Windows.Forms.ColumnStyle());
this.tableLayoutPanel1.Controls.Add(this.topPanel, 0, 0);
this.tableLayoutPanel1.Controls.Add(this.middlePanel, 0, 1);
this.tableLayoutPanel1.Controls.Add(this.bottomPanel, 0, 2);
this.tableLayoutPanel1.Dock = System.Windows.Forms.DockStyle.Fill;
this.tableLayoutPanel1.Location = new System.Drawing.Point(0, 0);
this.tableLayoutPanel1.Name = "tableLayoutPanel1";
this.tableLayoutPanel1.RowCount = 1;
this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Absolute, 140F));
this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle());
this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Absolute, 24F));
this.tableLayoutPanel1.Size = new System.Drawing.Size(1102, 492);
this.tableLayoutPanel1.TabIndex = 19;

All of the inner panels have Dock set to Fill and default anchors. What am I doing wrong?

Answer

Bolu picture Bolu · Jul 18, 2013

Change middle row to 100% percent, which will tell the system that middle row will fill any gap left. So change this (I believe its your designer.cs):

this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle());

to:

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

Check TableLayoutPanel.RowStyle from MSDN:

  1. Rows with RowStyle set to Absolute are considered first, and their fixed heights are allocated.
  2. Rows with RowStyle set to AutoSize are sized to their contents.
  3. Remaining space is divided among rows withRowStyle set to Percent.