Using TreeView control in silverlight


In this article we are going to look at how we can use a TreeView control. The TreeView is a control with tree structure. The main purpose of a Tree View control is to display hierarchical data in the form of nodes. Each node in turn has children that can be collapsed and expanded.

In this article we are going to look at how we can use a TreeView control. The TreeView is a control with tree structure. The main purpose of a Tree View control is to display hierarchical data in the form of nodes. Each node in turn has children that can be collapsed and expanded.

Here we are going to use an XML file which would be a datasource for our TreeView control. We are going to bind the data to TreeView control using Linq.

Step 1: Create an XML file as defined below in a "New Silverlight Application" Project and name it as "Courses.xml".


<?xml version="1.0" encoding="utf-8" ?>
<Courses>
<Course name=".NET">
<Course name="CLR"></Course>
<Course name="Generics"></Course>
<Course name="Assemblies"></Course>
<Course name="Multithreading"></Course>
</Course>

<Course name="Java">
<Course name="Inheritence"></Course>
<Course name="Encapsulation"></Course>
<Course name="J2EE"></Course>
<Course name="JSP"></Course>
</Course>
<Course name="Ruby"></Course>
<Course name="Python"></Course>
<Course name="Oracle"></Course>

</Courses>




Step 2:Add a New Class "Course.cs" to the Silverlight project as defined below:

public class Course
{
public string Name { get; set; }
public List SubTopics { get; set; }

}


Step 3:In the MainPage.xaml.cs file, We have code to bind the data to the TreeView control.

Add below 2 lines at the top of the file:
using System.Xml;
using System.Xml.Linq;
and add reference to the assembly :System.Xml.Linq.


public MainPage()
{
InitializeComponent();
LoadData();
}

private void LoadData()
{

List courses = new List();
XDocument CoursesXML = XDocument.Load( "Courses.xml" );
courses = this.GetCourses(CoursesXML.Element("Courses"));
this.MyTreeView.ItemsSource = courses;

}

//use recursion in order to create the hierarchical structure of the Courses in the list and to prepare it for use.
private List GetCourses(XElement element)
{
return ( from course in element.Elements( "Course" )
select new Course()
{
Name = course.Attribute( "name" ).Value,
SubTopics = this.GetCourses(course)
} ).ToList(); }


}


In the above code, In the LoadData() method, We are creating a List of Course objects. Using XDocument which is found in System.Xml.Linq class, We are loading the xml file "Courses.xml" in the memory. Then we are going to call the GetCourses method by passing the reference to root node "Courses" of the xml file. This method recursively iterates through the XML elements of the xml documents and gets the Name and its associated SubTopics for Each course along with its name and adds it to the List. finally this List is returned.

Step 4: In the MainPage.xaml file : We are binding the name and SubTopics to the TreeView using the HierarchicalDataTemplate as shown below:


<sdk:TreeView x:Name="MyTreeView">
<!-- In the Item template we need to define the hierarchical structure of the collection. For that purpose we use the HierarchicalDataTemplate:-->
<sdk:TreeView.ItemTemplate>
<sdk:HierarchicalDataTemplate x:Name="SubTopics" ItemsSource="{Binding SubTopics}">
<StackPanel>
<TextBlock Text="{Binding Name}" ></TextBlock>
</StackPanel>
</sdk:HierarchicalDataTemplate>
</sdk:TreeView.ItemTemplate>
</sdk:TreeView>


The output would be:


TreeView Control


Comments

Author: T D08 Jan 2012 Member Level: Bronze   Points : 2

I like the simplicity of the solution. However, I need to go at least 4 levels deep in the Hierarchy. When I added an additional level the program crashed in the "courses = this.GetCourses(CoursesXML.Element("Courses"));" Statement when it looks like the returned value is null. Does the template need to be modified to accomodate more than 2 nested levels. If so can you provide a template/sample that illustrates a 4 level nested XML file. This would be greatly appreciated



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: