Silverlight / WPF - hierarchicaldatatemplate treeview databinding

First take a look at the LINQ to SQL Object Relational Diagram from the Northwind database. In Example 1 & 2 we will use the Product, Category and Supplier entities and their associations.

1) Open the Data.cs file in the NorthwindData project. Create a GetCategories_Products method in the DataProvider class which will return a collection of categories with their products.

There is a one-to-many association between the categories (parent) and the products (child). So if we retrieve the categories, we can have access to the collection of products. Because we like to fetch all data which are needed in one time, we need to set the LoadOptions property of the DataContext.

public class DataProvider
{
  public IEnumerable<Category> GetCategories_Products()
  {
    NorthWindDataContext dc = new NorthWindDataContext();
    DataLoadOptions options = new DataLoadOptions();
    options.LoadWith<Category>(p => p.Products);
    dc.LoadOptions = options;
 
    return dc.Categories;
  }
}

public partial class WindowTreeView : Window
{
  public WindowTreeView()
  {
    InitializeComponent();
 
    NorthwindData.DataProvider dataProvider = new NorthwindData.DataProvider();
 
    treeView1.ItemsSource = dataProvider.GetCategories_Products();
  }
}

3) Switch to the XAML file and add a reference called northwind to the NorthwindData namespace and assembly.

4) One of the great features of WPF is databinding. It is very easy to link object properties to the user interface. So add a TreeView component and use 3 databindings in the HierarchicalDataTemplate (main nodes) and HierarchicalDataTemplate.ItemTemplate (sub nodes) parts.

Nesting HierarchicalDataTemplates will not work in Silverlight 2 due to a limitation in the Silverlight XAML parser. Take a look at example 1C how to work around this issue in Silverlight.

<Window x:Class="WpfDataBinding.WindowTreeView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 
    xmlns:northwind="clr-namespace:NorthwindData;assembly=NorthwindData"
    xmlns:local="clr-namespace:WpfDataBinding"
 
    Title="WindowTreeView" Height="200" Width="900" WindowState="Maximized">
 
    <TreeView Name="treeView1">
        <TreeView.ItemTemplate>
            <HierarchicalDataTemplate ItemsSource="{Binding Path=Products}">
                <TextBlock Text="{Binding Path=CategoryName}" />
                <HierarchicalDataTemplate.ItemTemplate>
                    <DataTemplate>
                       <TextBlock Text="{Binding Path=ProductName}" /> 
                    </DataTemplate>
                </HierarchicalDataTemplate.ItemTemplate>
            </HierarchicalDataTemplate>
        </TreeView.ItemTemplate>
    </TreeView>
</Window>

Nesting a HierarchicalDataTemplate in Silverlight isn't possible. This is a known issue. You will get a "Message: one root element" parse error. This can be solved by using templates and resources like demonstrated at the bottom of following example.

A TreeView represents data in a hierarchical view in a parent child relationship where a parent node can be expanded or collapse. The left side bar of Windows Explorer is an example of a TreeView.

The TreeView tag represents a WPF TreeView control in XAML.

<TreeView></TreeView>

The Width and Height properties represent the width and the height of a TreeView.  The Name property represents the name of the control, which is a unique identifier of a control. The Margin property tells the location of a TreeView on the parent control. The HorizontalAlignment and VerticalAlignment properties are used to set horizontal and vertical alignments.

The following code snippet sets the name, height, and width of a TreeView control.  The code also sets horizontal alignment to left and vertical alignment to top.

<TreeView Margin="10,10,0,13" Name="TreeView1" HorizontalAlignment="Left"

       VerticalAlignment="Top" Width="194" Height="200" />

Adding TreeView Items

A TreeView control hosts a collection of TreeViewItem. The Header property is the text of the item that is displayed on the view. The following code snippet adds a parent item and six child items to a TreeView control.

<TreeView Margin="10,10,0,13" Name="TreeView1" HorizontalAlignment="Left"

 VerticalAlignment="Top" Width="194" Height="200">

    <TreeViewItem Header="Cold Drinks">

    <TreeViewItem Header="Coke"></TreeViewItem>

    <TreeViewItem Header="Pepsi"></TreeViewItem>

    <TreeViewItem Header="Orange Juice"></TreeViewItem>

    <TreeViewItem Header="Milk"></TreeViewItem>

    <TreeViewItem Header="Iced Tea"></TreeViewItem>

    <TreeViewItem Header="Mango Shake"></TreeViewItem>

    </TreeViewItem>

</TreeView>

By default, the parent node is collapsed but when you click on it, the expanded view looks like Figure 1.

Figure 1. TreeView with items

Adding TreeView Items Dynamically

In previous section, we saw how to add items to a TreeView at design-time from XAML. We can add items to a TreeView from the code.  

Let's change our UI and add a TextBox and a button control to the page. The XAML code for the TextBox and Button controls look like following:

<TextBox Height="23" HorizontalAlignment="Left" Margin="8,14,0,0"

       Name="textBox1" VerticalAlignment="Top" Width="127" />

<Button Height="23" Margin="140,14,0,0" Name="button1" VerticalAlignment="Top"

      HorizontalAlignment="Left" Width="76" Click="button1_Click">

      Add Item

</Button>

The final UI looks like Figure 2. On Add Item button click event handler, we are going to add a new item to the first parent node of the TreeView.

Figure 2.

On button click event handler, we add the content of TextBox to the TreeViewItem by calling TreeViewItem.Items.Add method. The following code adds TextBox contents to the TreeViewItem items.

private void button1_Click(object sender, RoutedEventArgs e)

{

    TreeViewItem newChild = new TreeViewItem();

    newChild.Header = textBox1.Text;

    Parent.Items.Add(newChild);

}

On button click event handler, we add the content of TextBox to the TreeView by calling TreeViewItem.Items.Add method.

Now if you enter text in the TextBox and click Add Item button, it will add contents of the TextBox to the TreeView.