Automatically resize TableLayoutPanel row when window is resized

Question

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 1

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.

Answer 2

Simply set absolute sizes for the first and third rows:

tableLayoutPanel1.RowStyles[0].Height = 100;
tableLayoutPanel1.RowStyles[0].SizeType = SizeType.Absolute;
tableLayoutPanel1.RowStyles[2].Height = 100;
tableLayoutPanel1.RowStyles[2].SizeType = SizeType.Absolute;

To be sure the second (middle) row should have SizeType = SizeType.Percent and Height = 100. Your Form should have maximum Height of 200.

Answer 3

i did

this.tableLayoutPanel1.Anchor = ((System.Windows.Forms.AnchorStyles)((System.Windows.Forms.AnchorStyles.Top | System.Windows.Forms.AnchorStyles.Bottom)));
this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Absolute, 20F));
     this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Percent, 100F));
     this.tableLayoutPanel1.RowStyles.Add(new System.Windows.Forms.RowStyle(System.Windows.Forms.SizeType.Absolute, 20F));

and it worked... by setting the anchor top and bottom i made sure that if resize the row will grow bigger/smaller, and by making the first and 3rd rows absolute size and the middle percentage size i made sure only the middle will grow bigger/smaller