A panel switcher custom control for Winform in .net?

Question

This is a .net winform UI question.

In many cases, we want to design an UI such that, you have several options, and based on the option you choose, a different detail UI is setup for you. For example, imagine a user registration: based on the location you pick, you may be asked to fill in different information. Normally, when I design the form for such a purpose, I will create an empty panel for place holding on the main form. And I will create one user control for each detail UI. When the form is loaded, I will create instances of the user controls (representing detail UI based on options) and dock them on the panel and hide the irrelevant ones. When a user changes her option (maybe via a dropdownlist or via a set of radio buttons), I programmatically decide which user control needs to be shown and rest to be hidden. All good so far.

But this solution has a problem, when you open your form in VS form designer, all you see is an empty panel and you have no idea what will be looked like when your user controls are filled in. If another programmer opens your form in designer, he will have no idea what's going on here, an empty panel? Then he has to go to your code and find out the user controls.

So, do we have a user control that behaves similar to tabcontrol so that all the user controls can be organized visually in designer during design time? Of course, you will say, then use tabcontrol. But obviously, the purpose is not the same as tabcontrol but rather a tabcontrol without the tab buttons on top. You may ask me to write few lines of code to hide the tab buttons on the tabcontrol. Yes, we can do that, but I find that after hiding the tab buttons, there will be some space around the tabcontrol and other controls outside it and the look is not ideal. And visually the tab buttons take extra space than the tabpages themselves so hiding them will give you some layout margin problem.

Is there a custom control developed by someone that achieve my purpose? I mean, come on, this is a common problem and I don't believe everyone leaves an empty panel on the form. There must be some better solution. And I need your help. Thanks.

Answer 1

So far, I've found using a tabcontrol and hiding the tabs to be the best solution. There's some assistance here, but you're right it's not ideal.

Answer 2

But this solution has a problem, when you open your form in VS form designer, all you see is an empty panel and you have no idea what will be looked like when your user controls are filled in. If another programmer opens your form in designer, he will have no idea what's going on here, an empty panel? Then he has to go to your code and find out the user controls.

We also do this same stuff all over the place. Agreed if you keep adding your panels to the form your going to have this problem. The easy answer is just don't do that. Create a UserControl derived from Panel in your project. Then in your form add the custom control.

Now you can design the form independently from the panels and you can design each panel in it's own window. This solution creates a few more source files, but it's well worth it to separate the logic of forms in this way even if your not showing and hiding the panels.

Answer 3

The solution exist, try the LidorSystems Collector control. There are three controls included: Bar, Group and Page control with which you can create panels organized in different layouts. The controls are highly customizable.

To create multiple panels where only one panel is active follow these steps:

1. Place the Group control on the Form
2. Add several pages. You will notice that tabs appears for them.
3. Place your control on pages. 4.To hide the tabstrip just set the TabStrip property to False. In this way only currently selected page will be visible.
4. If you don;t want the header set the Header property to False
5. The final thing is to change the color of the border. a) Set the BorderStyle to None, b) From Style->PageStyle->TabStyle->SelectedStykle, change the BorderColor to SystemColors.Control.

You can customize the final appearance by chaning the Style of the control.