Generating Tree View Nodes From XML File In Silverlight 3 Application

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.

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

{codecitation class="brush: xml; gutter: true;" width="650px"}
<?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>


{/codecitation}

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

{codecitation class="brush: csharp; gutter: true;" width="650px"}

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();
}



{/codecitation}

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.

{codecitation class="brush: xml; gutter: true;" width="650px"}

xmlns:myControl="clr-namespace:System.Windows;assembly=System.Windows.Controls"

{/codecitation}

Now the xaml for TreeView Data Template:

{codecitation class="brush: xml; gutter: true;" width="650px"}

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


{/codecitation}

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

{codecitation class="brush: csharp; gutter: true;" width="650px"}

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;
}



{/codecitation}

Now go ahead and run your application.

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

Thank you

About the Author

Diptimaya Patra Description :I am a Master in Computer Application (MCA) from SRM University, Chennai. I am MCTS in ASP.Net Web Development, and MOSS 2007 Administration. I have extreme exposure to Microsoft Technologies in recent times like Silverlight 2, Silverlight 3. I am from Cuttack, Orissa. You can reach me using this mail (diptimaya.patra@gmail.com). Currently I am working as a Software Engineer in UST Global Inc in Trivandrum Center. Occupation :Software Engineer Company : UST Global. Location : India Follow me at twitter : http://twitter.com/dpatra