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.

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.

Up Next
    Ebook Download
    View all
    Learn
    View all