Hide and show a cell of the TableLayoutPanel

Question

My tablelayout panel has one column and three rows. (one docked to Fill panel in each cell.)

Now I would like to be able to hide/show the rows . I want only one row to be visible at any time ( based on a user selection of some radio buttons) and I want to to get resized so it fills all the area of the TableLayoutPanel.

How can I do that? Any thoughts?

Answer 1

如果TableLayoutPanel中的行已自动调整，则隐藏内容面板将隐藏面板放置的单元格。

Answer 2

I would suggest setting the other rows heights to 0 is the easiest way:

Row one:

this.tableLayoutPanel1.RowStyles[1].Height = 0;

Answer 3

Try this

TableLayoutPanel1.ColumnStyles[1].SizeType = SizeType.Absolute;
TableLayoutPanel1.ColumnStyles[1].Width = 0;

Answer 4

My scenario is similar. I needed a TableLayoutPanel with 4 rows each of which needed to be visible according to a checkbox selection. So instead of only showing one row at a time, I can show 1 - 4. After designing the layout with 1 column and 4 rows, the controls were added and Dock set to Fill for each one. Then in a single CheckedChanged event handler for the checkboxes, I coded as shown below. It's kind of a brute force method, but, Hey...it works!

    private void checkBox_CheckedChanged(object sender, EventArgs e)
    {
        this.SuspendLayout();
        int seldCount = checkBox1.Checked ? 1 : 0;
        seldCount += checkBox2.Checked ? 1 : 0;
        seldCount += checkBox3.Checked ? 1 : 0;
        seldCount += checkBox4.Checked ? 1 : 0;

        float pcnt = 0;
        if (seldCount == 1)
            pcnt = 1;
        if (seldCount == 2)
            pcnt = 0.5f;
        if (seldCount == 3)
            pcnt = 0.33f;
        if (seldCount == 4)
            pcnt = 0.25f;

        int newHeight = (int)(tableLayoutPanel1.Height * pcnt);

        if (checkBox1.Checked)
        {
            tableLayoutPanel1.RowStyles[0].SizeType = SizeType.Percent;
            tableLayoutPanel1.RowStyles[0].Height = newHeight;
        }
        else
        {
            tableLayoutPanel1.RowStyles[0].SizeType = SizeType.Absolute;
            tableLayoutPanel1.RowStyles[0].Height = 0;
        }

        if (checkBox2.Checked)
        {
            tableLayoutPanel1.RowStyles[1].SizeType = SizeType.Percent;
            tableLayoutPanel1.RowStyles[1].Height = newHeight;
        }
        else
        {
            tableLayoutPanel1.RowStyles[1].SizeType = SizeType.Absolute;
            tableLayoutPanel1.RowStyles[1].Height = 0;
        }

        if (checkBox3.Checked)
        {
            tableLayoutPanel1.RowStyles[2].SizeType = SizeType.Percent;
            tableLayoutPanel1.RowStyles[2].Height = newHeight;
        }
        else
        {
            tableLayoutPanel1.RowStyles[2].SizeType = SizeType.Absolute;
            tableLayoutPanel1.RowStyles[2].Height = 0;
        }

        if (checkBox4.Checked)
        {
            tableLayoutPanel1.RowStyles[3].SizeType = SizeType.Percent;
            tableLayoutPanel1.RowStyles[3].Height = newHeight;
        }
        else
        {
            tableLayoutPanel1.RowStyles[3].SizeType = SizeType.Absolute;
            tableLayoutPanel1.RowStyles[3].Height = 0;
        }
        this.ResumeLayout();
    }

Answer 5

So why did you use a TableLayoutPanel ?

Just put three Panel s on your form, fill in everyone the content of each row and set the Dock property of all three panels to Fill . Set two panels Visible = false and one to true .

If you like to see another panel, just make it visible and hide the other two (based on your radio button settings).

Answer 6

To hide row try this!!

tableLayoutPanel1.RowStyles[1].SizeType = SizeType.Absolute;
tableLayoutPanel1.RowStyles[1].Height = 0;

Answer 7

I had similar task to do and my solution is following:

Add a TableLayoutPanel to your form (or any container).

Set TableLayoutPanel's columns and rows count to 1 and size to 100%.

Set Dock to Fill.

Set GrowStyle to fixedSize.

Set AutoSize to true.

Then programmatically add all of three forms/controls, one of which you have to show depending on radio button choice. Be sure that only one of them is visible. That could be done with initial FirstControl.Show(); and then on each RadioButton event hide the current one and show another. you may "remember" in local variable (say: "currentlyVisibleControl" the reference which is currently visible)

note: if you will .Show() more than one at time. then TableLayoutPanel wil fire the exception that it is full and can't add any more item.

PS In My own example I have TableLayoutPanel in MDI window and three forms which substitute each other on button clicks on them so I think copying my source code will complicate the "verbal" example.

PPS From my experience Visual Studio does some weird things in design mode sometimes. I had to remove and re-add the TableLayoutPanel to set properties correctly and get the results both in designer and in runtime. So if either autosize or absolute/percent values are not depicted on designer screen it may be designers problem rather that yours. JUST DELETE IT AND RETRY.