Silverlight TreeView DataBinding Example with HierarchicalDataTemplate

Tweet

In this post we will see how to programmatically databind a Silverlight TreeView control using the HierarchicalDataTemplate. In a previous post Silverlight: Add a CheckBox to a TreeView and Handle Events, I had asked if anyone wants to see a Hierarchical Data Template example for a TreeView. DevCurry.com reader ‘Mike Long’ requested a demo for the HierarchicalDataTemplate, so here it is.

Create a Silverlight 4 application and drag drop a TreeView control in it. Now switch to the code behind class and add the following code:

using System.Windows.Controls;
using System.Collections.ObjectModel;

namespace SilverlightTreeView
{
    public partial class MainPage : UserControl
    {
        // Create the TreeView collection.
        static public ObservableCollection<SomeCollection> tvColl =
            new ObservableCollection<SomeCollection>();

        public MainPage()
        {
            InitializeComponent();

            // Add some items to this collection
            SomeCollection siteNames = new SomeCollection("Sites");
            siteNames.ChildNodes.Add(
                new SomeCollection("www.DotNetCurry.com"));
            siteNames.ChildNodes.Add(
                new SomeCollection("www.DevCurry.com"));
            siteNames.ChildNodes.Add(
                new SomeCollection("www.SqlServerCurry.com"));
            SomeCollection bookNames = new SomeCollection("Books");
            bookNames.ChildNodes.Add(
                new SomeCollection("Stay Hungry Stay Foolish"));
            bookNames.ChildNodes.Add(
                new SomeCollection("Accidental Billionaires"));
            bookNames.ChildNodes.Add(
                new SomeCollection("Monk Who Sold His Ferrari"));

            tvColl.Add(siteNames);
            tvColl.Add(bookNames);
            tv.DataContext = tvColl;         
        }
    }

    public class SomeCollection
    {
      public string ParentName { get; set; }
      public ObservableCollection<SomeCollection> ChildNodes { get; set; }

      private SomeCollection()
      {
          ChildNodes = new ObservableCollection<SomeCollection>();
      }

      public SomeCollection(string parentName): this()
      {
          ParentName = parentName;
      }
    }
}

Nothing fancy here! We have just declared a Collection, populated it and bound it to the TreeView. The collection represents the data we saw in our previous article. Now switch to your XAML code and add the following XAML

What we are doing above is binding the TreeView to data using a HierarchicalDataTemplate to. The ItemsSource property of the Datatemplate specifies the data source for the sub-nodes and the ItemTemplate property defines the structure for those nodes.

If you observe there are two templates defined. The first template ‘SubTemplate’ is for the child nodes in the treeview and the ‘NameTemplate’ is for the items that will contains these child nodes.

That’s it. Run the application and you should see a similar output (expand the nodes)

Tweet

About The Author

Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.