[Solved] Change background color of selected row in TreeListViewRow

[Rajdeep]

Hello Telerik Team,

I am currently working with TreeListView in a WPF application and I am facing an issue related to row background color overriding when a row is selected.

In my application, certain rows need to have a custom background color depending on their type (for example: LocalFile and RemoteFile). The custom color works correctly when the row is not selected.

However, when the row is selected, the default RadTreeListView selection background color overrides the custom color, and the File-specific color is no longer visible.

My goal is to preserve the custom background color when the row is selected.

Below is a simplified version of the style currently used:

<Grid.Resources>
 
    <​Style TargetType="telerik:TreeListViewRow">
 
        <!-- Default row color based on data -->
        <Setter Property="Background">
            <Setter.Value>
                <Binding Path="FileSource">
                    <Binding.Converter>
                        <converter:SourceTypeToColorConverter/>
                    </Binding.Converter>
                </Binding>
            </Setter.Value>
        </Setter>
 
        <Setter Property="MouseOverBackground" Value="LightBlue"/>
 
        <​Style.Triggers>
 
            <!-- Default selected row color -->
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="LightBlue"/>
            </Trigger>
 
            <!-- Selected color for local files -->
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Property="IsSelected" Value="True"/>
                    <Condition Binding="{Binding FileSource}" Value="LocalFile"/>
                </MultiDataTrigger.Conditions>
                <Setter Property="Background" Value="LightGreen"/>
            </MultiDataTrigger>
 
            <!-- Selected color for remote files -->
            <MultiDataTrigger>
                <MultiDataTrigger.Conditions>
                    <Condition Property="IsSelected" Value="True"/>
                    <Condition Binding="{Binding FileSource}" Value="RemoteFile"/>
                </MultiDataTrigger.Conditions>
                <Setter Property="Background" Value="LightYellow"/>
            </MultiDataTrigger>
 
        <​/Style.Triggers>
 
    <​/Style>
 
</Grid.Resources>

The issue occurs when the row becomes selected. The control applies the default selection background, which overrides these custom styles.
Could you please advise on the recommended way to maintain custom row background colors for specific items even when they are selected in TreeListView?
Any guidance or best practice would be greatly appreciated.
Thank you.

[Stenly]

Hello Rajdeep,

Would it be possible to share the theme that is used on your end? This way, I can review how the selection color is applied in it and provide suggestions for achieving the desired behavior.

[Rajdeep]

Hello Stenly,

I am using the "Office2016" theme.

[Stenly]

Hello Rajdeep,

Thank you for sharing the theme that you are using.

For the Office2016 theme, the selection states (selected-focused and selected-unfocused) are represented each by a Border element. Both of these instances have their Background property set to a brush coming from the Office2016Resource (changing this brush directly will affect any elements that also rely on it). When selecting a TreeListViewRow instance, these Borders (depending on whether the focus is in the control or not) will be shown via triggers in the ControlTemplate.Triggers collection, and the Border that displays the background of the TreeListViewRow when no visual state is applied, will be collapsed. This is the reason why the triggers defined in the custom Style that you shared are not applied.

With this in mind, to alter this behavior, the default ControlTemplate (with an x:Key="TreeListViewRowTemplate") of the TreeListViewRow element will have to be extracted and modified.

More specifically, you could template-bind the Background property of the Borders with x:Name="Background_Selected_Unfocused" and x:Name="Background_Selected" to the SelectedBackground dependency property that comes from the GridViewRow class (base class of the TreeListViewRow) and modify it via the triggers in your custom Style that you shared in your initial message.

This way, both of these visual states for the selection state could be affected by your triggers and by changing the value of the SelectedBackground property, which should produce the required result.

With this being said, would it be possible to give this suggestion a try?