[WPF] DataTemplate inside HierarchicalDataTemplate

Question

I needed to build a custom treeview as a user control. I called it for the sake of the example TreeViewEx :

<UserControl x:Class="WpfApplication4.TreeViewEx"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Name="root">
    <Grid>
        <TreeView ItemsSource="{Binding Path=ItemsSource, ElementName=root}">
            <TreeView.ItemTemplate>
                <HierarchicalDataTemplate ItemsSource="{Binding Children}">
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="Node : "/>
                        <ContentControl Content="{Binding Path=AdditionalContent, ElementName=root}"/>
                    </StackPanel>
                </HierarchicalDataTemplate>
            </TreeView.ItemTemplate>
        </TreeView>
    </Grid>
</UserControl>

The idea is to have a fixed part of the content of the ItemTemplate and a customizable part of it.

Of course, I created two dependency properties on the TreeViewEx class :

public partial class TreeViewEx
{
    public static readonly DependencyProperty ItemsSourceProperty = DependencyProperty.Register(
        "ItemsSource", typeof(IEnumerable), typeof(TreeViewEx));

    public IEnumerable ItemsSource
    {
        get { return (IEnumerable)GetValue(ItemsSourceProperty); }
        set { SetValue(ItemsSourceProperty, value); }
    }

    public static readonly DependencyProperty AdditionalContentProperty = DependencyProperty.Register(
        "AdditionalContent", typeof(object), typeof(TreeViewEx));

    public object AdditionalContent
    {
        get { return GetValue(AdditionalContentProperty); }
        set { SetValue(AdditionalContentProperty, value); }
    }

    public TreeViewEx()
    {
        InitializeComponent();
    }
}

Having a simple node class like so :

public class Node
{
    public string Name { get; set; }
    public int Size { get; set; }
    public IEnumerable<Node> Children { get; set; }
}

I would feed the treeview. I place an instance of TreeViewEx on the MainWindow of a WPF test project :

<Window x:Class="WpfApplication4.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525"
        xmlns:local="clr-namespace:WpfApplication4">
    <Grid>
        <local:TreeViewEx x:Name="tree">
            <local:TreeViewEx.AdditionalContent>
                <TextBlock Text="{Binding Name}"/>
            </local:TreeViewEx.AdditionalContent>
        </local:TreeViewEx>
    </Grid>
</Window>

And finally feed it :

public partial class MainWindow
{
    public MainWindow()
    {
        InitializeComponent();

        var dummyData = new ObservableCollection<Node>
        {
            new Node
            {
                Name = "Root", 
                Size = 3,
                Children = new ObservableCollection<Node>
                {
                    new Node{
                        Name="Child1",
                        Size=2,
                        Children = new ObservableCollection<Node>{
                            new Node{
                                Name = "Subchild", 
                                Size = 1
                            }

                        }
                    }

                }
            }
        };

        tree.ItemsSource = dummyData;
    }
}

However it doesn't work as expected namely at first the ContentControl has the data but as I expand the nodes it does not display the ContentControl's content.

I don't really get it.. I should use a DataTemplate or something else?

Answer 1

The problem is that you're setting the content to an instance of a control, and that control can only have one parent. When you expand the tree and it adds it to the second node, it removes it from the first one.

As you suspected, you want to supply a DataTemplate to TreeViewEx instead of a control. You can use a ContentPresenter to instantiate the template at each level of the tree:

Replace the AdditionalContentProperty with:

public static readonly DependencyProperty AdditionalContentTemplateProperty = DependencyProperty.Register(
    "AdditionalContentTemplate", typeof(DataTemplate), typeof(TreeViewEx));

public DataTemplate AdditionalContentTemplate
{
    get { return (DataTemplate)GetValue(AdditionalContentTemplateProperty); }
    set { SetValue(AdditionalContentTemplateProperty, value); }
}

change the HierarchicalDataTemplate in your UserControl's XAML to:

<StackPanel Orientation="Horizontal">
    <TextBlock Text="Node : "/>
    <ContentPresenter ContentTemplate="{Binding Path=AdditionalContentTemplate, ElementName=root}"/>
</StackPanel>

and change MainWindow to:

<local:TreeViewEx x:Name="tree">
    <local:TreeViewEx.AdditionalContentTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Name}"/>
        </DataTemplate>
    </local:TreeViewEx.AdditionalContentTemplate>
</local:TreeViewEx>