Generating Tree View Nodes from XML file in Silverlight 3 Application

This article tells us how to generate 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.

pic1.gif

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

pic2.gif

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

pic3.gif

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

pic4.gif

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:

pic5.gif

<?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.

pic6.gif

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

Enjoy Coding.