How can I change the TreeView Icon into a folder icon?

Question

I'm trying to change the icon of my TreeView in a folder icon. Also when it collapses it needs to have an opened folder icon.

My treeview has databound items in it and the code is:

<TreeView x:Name="TreeViewCategories"  Grid.Row="0" Grid.Column="1" Height="610" HorizontalAlignment="Left"  Margin="29,111,0,0" VerticalAlignment="Top" Width="315" BorderThickness="0" Background="Transparent" >
    <TreeView.ItemTemplate>
        <HierarchicalDataTemplate  ItemsSource="{Binding Items}">
            <TextBlock FontSize="20" Text="{Binding Name}" PreviewMouseDown="TextBlock_PreviewMouseDown"/>
        </HierarchicalDataTemplate>
    </TreeView.ItemTemplate>
</TreeView>

Also this is how I fill the treeview with items from XML (It's a snipped out of alot of code:

private void LoadHospitalXML()
{
    try
    {
        FileStream fs = new FileStream("ConfigOrgHospital.xml", FileMode.Open, FileAccess.Read);

        var xml = XmlReader.Create(fs);

        rootElement = ConvertHospitalData(xml);

        this.TreeViewCategories.ItemsSource = null;
        List<HospitalWrapper> li = new List<HospitalWrapper>();
        var hosp = rootElement.Items.FirstOrDefault();
        if (hosp != null)
        {
            foreach (var i in hosp.Hospital)
            {
                li.AddIfNotNull(CreateHospList(i));
            }
        }

        this.TreeViewCategories.ItemsSource = li;
    }
    catch (Exception e)
    {
        MessageBox.Show(e.Message);
    }

}

private HospitalWrapper CreateHospList(object obj)
{
    var newItem = new HospitalWrapper();

    newItem.Context = obj;
    //Hospital Names//
    if (obj is HospitalDataHospitalsHospital)
    {
        var hosp = (HospitalDataHospitalsHospital)obj;

        //newItem.Title = "Hospitals";
        newItem.Name = hosp.DefaultName;

        var tmp = new HospitalWrapper();
        tmp.Name = "Sites";
        tmp.IsTitle = true;

        if (hosp.Sites != null)
            foreach (var i in hosp.Sites)
            {
                tmp.Items.AddIfNotNull(CreateHospList(i));
            }
        newItem.Items.Add(tmp);

        tmp = new HospitalWrapper();
        tmp.Name = "Specialties";
        tmp.IsTitle = true;

        if (hosp.Deps != null)
            foreach (var j in hosp.Deps)
            {

                tmp.Items.AddIfNotNull(CreateHospList(j));
            }

        newItem.Items.Add(tmp);
    }
}

Answer 1

Incidentally i did something like this just a few days ago. In my application a folder icon is added in the HierarchicalDataTemplate to those objects which behave like folders, i use a trigger to change the icon based on whether the item is expanded or not, here's the relevant bit of XAML:

    <HierarchicalDataTemplate DataType="{x:Type data:FeedComposite}"
                              ItemsSource="{Binding Path=Children}">
        <StackPanel Orientation="Horizontal" Margin="1">
            <StackPanel.Children>
                <Image>
                    <Image.Style>
                        <Style BasedOn="{StaticResource IconImageStyleSmall}" TargetType="Image">
                            <Setter Property="Source" Value="{Binding Source={StaticResource Icon_FolderClosed}, Mode=OneTime}"/>
                            <Style.Triggers>
                                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=IsExpanded}" Value="True">
                                    <Setter Property="Source" Value="{Binding Source={StaticResource Icon_FolderOpen}, Mode=OneTime}"/>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Image.Style>
                </Image>
                <TextBlock Text="{Binding Title}"/>
            </StackPanel.Children>
        </StackPanel>
    </HierarchicalDataTemplate>

Where {StaticResource Icon_FolderOpen} and {StaticResource Icon_FolderClosed} are BitmapImages that hold the icons for the folder states. IconImageStyleSmall is a style which sets the MaxWidth and MaxHeight of the images to something appropriate.

---

Edit: For completion's sake.

<BitmapImage x:Key="Icon_FolderOpen"   UriSource="pack://application:,,,/ImageResources/Icons/FolderOpen.ico"   />
<BitmapImage x:Key="Icon_FolderClosed" UriSource="pack://application:,,,/ImageResources/Icons/FolderClosed.ico" />

<Style x:Key="IconImageStyleSmall" TargetType="Image">
    <Setter Property="MaxWidth" Value="16"/>
    <Setter Property="MaxHeight" Value="16"/>
    <Setter Property="Margin" Value="1"/>
</Style>

Icons used