Hide a row in TableLayout

Question

I have a table layout that contains three rows and one column:

What I want is to hide the second row before the progress completes, like this:

On the internet, I found two things:

1. Delete the row - I don't want to delete the row, just temporarily hide it!
2. Set row height to 0 - didn't work, for some reason part of the inner data was still visible.

So how do I really HIDE the row. Not remove, not resize but actually hide it from view.

Answer 1

Hiding and showing rows in a TableLayoutPanel is not really straightforward.

Based on your UI mock, I assume first and third rows are set to Absolute while second one is AutoSize or Percent. I am also assuming that Dock for panel is set to Fill. Now, here is what I would do in this scenario.

Add an empty row in the end with SizeType set to AutoSize. When the user action begins (say a button click) do the following:

// RowStyles index is index of the row you are dealing with
tableLayoutPanel1.RowStyles[1].SizeType = SizeType.Absolute;
tableLayoutPanel1.RowStyles[1].Height = 0;

Since there is an auto-sized row in the end, all the other rows would move up and your form will have empty space at the bottom. This will retain your desired layout. When the action is completed, you can set the row in question back to Percent or AutoSize.