OptionsView control including Design-time support

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:
http://www.nickthissen.nl/Images/Persistent/tmp8D1F.png


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.

Just in case you're interested, here's some of the design-time issues I've faced and solved. I've tried to comment on them extensively in the code so this control is really a good example for design-time solutions, in case you ever find yourself requiring it.

Designer serialization:
Once you add panels to the control at design-time, the windows forms designer has to 'serialize' these panels into the Designer file, in the InitializeComponent method. The most important part here is to use the DesignerSerializationVisibility attribute on the Panels property. This property returns the ControlCollection of the panel that contains all OptionsPanels (in other words, it just returns all OptionsPanels), so adding to this property actually adds the panels to the Control collection of the container panel. By setting the DesignerSerializationVisibility attribute to Content then, the designer knows to serialize the contents of this container panel, in this case the OptionsPanels! If you don't set this attribute, the panels would not be serialized and would be lost once you run the application.

Another issue is the nodes in the TreeView. They are instances of the OptionsNode class, which inherits TreeNode. They are serialized because the designer automatically looks for a method 'ShouldSerializeNode', in which I return True. Then, their Nodes property (the child nodes, if you will) should also be serialized, so the OptionsNode class has a method ShouldSerializeNodes, which also returns True. These methods aren't used anywhere in my code, the designer looks for them (by name) and simply assumes 'False' if they don't exist.

A more pressing issue was the way these OptionsNodes were serialized. By default, the designer creates new TreeNode objects and tries to cast them to OptionsNode. That won't work, that's a cast from a base type to a more derived type, impossible! To get around this, I had to implement a custom TypeConverter for the OptionsNode class (OptionsNodeConverter). This provides an InstanceDescriptor object (which basically describes the creation of an instance in the Designer file) that calls the correct constructor on the OptionsNodes.

Property grid functionality:
Another issue was the ParentNode property. I had the idea to let this property show a dropdown in the property grid, containing all nodes in the TreeView, from which a user can select the right parent node. To get this behavior, I had to implement a custom UITypeEditor for the ParentNode property (OptionsNodeEditor). I tell the property grid to display a dropdown with a ListBox, to which all nodes are added.

The creation of the OptionsPanels in the first place also required a custom UITypeEditor, this time a custom CollectionEditor. By default, the editor for the Panels property creates Control instances (because the collection, Panels, is of type ControlCollection). That won't do, we need OptionsPanels, and I use the OptionsPanelCollectionEditor to get it to do just that. Furthermore, instead of returning a new instance of the OptionsPanel class, I use the DesignerHost to create an OptionsPanel component. This allows the panel to be selectable and editable during design-time (otherwise it would be a static control, like controls on a UserControl).

Control Designers:
Both the OptionsView and OptionsPanel feature custom ControlDesigners. These control the design-time behavior of the controls. The most important feature is the ability to select nodes in the TreeView. This is done by overriding the GetHitTest method and returning True when the mouse is over the TreeView.
Furthermore, the designers add the ActionList / Smart Tag window features.

Finally, I draw a neat little border around the OptionsPanels (code 'stolen' from the PanelDesigner that draws the border around a Panel control) as well as their name in the bottom-right corner to identify them. Obviously, these drawings only appear during design-time.

So you did get it all to work! Congrats Nick, I know you were having issues earlier getting it all to work, but it seems that you were able to get it working!

Quote:

---

Originally Posted by formlesstree4

So you did get it all to work! Congrats Nick, I know you were having issues earlier getting it all to work, but it seems that you were able to get it working!

---

Yeah, it was quite a struggle but I got there in the end with the help of some excellent articles I'd never seen before, which basically explains everything about design-time support in much detail. For example this one.

Thanks for this i need it............have any idea to create some Renderers for changing visual styles.......

Quote:

---

Originally Posted by medsont

Thanks for this i need it............have any idea to create some Renderers for changing visual styles.......

---

Visual styles of what? All I can imagine is the TreeView, and you have the source code so you can style it any way you like.

hi Nick how to fixed the Splitter......

Set the IsSplitterFixed property of the SplitContainer.

I am finding this quite useful. Keep up the good work!

hi Nick.

How do i make the panel scrollable?
i have already set autoscroll to true, which makes the panel show a scroll bar when the content is really long, but the scrollbar doesn't respond to mouse events st design time, see the picture

Anyway around this?

Quote:

---

Originally Posted by coolcurrent4u

hi Nick.

How do i make the panel scrollable?
i have already set autoscroll to true, which makes the panel show a scroll bar when the content is really long, but the scrollbar doesn't respond to mouse events st design time, see the picture

Anyway around this?

---

https://docs.microsoft.com/en-us/dot...ner.gethittest

Thanks for your answer, but I found another way.
I simply just change back the optional panel autoscroll to false as i have set it to true earlier.
I added another panel inside each option panel, dock it and set its autoscroll to true.
The added panel is scrollable at design time, and that was what i needed.

i was able to fix the scroll issue finally!

Code:

---

Protected Overrides Function GetHitTest(ByVal point As System.Drawing.Point) As Boolean
            point = Control.PointToClient(point)
            Dim rect As Rectangle = Me.Host.Bounds
            Return rect.Contains(point)

            Return MyBase.GetHitTest(point)
        End Function

---

I am finding this quite useful. Keep up the good work!


**Links removed by Site Administrator so it doesn't look like you're spamming us. Please don't post them again.**