Tree View Using Silverlight

Image via Wikipedia

 In this post I will explain about Tree View control using silverlight.

Tree View : Tree View control comes with Silverlight Toolkit, Before starting with this control , you need to have Silverlight toolkit installed on your machine,

This control helps us to display the data in Hierarchical format as shown beside image, which will have root nodes and child nodes, Each node can have any no. of childs.

add a reference to the Microsoft.Windows.Controls.dll. in your silverlight project.

here i am using some sample data in form of XML to load and display Tree view.

The following is the xml file, which has a root element and few childs , represents the list of company names.

<RootElement>
  <Company Name="Infosys"></Company>
  <Company Name="Clearway"></Company>
  <Company Name="KwikiSpace">
    <Company Name="KwikiSpace Hyd"></Company>
      <Company Name="KwikiSpace Bang"></Company>
        <Company Name="KwikiSpace Mum"></Company>
  </Company>
  <Company Name="Wipro"></Company>
  <Company Name="Financial Technologies"></Company>
  <Company Name="Honey Well"></Company>
  <Company Name="Acuvate"></Company>
  <Company Name="Dell"></Company>
  <Company Name="Infotech"></Company>
  <Company Name="TCS"></Company>
  <Company Name="Maziktech"></Company>
  <Company Name="I Link Software"></Company>
<!--RootElement>

xmlns:common=”clr-namespace:System.Windows;assembly=System.Windows.Controls”. is the namespace used in the Xaml file to add treeview control.

<UserControl x:Class="TreeViewInSilverlight.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"
    d:DesignHeight="300" d:DesignWidth="400"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls">

In Xaml , I have added Treeview and it has a ItemTemplate as Stackpanel with a TextBlock to display the Node value , When you click/select a node, then value ofthe node will be display on the right hand side textblock.

The following is the xaml.cs file, it used a namespace for windows.control.dll

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Xml.Linq;

namespace TreeViewInSilverlight
{
    public partial class MainPage : UserControl
    {
        List ItemList = new List();

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

        void FillItemList()
        {
            XDocument xdoc=XDocument.Load("XMLFile.xml");
            ItemList = GetCompany(xdoc.Element("RootElement"));
            trvwMyself.ItemsSource = ItemList;
        }

        private List GetCompany (XElement element)
        {
            return (from Company in element.Elements("Company")

                    select new BindTreeView()
                    {
                        Name = Company.Attribute("Name").Value,

                        SubCompany = GetCompany(Company)

                    }).ToList();
        }
private void trvwMyself_SelectedItemChanged (object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            BindTreeView item = (BindTreeView)e.NewValue;           
            TextBlock txtblk = new TextBlock();
            txtblk.Text = item.Name;
            txtblk.Height = 100;
            txtblk.FontSize = 15;
            txtblk.Width = 100;
            stkpnl1.Children.Clear();
            stkpnl1.Visibility = Visibility.Visible;
            stkpnl1.Children.Add(txtblk);
        }

Here we have a class called BindTreeView which has a two public properties, one for Node name and another for list of child nodes related to this node.

public class BindTreeView.
    {
            public string Name { get; set; }  // Name of Node

            public List SubCompany { get; set; } // list of child notes for each node.
    }

This method will be called when page is loaded and it will read all the contents of the xml file which is added in silverlight project, with the help of Load method and it call GetCompany method and it returns list of BindTreeView classes and it is assigned as itemsource to the treeview as given below..

void FillItemList()
        {
            XDocument xdoc=XDocument.Load("XMLFile.xml");
            ItemList = GetCompany(xdoc.Element("RootElement"));
            trvwMyself.ItemsSource = ItemList;
        }

This method is a Recursive method, which is used to fill BindTreeView class and this class is assigned as Itemsource to “trvwMyself” TreeView.

private List GetCompany (XElement element)
        {
            return (from Company in element.Elements("Company")

                    select new BindTreeView()
                    {
                        Name = Company.Attribute("Name").Value,

                        SubCompany = GetCompany(Company)                   
                    }).ToList();
        }

We have selection changed event, which tracks the click/ selected node from treeview and get the datacontext of that node and other details too.

private void trvwMyself_SelectedItemChanged (object sender, RoutedPropertyChangedEventArgs<object> e)
        {
            BindTreeView item = (BindTreeView)e.NewValue;           
            TextBlock txtblk = new TextBlock();
            txtblk.Text = item.Name;
            txtblk.Height = 100;
            txtblk.FontSize = 15;
            txtblk.Width = 100;
            stkpnl1.Children.Clear();
            stkpnl1.Visibility = Visibility.Visible;
            stkpnl1.Children.Add(txtblk);
        }