OptionsView control including Design-time support

[NickThissen]

Hi,

I'm back with a completely new control that includes rich design-time support to make designing your forms a lot easier.

This time I wanted to create a control that easily allows you to create Options forms like the one in Visual Studio (and many other applications). In its most basic form, it consists of a TreeView to the left with nodes, where each node corresponds to a panel to the right that contains a bunch of controls. Selecting a different node in the TreeView brings the corresponding panel to the front.

To make this UI in the windows forms designer would be a total mess. You'd need to have a panel or UserControl for every options category and somehow keep track of them in the designer. When you want to add controls to one panel you'd need to find it, bring it to the front, etc. With many categories (and thus panels), it's not a pretty sight.


So I decided to encapsulate all this in a single UserControl: the OptionsView control.

It features the exact control I just described and allows you to manage the various categories or panels of controls in a simple way: exactly like you would during run-time! The control is completely design-time friendly: you can select the TreeNodes during design-time and the corresponding panel will come to the front, allowing you to work on it for a while. Then you can select a different node and work on that panel. You never have to take care showing/hiding and finding the panels anymore, the control does that for you.


Features:

• Add panels via the Panels property, or via the Add Panel smart tag
• Nodes are added automatically for each panel
• Design-time support, selecting nodes in the designer works.
• Child panels: for any panel you can select the node that should parent it, using the ParentNode property.
• Action Lists or Smart Tag windows: open a popup with common properties and methods via the [>] button on the top-right corner of the control. The main OptionsView has features to Add/Remove panels as well as selecting a panel. The individual OptionsPanels have the ability to choose a Parent Node as well as select the parent panel (or parent OptionsView if the panels correspond to root nodes).

To use:
You have a few different options to use the control:

1. Add the attached project as an existing project to your solution, or
2. Open the project and compile it, then reference the DLL in the bin/Debug directory, or
3. Add the individual files (all the .vb files as well as the files in the Designers, Editors and Converters directories) to a new Control Library project.

If using the last option, you need to add a reference to System.Design. You can only do that when you are compiling against the full 3.5 or 4.0 .NET Framework, you can NOT use the Client Profile versions because they do not contain the System.Design assembly required for the design-time support!

Once you Build your solution, you will find the OptionsView control in your toolbox. Simply drag one to your form. You can add panels via the Add Panel action list / smart tag window, or you can simply open the Panels property collection editor (via the [...] button in the property grid, at the Panels property) and add them from there. A panel automatically inserts a new node in the TreeView.

Once you have your panel(s) you can select them in the designer to set some properties, and you can simply drag/drop controls on them. It works similar to a TabControl; select the right panel and drop the controls on there. Done!




Screenshot:



Note that the control has not been tested extensively yet, though it seems to work without problems. If you do find a problem, bug, or just have a suggestion, leave a reply and I'll try to work it out.

Enjoy!!


More information:
Just in case you're interested, I'll type up a short bit about the design-time issues I solved with this control, see the next post.