Changing Selected Unfocused State Color of TreeViewItem

3 posts, 0 answers
  1. Mary
    Mary avatar
    7 posts
    Member since:
    May 2016

    Posted 29 Nov Link to this post

    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. Martin Ivanov
    Admin
    Martin Ivanov avatar
    1475 posts

    Posted 04 Dec Link to this post

    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.
  3. Mary
    Mary avatar
    7 posts
    Member since:
    May 2016

    Posted 05 Dec in reply to Martin Ivanov Link to this post

    Thanks. The color has been changed now.
Back to Top