Silverlight TreeView DataBinding Example with HierarchicalDataTemplate

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

treeview databind

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)

treeview databind example






About The Author

Suprotim Agarwal
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.

6 comments:

De said...

Great! Thanks for posting this.

Anonymous said...

Thanks for posting this.

I'm wondering, can I put checkboxes on these, much like in your previous example?

Thanks

Joe said...

Hi Suprotim, In an application I'm doing, I have similar HierarchicalDataTemplates. I have added CheckBoxes to the Templates and that is working fine. My problem is that I need to access the CheckBox from codebehind so I can dynamically set their visibility property. I have named the CheckBox using x:Name (tried Name also), but so far haven't been able to see the CheckBox in Intellisense. Is this possible?

Suprotim Agarwal said...

Joe: Share some code please and I will have a look at it

Joe said...

I appreciate your offer but I have a more pressing issue/question at the moment that I would appreciate your comment on. Using the Silverlight TreeView, is there a way to programmatically scroll a specific TreeViewItem into view? For future reference, how can one post code in a comment? When I click on "Post a Comment", I get a very small window which cannot be resized.

Suprotim Agarwal said...

Did you try the solution suggested in this thread

http://forums.silverlight.net/t/61123.aspx/1/10