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

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