TablelayoutPanel does not resize when col/row is set to invisible

Question

Let's say we have TableLayoutPanel with 2 columns: left and right, designed like this

2 textboxes' Dock are set to Top (Fill will give the same effect for what I am describing below).

Depending on different scenarios, I'd like to have one column invisible and the other takes up all the space. I try to achieve this by setting either left.Visible = false or right.Visible = false;

I could not achieve this after different attempts of layout setting for the Table:

1. column 1 Autosize and column 2 Autosize

When setting Right.Visible = false, this is what I get from Left. Left does not takes up all the space.

Right (with left set to invisible).

Right takes up all the space but Left does not.

2. Column 1 100% and Column 2 Autosize

Left

Right

3. Column 1 Autosize and Column 2 100%

4. Left 50% and Right 50% will not work either. Both only take up half of the space.

How can I make them both takes up all the space when the other is invisible? Any other way to achieve this?

Thanks all.

Answer 1

I believe using SizeType.AutoSize combined with using the Anchor property instead of the Dock property will give you what you want. Specifically, you want to set textBox.Anchor = AnchorStyles.Left | AnchorStyles.Right.

This has the side effect of making your right text box overflow outside the bounds of the table layout panel at first if the table layout panel is not wide enough for both of the text boxes. Still not sure how to address that issue aside from making sure everything is initialized to good size values first.

I tested using the following LINQPad query:

var textBoxLeft = new TextBox();
textBoxLeft.Anchor = AnchorStyles.Left | AnchorStyles.Right;
textBoxLeft.Text = "Left";
textBoxLeft.AutoSize = true;
textBoxLeft.SizeChanged += (s, e) => textBoxLeft.Text = "Left: " + textBoxLeft.Size.Width;

var textBoxRight = new TextBox();
textBoxRight.Anchor = AnchorStyles.Left | AnchorStyles.Right;
textBoxRight.Text = "Right";
textBoxRight.AutoSize = true;
textBoxRight.SizeChanged += (s, e) => textBoxRight.Text = "Right: " + textBoxRight.Size.Width;

var tableLayoutPanel = new TableLayoutPanel();
tableLayoutPanel.Controls.Add(textBoxLeft, 0, 0);
tableLayoutPanel.Controls.Add(textBoxRight, 1, 0);
tableLayoutPanel.RowStyles.Add(new RowStyle(SizeType.Percent, 100.0f));
tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.AutoSize, 100.0f));
tableLayoutPanel.ColumnStyles.Add(new ColumnStyle(SizeType.AutoSize, 100.0f));
tableLayoutPanel.BorderStyle = BorderStyle.FixedSingle;

var buttonLeft = new Button();
buttonLeft.Text = "Toggle Left";
buttonLeft.Click += (s, e) => textBoxLeft.Visible = !textBoxLeft.Visible;

var buttonRight = new Button();
buttonRight.Text = "Toggle Right";
buttonRight.Click += (s, e) => textBoxRight.Visible = !textBoxRight.Visible;

var hostPanel = new FlowLayoutPanel { FlowDirection = FlowDirection.TopDown };
hostPanel.Controls.Add(tableLayoutPanel);
hostPanel.Controls.Add(buttonLeft);
hostPanel.Controls.Add(buttonRight);
hostPanel.Dump();