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
}
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
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
{
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:
Follow
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