This is a migrated thread and some comments may be shown as answers.

Changing Selected Unfocused State Color of TreeViewItem

2 Answers 657 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Mary
Top achievements
Rank 1
Mary asked on 29 Nov 2017, 10:36 AM
Hi, I have a radtreeview in my application. The tree node data is being populated from code behind. Its styled based on Office2016 theme which is why it is showing a light gray color when a node is selected and then unfocused (please see attached pic). I want to change this light gray color to the dark blue color of the Office2016 theme but cant figure out how. Here is the Style that is applied:
<telerik:RadTreeView.ItemContainerStyle>
 <Style TargetType="{x:Type telerik:RadTreeViewItem}" BasedOn="{StaticResource RadTreeViewItemStyle}">
      <Setter Property="VerticalContentAlignment" Value="Stretch"/>
      <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
      <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
      <Setter Property="IsEditable" Value="{Binding IsEditable, NotifyOnSourceUpdated=True}" />
      <Setter Property="IsSelected" Value="{Binding DataContext.IsSelected, Mode=TwoWay,  RelativeSource={RelativeSource Self}}" />
 </Style>
 </telerik:RadTreeView.ItemContainerStyle>

2 Answers, 1 is accepted

Sort by
0
Martin Ivanov
Telerik team
answered on 04 Dec 2017, 10:32 AM
Hello Mary,

To achieve your requirement you can extract the Template of the RadTreeViewItem control and modify the visual that displays when you enter the selected unfocused state. For the Office2016 theme you can find the MultiTrigger that checks for the IsSelected and IsSelectionActive properties and change the Background there. 

This is how the trigger looks.
<MultiTrigger>
    <MultiTrigger.Conditions>
        <Condition Property="IsSelected" Value="True"/>
        <Condition Property="IsSelectionActive" Value="False"/>
    </MultiTrigger.Conditions>
    <Setter Property="Background" TargetName="BorderVisual" Value="{telerik:Office2016Resource ResourceKey={x:Static telerik:Office2016ResourceKey.ComplementaryBrush}}"/>
    <Setter Property="Foreground" TargetName="Header" Value="{telerik:Office2016Resource ResourceKey={x:Static telerik:Office2016ResourceKey.MarkerBrush}}"/>
</MultiTrigger>
For your convenience I prepared a small example showing how to change the color. You can also check the available colors of the Office2016 theme and use the Office2016ResourceKey extension to apply the one you need.

Regards,
Martin Ivanov
Progress Telerik
Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
0
Mary
Top achievements
Rank 1
answered on 05 Dec 2017, 07:19 AM
Thanks. The color has been changed now.
Tags
TreeView
Asked by
Mary
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Mary
Top achievements
Rank 1
Share this question
or