WPF Treeview Icon Plus Minus

Question

I'm trying to add icons in my treeview but it's not showing up. The HierarchicalDataTemplate is in the windows resources and treeview is in the Grid.

Can any body tell me what is the mistake i'm making?

Here is the XML:

<Window x:Class="Treeview.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Support" Height="700" Width="1024" SizeToContent="WidthAndHeight" 
        mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
        d:DesignHeight="229" Icon="/Test;component/Images/Treeview.jpg">

    <Window.Resources>

        <XmlDataProvider x:Key="questions" XPath="Questions/Question" />

        <HierarchicalDataTemplate x:Key="rootTemplate">

            <HierarchicalDataTemplate.ItemsSource>
                <Binding XPath="child::*" />
            </HierarchicalDataTemplate.ItemsSource>
            <StackPanel Orientation="Horizontal">

                <CheckBox Name="checkBoxTree"  Checked="TreeView_Checked" Unchecked="checkBoxTree_Unchecked" />
                <Image Style="{StaticResource ExpandingImageStyle}">
                    <Image.Resources>
                        <BitmapImage x:Key="Icon_Closed" UriSource="Images/Plus.ico"/>
                        <BitmapImage x:Key="Icon_Open" UriSource="Images/Minus.ico"/>
                    </Image.Resources>
                </Image>
                <TextBlock Text="{Binding XPath=@Name, Mode=TwoWay}" />

                <TextBlock>
                            <Hyperlink NavigateUri="{Binding XPath=@WebSite}" RequestNavigate="Hyperlink_RequestNavigate">
                                <TextBlock Text="{Binding XPath=@WebSite}" /> 
                            </Hyperlink>    
                        </TextBlock>
            </StackPanel>

        </HierarchicalDataTemplate>

    </Window.Resources>
    <Grid>

            <TreeView Name="TreeViewer" HorizontalAlignment="Left" Height="220" Margin="10,116,0,0" Grid.Row="1" 
                      VerticalAlignment="Top" Width="700" Visibility="Collapsed"  FontSize="15" 
   ItemsSource="{Binding Source={StaticResource questions}}" ItemTemplate="{StaticResource rootTemplate}"  >

                <TreeView.Resources>


                    <Style x:Key="ExpandingImageStyle" TargetType="{x:Type Image}">
                        <Setter Property="Source" Value="{DynamicResource Icon_Closed}"/>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=IsExpanded}" Value="True">
                                <Setter Property="Source" Value="{DynamicResource Icon_Open}"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </TreeView.Resources> 
            </TreeView>

    </Grid>

</Window>

Sheridan · Accepted Answer · 2013-11-12T14:26:11.380

1

Surely with that XAML you have a Warning shown in the Visual Studio Error List like the following?:

The resource "ExpandingImageStyle" could not be resolved.

This is telling you that your HierarchicalDataTemplate can't find the Resource. If you move that Style to the top of your Window.Resources, the first problem should disappear. However, when you do that, you'll then get a warning that the Style can't find the two BitmapImage Resources. So you'd better move those two Resources to the top of your Window.Resources:

<BitmapImage x:Key="Icon_Closed" UriSource="Images/Plus.ico"/>
<BitmapImage x:Key="Icon_Open" UriSource="Images/minus.ico"/>
<Style x:Key="ExpandingImageStyle" TargetType="{x:Type Image}">
    ...
</Style>
<XmlDataProvider x:Key="questions" XPath="Questions/Question" />

<HierarchicalDataTemplate x:Key="rootTemplate">
    ...
        <Image Style="{StaticResource ExpandingImageStyle}" />
    ...
</HierarchicalDataTemplate>

If you find that that still doesn't work, please take a look at any errors or warnings that you may get in either the Error List or Output Window in Visual Studio and let us know.

edited Nov 12 '13 at 14:26

answered Nov 12 '13 at 13:57

Sheridan

68,826
24
143
183

I did put the 2 resources on the top. What about the style and how can i call the style in the treeview? – linguini Nov 12 '13 at 14:14
I'm getting a error message ''Image' TargetType does not match type of element 'TreeView'. – linguini Nov 12 '13 at 14:22
1

You need to order *all* of your `Resources` as I showed you in my example. I don't quite understand your second question... you will be able to apply any `Style` that is declared in your `Window.Resources` section to elements in your `HierarchicalDataTemplate`. Regarding your error: don't try to apply an `Image` `Style` to a `TreeView`. – Sheridan Nov 12 '13 at 14:26
I got it. Still i see the default arrow in the treeview. How can i remove that replace with the icons? – linguini Nov 12 '13 at 14:34
Oh dear... that's a very different question altogether. Unfortunately, you'll need to define a new `ControlTemplate` for the `TreeView` to change its default appearance. – Sheridan Nov 12 '13 at 14:40

WPF Treeview Icon Plus Minus

1 Answers1