Hide and show a cell of the TableLayoutPanel

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?

If rows in your TableLayoutPanel is autosized then hiding content panel will hide cell where panel placed too.

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

Row one:

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

Try this

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

So why did you use a TableLayoutPanel?

Just put three Panels 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).

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();
    }

To hide row try this!!

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

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.

P.S. 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.

P.P.S. 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.

I tried fooling around with the Height and SizeType properties, but it was giving me odd results. For example, the Labels on the target row were being hidden, but the TextBoxes were not.

Here is an extension class that I came up with using @arbiter's suggestion of hiding the children Controls of the row.

// these methods only works on rows that are set to AutoSize
public static class TableLayoutPanelExtensions
{

    public static void HideRows(this TableLayoutPanel panel, params int[] rowNumbers)
    {
        foreach (Control c in panel.Controls)
        {
            if (rowNumbers.Contains(panel.GetRow(c)))
                c.Visible = false;
        }
    }

    public static void ShowRows(this TableLayoutPanel panel, params int[] rowNumbers)
    {
        foreach (Control c in panel.Controls)
        {
            if (rowNumbers.Contains(panel.GetRow(c)))
                c.Visible = true;
        }

    }

}