3
votes

I am trying to change SelectedItem template in TreeView. I wrote simple container style and change item template in Style.Triggers as described

[1]: How do I highlight a treeview selected item with some color? or

[2]: WPF TreeView: How to style selected items with rounded corners like in Explorer but it doesn't work.

Then I created a new project and created TreeView with a simple style and template

<TreeView>
        <TreeViewItem Header="Item1" />
        <TreeViewItem Header="Item2" />
        <TreeViewItem Header="Item3"/>

        <TreeView.Resources>
            <DataTemplate DataType="{x:Type TreeViewItem}" x:Key="selectedTemplate">
                <StackPanel Height="25">
                    <TextBlock Text="SelectedItem"/>
                </StackPanel>
            </DataTemplate>
        </TreeView.Resources>

        <TreeView.ItemContainerStyle>
            <Style TargetType="TreeViewItem">
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="FontWeight" Value="Bold"/>
                        <Setter Property="FontStyle" Value="Italic"/>
                        <Setter Property="Foreground" Value="Red"/>
                        <Setter Property="Background" Value="Green"/>
                        <Setter Property="ItemTemplate" Value="{StaticResource selectedTemplate}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TreeView.ItemContainerStyle>
    </TreeView>

So, then I selected TreeViewItem in tree view FontWeight, FontStyle and Foreground are changed, but Background and ItemTemplate doesn't changed.

Result: here

Could you explain this strange behavior?

1

1 Answers

6
votes

ItemTemplate property affects children elements and not the item itself. And background is set to default selection background for Border that adornes the content, so the green color underneath is not visible. You can achieve your goals like this:

 <TreeView>
        <TreeViewItem Header="Item1" />
        <TreeViewItem Header="Item2" />
        <TreeViewItem Header="Item3"/>

        <TreeView.Resources>
            <ControlTemplate TargetType="{x:Type TreeViewItem}" x:Key="selectedTemplate">
                <StackPanel Height="25">
                    <TextBlock Text="SelectedItem" Background="{TemplateBinding Background}" />
                </StackPanel>
            </ControlTemplate>
        </TreeView.Resources>

        <TreeView.ItemContainerStyle>
            <Style TargetType="TreeViewItem">
                <Style.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="FontWeight" Value="Bold"/>
                        <Setter Property="FontStyle" Value="Italic"/>
                        <Setter Property="Foreground" Value="Red"/>
                        <Setter Property="Background" Value="Green"/>
                        <Setter Property="Template" Value="{StaticResource selectedTemplate}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </TreeView.ItemContainerStyle>
    </TreeView>