dynamically changing images for treeviewitems

Question

I have trouble adding images dynamically for treeviewitems.

TreeViewItem tvi = new TreeViewItem { Header = ni.name, Uid = itemName, Background = color};

And here is my xaml

<TreeView.Resources>
    <Style TargetType="{x:Type TreeViewItem}">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Margin="2" Source="/Citi.Shade;component/Control/Images/folder1.jpg"/>
                                                <TextBlock Margin="2" Text="{Binding}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.Resources>

I see images added to all the items, but if i want to dynamically decide between 2 images based on whether the item is a folder or a file,i am unsure how to do it. I am not sure how to add it to the header in the TreeViewItem i am creating. Creating the stackpanel template programmatically for header before adding the treeviewitem as in this question i posted doesnt help. Treeviewitem with images programmatically

Answer 1

I figured this out. I had to change the TreeViewItem creation to:

TreeViewItem tvi = new TreeViewItem
{
    Header = new TreeItem() {
                                iName = ni.name,
                                iImage = img
                            },
            Uid = itemName,
            Background = color
};

TreeItem is a custom class, I created which looks like this:

public class TreeItem
{
    public string iName
    {
        get; 
        set;
    }

    public string iImage
    {
        get;
        set;
    }
  }

The respective XAML binding would be:

<TreeView.Resources>
    <Style TargetType="{x:Type TreeViewItem}">
        <Setter Property="HeaderTemplate">
            <Setter.Value>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <Image Source="{Binding Path=iImage}"/>
                        <TextBlock VerticalAlignment="Center" Text="{Binding Path=iName}"></TextBlock>
                    </StackPanel>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</TreeView.Resources>

Answer 2

With binding this should be easy. Below I have shared the sample code that I had created.

XAML:

<TreeView Name="treeView">
    <TreeView.ItemContainerStyle>
        <Style TargetType="{x:Type TreeViewItem}">
            <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" />
            <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" />
            <Setter Property="FontWeight" Value="Normal" />
            <Style.Triggers>
                <Trigger Property="IsSelected" Value="True">
                    <Setter Property="FontWeight" Value="Bold" />
                </Trigger>
            </Style.Triggers>
        </Style>
    </TreeView.ItemContainerStyle>
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate ItemsSource="{Binding SubElements}">
            <StackPanel Orientation="Horizontal">
                <Image Margin="2" Source="{Binding ImageLocation}" Height="30" Width="30"/>
                <TextBlock Margin="2" Text="{Binding HeaderText}" Background="{Binding BackgroundColor}"></TextBlock>
            </StackPanel>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

CodeBehind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();

            List<TreeViewElement> elements = new List<TreeViewElement>();
            TreeViewElement mainElement = new TreeViewElement() { ImageLocation = "Images/1.png", HeaderText = "MainElement1" };
            mainElement.SubElements = new List<TreeViewElement>();
            mainElement.SubElements.Add(new TreeViewElement() { ImageLocation = "Images/2.png", HeaderText = "SubElement1" });
            mainElement.SubElements.Add(new TreeViewElement() { ImageLocation = "Images/2.png", HeaderText = "SubElement2", BackgroundColor = "Blue" });
            elements.Add(mainElement);
            TreeViewElement mainElement2 = new TreeViewElement() {  HeaderText = "MainElement2" };
            elements.Add(mainElement2);
            this.treeView.ItemsSource = elements;
        }
    }

    public class TreeViewElement
    {
        public string ImageLocation { get; set; }
        public string HeaderText { get; set; }
        public string BackgroundColor { get; set; }
        public List<TreeViewElement> SubElements { get; set; }
    }
}

The following articles should help you to understand binding and the TreeView control.

http://www.codeproject.com/Articles/26288/Simplifying-the-WPF-TreeView-by-Using-the-ViewMode

http://www.codeproject.com/Articles/390514/Playing-with-a-MVVM-Tabbed-TreeView-for-a-File-Exp