Overriding Style of WPF TreeView Items

Question

I am using the awesome MahAppsMetro WPF control suite. I have a tree view that loads the file system. I also want to display images in the TreeViewItems so I have overridden the metro tree style as follows

<UserControl x:Class="GDE.Tree.TreeView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:Caliburn="http://www.caliburnproject.org"
             xmlns:Metro="http://metro.mahapps.com/winfx/xaml/controls"
             mc:Ignorable="d" 
             d:DesignHeight="300" 
             d:DesignWidth="300">
    <UserControl.Resources>
        <HierarchicalDataTemplate x:Key="TreeTemplate" ItemsSource="{Binding Path=Children}"/>
    </UserControl.Resources>

    <!--TreeView-->
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBox Grid.Row="0" 
                 Margin="5"
                 IsReadOnly="True"
                 Text="{Binding SelectedPath, Mode=TwoWay}"/>
        <TreeView Grid.Row="1"
                  Margin="5"
                  ItemsSource="{Binding RootChildren}" 
                  ItemTemplate="{StaticResource TreeTemplate}">
            <TreeView.Resources>
                <Style TargetType="{x:Type TreeViewItem}" 
                       BasedOn="{StaticResource MetroTreeViewItem}">
                    <Setter Property="HeaderTemplate">
                        <Setter.Value>
                            <DataTemplate>
                                <StackPanel Orientation="Horizontal">
                                    <Image Name="img"
                                           Width="16"
                                           Height="16"
                                           Stretch="Fill"
                                           Source="{Binding Path=Icon, Mode=OneTime}"
                                           VerticalAlignment="Center"
                                           HorizontalAlignment="Center"/>
                                    <TextBlock Text="{Binding DisplayName, Mode=OneTime}" 
                                               Margin="5,0,0,0" 
                                               VerticalAlignment="Center" 
                                               HorizontalAlignment="Left"/>
                                </StackPanel>
                            </DataTemplate>
                        </Setter.Value>
                    </Setter>
                </Style>
            </TreeView.Resources>
        </TreeView>
    </Grid>
</UserControl>

But this does not seem to work as intended and I can't figure out why. From this XAML, I get no binding errors and the visuals look like:

I have gone more extensive with the XAML mark up but I am getting the exact same visuals. How can I change the above XAML to give me the Image/TextBlocks as well as the MahApps look and feel?

Thanks for your time.

Answer 1

To sum up comments instead of changing Style you need to move StackPanel from DataTemplate directly into HierarchicalDataTemplate as at the moment used template has no content:

<HierarchicalDataTemplate x:Key="TreeTemplate" ItemsSource="{Binding Path=Children}">
    <StackPanel Orientation="Horizontal">
        <Image Name="img" ... />
        <TextBlock Text="{Binding DisplayName, Mode=OneTime}" ... />
    </StackPanel>
</HierarchicalDataTemplate>