Question

I need to add images to WPF treeview nodes, I’ve had a look at this example How do I add icons next to the nodes in a WPF TreeView? and it’s working fine except ALL nodes have the same image.I would like all the nodes in the treeview which do not have any children to either have no image or have a different image.

Here is my XAML where I set the image:

   <HierarchicalDataTemplate x:Key="NodeTemplate">
        <StackPanel Orientation="Horizontal" Margin="2">
            <Image Source="test.png"  Width="16" Height="16" SnapsToDevicePixels="True"/>
        <TextBlock x:Name="tb"/>
        </StackPanel>
        <HierarchicalDataTemplate.ItemsSource>
            <Binding>
                <Binding.XPath>child::node()</Binding.XPath>
            </Binding>
        </HierarchicalDataTemplate.ItemsSource>
        <HierarchicalDataTemplate.Triggers>
            <DataTrigger Binding="{Binding Path=NodeType}" Value="Text">
                <Setter TargetName="tb" Property="Text" Value="{Binding Path=Value}"></Setter>
            </DataTrigger>
            <DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
                <Setter TargetName="tb" Property="Text" Value="{Binding Path=Name}"></Setter>
            </DataTrigger>
        </HierarchicalDataTemplate.Triggers>
    </HierarchicalDataTemplate>

Below is a screen shot of the output

Could someone please suggest how can I achieve this, the possible solution can be either changing the XAML or programatically via C#.

Answer 1

Here is some code I used to solve almost the same problem.
(The data I designed this for is XML data, so XPath=”@name” means the value of the attribute name of the node, while Name means element type.)

<Window x:Class="NodeExplorer2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:my="clr-namespace:NodeExplorer2">
    <Window.Resources>
        <my:PathConverter x:Key="iconConverter"/>

        <HierarchicalDataTemplate x:Key="XmlTreeTemplate">
            <HierarchicalDataTemplate.ItemsSource>
                <Binding XPath="child::node()" />
            </HierarchicalDataTemplate.ItemsSource>

            <StackPanel Orientation="Horizontal">
                <Image x:Name="icon" SnapsToDevicePixels="True" Stretch="None" Margin="0,0,3,0" />
                <TextBlock Text={Binding XPath="@name"/>
            </StackPanel>
            <HierarchicalDataTemplate.Triggers>
                <DataTrigger Binding="{Binding Path=NodeType}" Value="Element">
                    <Setter TargetName="icon" Property="Source">
                        <Setter.Value>
                            <Binding Path="Name" Converter="{StaticResource iconConverter}">
                                <Binding.FallbackValue>
                                    <ImageSource>
                                        Data/Icons/unknown.png
                                    </ImageSource>
                                </Binding.FallbackValue>
                            </Binding>
                        </Setter.Value>
                    </Setter>
                </DataTrigger>
            </HierarchicalDataTemplate.Triggers>
        </HierarchicalDataTemplate>

Converter:

public class PathConverter: IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        //Console.WriteLine("Value:" + value);
            return "Data/Icons/" + value + ".png";
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        return "";
    }
}