Use TreeView To View Controls--Options Dialog

Use TreeView To View Controls--Options Dialog

Post by SPD » Sun, 13 Dec 2009 07:39:23


I am looking for an example of using a treeview control in a split container
type UI.
This is a very common "Options" dialog with the treeview on the left and
the "Options" controls on the right.
When the user selects a specific node in the treeview--- the window on the
right shows the Options
controls in relation with the node selected.

thank you for your help

Use TreeView To View Controls--Options Dialog

Post by Captain Ja » Wed, 16 Dec 2009 03:22:48

I haven't done this in a while, but in outline this is what I've done

1. Add a SplitContainer to a form, with the splitter bar oriented
2. Add a TreeView control on to the left panel, and set it's Dock property
to Fill.
3. Add a TabControl somewhere on the form, usually in the right panel. It
really doesn't matter much where, as it won't be used at run time. The tab
control just makes it easier to organize lots of different kinds of input in
the same form.
4. For each kind of input record, I add a tab to the tab control. On each
tab page, I add a panel, and in each panel, I put in the input controls I
want for that input type.
5. At run time, say, in the form's Load event handler, I make each of the
panels in the tab pages invisible, remove them from the Controls property of
the TabControl, and add them to the Controls property of the right panel in
the SplitContainer. I usually set the Dock property of each Panel to Fill. I
make the TabControl invisible, as I only used that as an aid during the
6. I build my nodes in the tree view. For each node that has associated
input, I set the Tag property equal to the Panel that has the input for that
data type. If I need the tag property for something else (such as the actual
data, or a key to the data) I usually make a class that contains both the
data/key and a reference to the panel, and put an instance of *that* class
into the Tag property.
7. In the NodeMouseClick event of the treeview control, I check to see if
that node's Tag property has a reference to a Panel, then I make that Panel
visible (and any others invisible), and populate the input controls in the
panel with what can be changed.

There may be better ways to do that, but that's always worked for me.