Generating Tree View Nodes from XML file in Silverlight 3 Application

Introduction

In this article we will see how can we generate TreeView Nodes based on an XML file.

Creating Silverlight Project

Fire up Visual Studio 2008 and create a Silverlight Application. Name it as TreeViewXMLInSL3.



Go ahead and add a Tree View control to your application. You can find Tree View from the Asset Library. As shown below:



I have given the background of the Tree View for distinguishing.



Now create a Class called Category.cs and add it to the Silverlight Project.



Add to Properties as Name and SubCategory.

public class Category
{
    public string Name { get; set; }
    public List<Category> SubCategory { get; set; }
}

Now add an XML file to the Silverlight Project and name it as "Categories.xml".

Write the XML in the following format with the following Data:



<?xml version="1.0" encoding="utf-8" ?>
<categories>
  <category name="Panels">
    <category name="Grid"></category>
    <category name="Border"></category>
    <category name="Stack Panel"></category>
    <category name="Canvas"></category>
    <category name="Wrap Panel"></category>
  </category>
  <category name="Shape">
    <category name="Rectangle"></category>
    <category name="Elipse"></category>
    <category name="Line"></category>
  </category>
  <category name="Others">
    <category name="Button"></category>
    <category name="Check Box"></category>
    <category name="Radio Button"></category>
    <category name="Text Block"></category>
    <category name="Text Box"></category>
    <category name="Password Box"></category>
  </category>
</categories>

Now in the MainPage.xaml find the constructor and add the following code below InitializeComponent();

public MainPage()
{
InitializeComponent();
LoadData();
}
private void LoadData()
{
List<Category> categories = new List<Category>();
XDocument categoriesXML = XDocument.Load("Categories.xml");
categories = this.GetCategories(categoriesXML.Element("categories"));
}
private List<Category> GetCategories(XElement element)
{
return (from category in element.Elements("category")
select new Category()
{
Name = category.Attribute("name").Value,
SubCategory = this.GetCategories(category)
}).ToList();
}

Remember if you cannot find XDocument use the assembly System.Xml.Linq;

Now we will define the Item Template in Tree View. Go ahead in the XAML code behind and change the Tree View Template as following:

Don't forget to refer to the following assembly in xaml.

xmlns:myControl="clr-namespace:System.Windows;assembly=System.Windows.Controls"
Now the xaml for TreeView Data Template:
<controls:TreeView x:Name="MyTreeView" Height="200" VerticalAlignment="Center" Margin="0" Background="#FFF6E9BB" HorizontalAlignment="Center" Width="200">
  <controls:TreeView.ItemTemplate>
    <myControl:HierarchicalDataTemplate ItemsSource="{Binding SubCategory}">
      <StackPanel>
        <TextBlock Text="{Binding Name}" />
      </StackPanel>
    </myControl:HierarchicalDataTemplate>
  </controls:TreeView.ItemTemplate>
</controls:TreeView>

Now at last you need to give the ItemsSource of the TreeView. Add the following code in the method LoadData()

private void LoadData()
{
List<Category> categories = new List<Category>();
XDocument categoriesXML = XDocument.Load("Categories.xml");
categories = this.GetCategories(categoriesXML.Element("categories"));
this.MyTreeView.ItemsSource = categories;
}

Now go ahead and run your application.



You have successfully generated the Tree View nodes from an XML file.

Enjoy Coding.