Using TreeView control in silverlight

Share on TwitterShare on TumblrSubmit to StumbleUponSave on DeliciousDigg This

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" ?>
	<Course name=".NET">
		 <Course name="CLR"></Course>
		 <Course name="Generics"></Course>
		 <Course name="Assemblies"></Course>
		 <Course name="Multithreading"></Course>

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


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

        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:HierarchicalDataTemplate x:Name="SubTopics" ItemsSource="{Binding SubTopics}">
                        <TextBlock Text="{Binding Name}" ></TextBlock>