This post follows from the previous post called WPF TreeView Data Binding. This post is based on the article at WPF Tutorial called TreeView, data binding and multiple templates.

WPF Tutorial says “In the next example, I’ve taken a slightly more complex case, where I want to show a tree of families and their members. A family should be represented in one way, while each of its members should be shown in another way. I achieve this by creating two different templates and specifying them as resources of the tree (or the Window or the Application – that’s really up to you), and then allowing the TreeView to pick the correct template based on the underlying type of data.”

Below is the XAML code.

<Window x:Class="TreeViewMultipleTemplates.MainWindow"
        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"
        xmlns:local="clr-namespace:TreeViewMultipleTemplates"
        xmlns:self="clr-namespace:TreeViewMultipleTemplates"
        mc:Ignorable="d"
        WindowStartupLocation="CenterScreen"
        Title="TreeViewMultipleTemplates" Height="250" Width="310">
    <Grid Margin="10">
        <TreeView Name="trvFamilies">
            <TreeView.Resources>
                <HierarchicalDataTemplate DataType="{x:Type self:Family}" ItemsSource="{Binding Members}">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="group.png" Margin="0,0,5,0" />
                        <TextBlock Text="{Binding Name}" />
                        <TextBlock Text=" [" Foreground="Blue" />
                        <TextBlock Text="{Binding Members.Count}" Foreground="Blue" />
                        <TextBlock Text="]" Foreground="Blue" />
                    </StackPanel>
                </HierarchicalDataTemplate>
                <DataTemplate DataType="{x:Type self:FamilyMember}">
                    <StackPanel Orientation="Horizontal">
                        <Image Source="user.png" Margin="0,0,5,0" />
                        <TextBlock Text="{Binding Name}" />
                        <TextBlock Text=" (" Foreground="Green" />
                        <TextBlock Text="{Binding Age}" Foreground="Green" />
                        <TextBlock Text=" years)" Foreground="Green" />
                    </StackPanel>
                </DataTemplate>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</Window>

Here is the code.

using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.Windows;

namespace TreeViewMultipleTemplates
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            List<Family> families = new List<Family>();

            Family family1 = new Family() { Name = "The Doe's" };
            family1.Members.Add(new FamilyMember() { Name = "John Doe", Age = 42 });
            family1.Members.Add(new FamilyMember() { Name = "Jane Doe", Age = 39 });
            family1.Members.Add(new FamilyMember() { Name = "Sammy Doe", Age = 13 });
            families.Add(family1);

            Family family2 = new Family() { Name = "The Moe's" };
            family2.Members.Add(new FamilyMember() { Name = "Mark Moe", Age = 31 });
            family2.Members.Add(new FamilyMember() { Name = "Norma Moe", Age = 28 });
            families.Add(family2);

            trvFamilies.ItemsSource = families;
        }
    }
    public class Family
    {
        public Family()
        {
            this.Members = new ObservableCollection<FamilyMember>();
        }
        public string Name { get; set; }
        public ObservableCollection<FamilyMember> Members { get; set; }
    }
    public class FamilyMember
    {
        public string Name { get; set; }
        public int Age { get; set; }
    }
}