Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / ASP.NET

Populate TreeView Menu with XML

5.00/5 (13 votes)
10 Sep 2009CPOL1 min read 159.8K   5.9K  
This step-by step article describes how to populate a TreeView control by using XML data.

Introduction

Creating treeview menus on the fly from an XML file can be useful when the menu items are constantly being updated. For instance, when using an XML file as a database to store records in.

Here is a simple example of how to do this. The example is kept simple to avoid any confusion.

Background

A working knowledge of XML, the TreeView control, and the Visual Studio is helpful in understanding the steps.

Using the code

Note: The attached solution file (xml2treeviewmenuSolution) was created with VS2010.

Add an XML file to your project and name it "menu.xml". Edit the XML file with the menu items.

XML
<?xml version="1.0" encoding="utf-8" ?>
<root>
<folder title='folder 1a' >
<record title='record 1a1' />
<record title='record 1a2' />
<folder title='folder 1b'>
<record title='record 1b1' />
</folder>
</folder>
<folder title='folder 2a' >
<record title='record 2a1' />
</folder>
<folder title='folder 3a' >
<record title='record 3a1' />
<record title='record 3a2' />
</folder>
</root>

Drag the TreeView control from the Visual Studio Toolbox onto your Windows form. In this example, I named the control "treeViewMenu".

Add references to the XML classes in your using statements.

C#
using System.Xml;
using System.Xml.XPath;    

Create an XML document to hold the file.

C#
public partial class Form1 : Form
{
    private XmlDocument docXML = new XmlDocument();

When the form is loaded, load the XML document with the XML file and begin populating the TreeView control.

C#
private void Form1_Load(object sender, EventArgs e)
{
    docXML.Load("menu.xml"); // Load the xml file
    populateBaseNodes(); // Populate all of the base nodes
}

Population begins with the first level <folder> nodes. After each base node is added to the tree, the child nodes for the current base node are added.

C#
private void populateBaseNodes()
{
    treeViewMenu.Nodes.Clear(); // Clear any existing items
    treeViewMenu.BeginUpdate(); // Begin updating the treeview
    TreeNode treenode;
    treenode = treeViewMenu.Nodes.Add("Folders");
    
    XmlNodeList baseNodeList = docXML.SelectNodes("root/folder");
    // Get all first level <folder> nodes

    foreach (XmlNode xmlnode in baseNodeList)
    // loop through all base <folder> nodes 
    {
        string title = xmlnode.Attributes["title"].Value;

        treenode = treeViewMenu.Nodes.Add(title); // add it to the tree

        populateChildNodes(xmlnode, treenode); // Get the children
    }

    treeViewMenu.EndUpdate(); // Stop updating the tree
    treeViewMenu.Refresh(); // refresh the treeview display
}

Each child node will be inspected for further children. The loop will called for each child node that was found.

C#
private void populateChildNodes(XmlNode oldXmlnode, TreeNode oldTreenode)
{
    TreeNode treenode = null;
    XmlNodeList childNodeList = oldXmlnode.ChildNodes;
    // Get all children for the past node (parent)

    foreach (XmlNode xmlnode in childNodeList)
    // loop through all children
    {
        string title = xmlnode.Attributes["title"].Value;
        // add it to the parent node tree
        treenode = oldTreenode.Nodes.Add(title);
        populateChildNodes(xmlnode, treenode); 
    }
}

Points of interest

Fancy up your menu using an image list and add an icon attribute to your menu file.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)