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?

score 20 · Answer 1 · edited Apr 25 '12 at 20:26

20

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

Row one:

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

edited Apr 25 '12 at 20:26

Sergey Glotov

20,200
11
84
98

answered Apr 25 '12 at 16:06

Martin Tapp

209
2
2

score 20 · Answer 2 · answered Jul 20 '10 at 13:52

20

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

answered Jul 20 '10 at 13:52

arbiter

9,447
1
32
43

thanks, it could hide the panel but not the Cell.. cell is still there? Am I missing something? – Bohn Jul 20 '10 at 14:08
3

@BDotA, are you sure that your row is autosized? – arbiter Jul 20 '10 at 14:16
1

well on in the properties box of TableLayoutPanel there was a "Rows" property, I clicked on it, another dialog opened. my rows were listed there. there was a CellType radio buttons options in there I think. so I clicked on each of my rows and selected AutoSize for it.... this is what I did. – Bohn Jul 20 '10 at 14:36
Same Problem Here: All Contentcontrols `DockingStyle.Fill` every row autosize. When `Control.Visible = false` the row doesnt get resized (to height = 0) – LuckyLikey Oct 12 '15 at 11:40

score 10 · Answer 3 · edited Dec 27 '16 at 21:11

10

Try this

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

edited Dec 27 '16 at 21:11

TheSilverNimbus

25
6

answered Oct 23 '13 at 13:54

champu

101
1
2

score 6 · Answer 4 · answered Sep 02 '13 at 18:58

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

score 6 · Accepted Answer · answered Jul 20 '10 at 13:48

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).

score 4 · Answer 6 · answered Jan 11 '18 at 09:49

4

To hide row try this!!

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

answered Jan 11 '18 at 09:49

Haseeb Ahmed

235
2
11

score 3 · Answer 7 · answered Jan 14 '12 at 13:20

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.

score 0 · Answer 8 · answered Sep 27 '19 at 02:19

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

    }

}

Hide and show a cell of the TableLayoutPanel

8 Answers8

Linked