Use a TreeView to display property pages or option pages in C#

TreeView property pages

This example shows how you can use a TreeView control to group option pages or property pages.

If you open Visual Studio’s Tools menu and select the Options command, you’ll see an enormous set of options that you can set. The TreeView on the left groups the option pages. You can dig through the TreeView to find an option category and a page within the category. Then the area on the right displays that page’s options.

In contrast, if you open Visual Studio’s Project menu and select Properties at the bottom, you can see an example of tab-based property pages. Generally this style is easier to use because it lets you see all of the categories on the tabs all at once. The TreeView style is more useful when the pages are arranged hierarchically or there are too many pages to easily display with tabs.

Building a TreeView is easy enough. Tougher issues include:

  1. Associating TreeView nodes with property pages
  2. Building property pages at design time
  3. Displaying selected property pages
  4. Saving and restoring settings

Associating TreeView Nodes With Property Pages

First create a TreeView control at design time to build the categories and sub-categories that you want. Set each node’s Tag property to the index of the property page that you want it to display. The index can be a numeric index if you want to store the pages in an array or list, or it can be the page names if you store them in a dictionary.

Building Property Pages At Design Time

This example uses a TabControl to hold the property pages because that control is easy to use and lets you add controls to its pages at design time. You cannot simply have the TreeView select the appropriate tab, however, because the TabControl displays tabs that you probably don’t want. Even if you make the tabs owner-drawn and give them the smallest size possible (1 × 1 pixel), you see an annoying little bump where the tabs would be.

To avoid that, this example moves the contents of the tabs out of the TabControl onto the form. To make that easier, put a Panel control inside each tab and put all of the tab’s other controls inside the Panel.

The example stores references to the Panels in the following list.

List Panels = new List();
Panel VisiblePanel = null;

The form’s Load event handler uses the following code to move the Panels onto the form.

// Move the Panels out of the TabControl.
tabControl1.Visible = false;
foreach (TabPage page in tabControl1.TabPages)
{
    // Add the Panel to the list.
    Panel panel = page.Controls[0] as Panel;
    Panels.Add(panel);

    // Reparent and move the Panel.
    panel.Parent = tabControl1.Parent;
    panel.Location = tabControl1.Location;
    panel.Visible = false;
}

This code first hides the TabControl. Then for each TabPage inside the TabControl, the code gets the TabPage‘s Panel and adds it to the Panels list. Next the code sets the Panel‘s Parent property to the TabControl‘s Parent, positions the Panel where the hidden TabControl is, and hides the Panel.

Displaying Selected Property Pages

When the user selects a TreeView node, the following code executes.

// Display the appropriate Panel.
private void treeView1_AfterSelect(object sender, TreeViewEventArgs e)
{
    int index = int.Parse(e.Node.Tag.ToString());
    DisplayPanel(index);
}

The AfterSelect event handler converts the node’s Tag property into an integer and passes it to the following DisplayPanel method.

// Display the appropriate Panel.
private void DisplayPanel(int index)
{
    if (Panels.Count < 1) return;

    // If this is the same Panel, do nothing.
    if (VisiblePanel == Panels[index]) return;

    // Hide the previously visible Panel.
    if (VisiblePanel != null) VisiblePanel.Visible = false;

    // Display the appropriate Panel.
    Panels[index].Visible = true;
    VisiblePanel = Panels[index];
}

The DisplayPanel method simply hides the previously visible panel and displays the one with the indicated index.

Saving and Restoring Settings

The form's Load and FormClosing event handlers call the RegistryTools.LoadAllSettings and RegistryTools.SaveAllSettings methods described in the post Easily save and restore a form's settings in the Registry in C#. Those methods let the program save and restore all of the values on every option page quickly and easily.

Download the program to see additional details. Note that the program doesn't do anything with the settings. It just saves and restores them.


Download Example   Follow me on Twitter   RSS feed




This entry was posted in controls, programs and tagged , , , , , , , , , , , . Bookmark the permalink.

2 Responses to Use a TreeView to display property pages or option pages in C#

  1. Todd says:

    Thanks for this article. It was just what I needed.

    I did make some minor modifications that I think are a nice touch:

    I created a DisplayPanels class. It has a:

         private Dictionary<string, TabPage> panelsDictionary; 

    that I use to store all the panels.

    For the key I actually use a string in the Tag such as “Results”. I set the tag in the TabPage and set a matching tag in the Node in the Tree.

    Thanks again for the cool post.

    All the best,

    Todd

    [Note: Sometimes the web site messes up comments that contain code. I tried to fix this but if I got it wrong, Todd, let me know and I’ll fix it. Rod]

  2. wethecom says:

    ohh my this is a great piece of work for years ive been making projects that needed this.
    ive played with hiding panels and group boxes before but this is perfect.
    thanks.
    i think ill tweak the form name to settings and try an make default project out of it.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.