I’ve never found TreeView to be terribly confusing by itself.  But usually I want to data bind a TreeView to a collection with some hierarchy, which leads me to HierarchicalDataTemplate, which didn’t always just write itself for me.  If you look at it in steps, though, there really is a pretty nice progression from ListBox to TreeView.  Like a lot of my posts, this goes way too deep if you just want to create a quick TreeView.  But it’s useful to look at it if you want the HierarchicalDataTemplate to just write itself …

First, start with the example of a simple ListBox:

We can add a trivial ItemTemplate to it:

… and now the list box items are red.

A ListBox is an ItemsControl, and what ItemsControls like to do is wrap their items in a container (more on thathere).  So the above essentially becomes:

That is, for each item in the ListBox, a ListBoxItem is created.  The ListBoxItem’s Content property is bound to the item, and the ListBoxItem’s ContentTemplate property is bound to the ListBox’s ItemTemplate.

On to TreeView …

A TreeView is also an ItemsControl; it generates TreeViewItem controls for its items.  And actually, if you just take the original example and change “ListBox” to “TreeView”, it looks almost the same:

You can similarly set an explicit item template:

The next step here caught be by surprise when I first saw it.  The TreeView is going to create a TreeViewItem for each of its items (the two strings).  A TreeViewItem is a HeaderedItemsControl, which is an ItemsControl (just like ListBox and TreeView), but also has a Header (and HeaderTemplate) property.  (The Header is the part of the tree view item that you always see, right next to the expand/collapse button.)  The Header/HeaderTemplate of a HeaderedItemsControl is analogous to the Content/ContentTemplate of a ContentControl.  So, whereas the ListBox items were bound to each ListBoxItem’s Content property, in the TreeView case the items are bound to the TreeViewItem’s Header property.  Similarly, the TreeView’s ItemTemplate property is bound to the TreeViewItem’s HeaderTemplate property.  And in the end we essentially have:

Now what we need is some hierarchy.  Those items are the MLS conferences, and there’s supposed to be teams in those conferences.  Here’s the full data:

var western = new Conference("Western")

{

    Teams =

    {

        new Team("Club Deportivo Chivas USA"),

        new Team("Colorado Rapids"),

        new Team("FC Dallas"),

        new Team("Houston Dynamo"),

        new Team("Los Angeles Galaxy"),

        new Team("Real Salt Lake"),

        new Team("San Jose Earthquakes"),

        new Team("Seattle Sounders FC"),

        new Team("Portland 2011"),

        new Team("Vancouver 2011")

    }

};

var eastern = new Conference("Eastern")

{

    Teams =

    {

        new Team("Chicago Fire"),

        new Team("Columbus Crew"),

        new Team("D.C. United"),

        new Team("Kansas City Wizards"),

        new Team("New York Red Bulls"),

        new Team("New England Revolution"),

        new Team("Toronto FC"),

        new Team("Philadelphia Union 2010")

    }

};

var league = new Collection<Conference>() { western, eastern };

DataContext = new

{

    WesternConference = western,

    EasternConference = eastern,

    League = league

};

(Note that the DataContext now has this sample data.)

And now we can show all the teams with some explicit hierarchy:

Of course, what you really want to do is bind the TreeView itself to the hierarchical collection (the League of the DataContext).  I.e.:

As you can see, there’s two items, as you’d expect, just like a ListBox.  Also just like a ListBox, it doesn’t show anything except for the ToString() of the Conference object.  So we need to give it an ItemTemplate to show the conference Name:

Now, recall that the TreeView here is creating two TreeViewItems, binding the TreeViewItem’s Header to the Conference object, and setting the TreeViewItem’s HeaderTemplate to the TreeView’s ItemTemplate.  Next question is, how do we get the TreeViewItem’s ItemsSource bound to Conference.Teams?  That’s where the HierarchicalDataTemplate comes in. 

A HierarchicalDataTemplate is a DataTemplate with some extra properties.  But if you don’t use the extra properties, it’s no different than DataTemplate.  For example, change the last markup from DataTemplate to HierarchicalDataTemplate, and nothing changes:

But HierarchicalDataTemplate adds two key properties:  ItemsSource and ItemTemplate.  The ItemsSource gets mapped to the TreeViewItem.ItemsSource, and the ItemTemplate gets mapped to the TreeViewItem.ItemTemplate.  So now we can show the conferences and the teams:

And if you want to show one level deeper in the hierarchy, you can change that team DataTemplate to a HierarchicalDataTemplate:

In the end, the bottom line that I keep in mind when I’m writing a HierarchicalDataTemplate, is that it’s the template for the TreeViewItem.Header, and it lets me set the TreeViewItem’s ItemsSource and ItemTemplate properties.