Sync Custom GridViewCell Background with the GridViewRow Hover and Selection Background

Environment

Product	RadGridView for WPF
Version	Current

Description

RadGridView allows you to change the background brush of the cells by setting the Background of GridViewCell using the CellStyle property of the column. However, because the GridViewCell is drawn over the row visual, the background and mouse over states of the row are rendered behind the cell. In other words, they are not visible because the custom set background of the cell overlaps the underlying visual.

Solution

To resolve this, you can use a DataTrigger to conditionally data bind the Background of GridViewCell to the MouseOverBackground and SelectedBackground properties of the parent GridViewRow.

    <telerik:GridViewDataColumn.CellStyle>
        <Style TargetType="telerik:GridViewCell">
            <Setter Property="Background" Value="Green" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}, Path=IsMouseOver}" Value="True">
                    <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}, Path=MouseOverBackground}" />
                </DataTrigger>
                <DataTrigger Binding="{Binding RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}, Path=IsSelected}" Value="True">
                    <Setter Property="Background" Value="{Binding RelativeSource={RelativeSource AncestorType=telerik:GridViewRow}, Path=SelectedBackground}" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </telerik:GridViewDataColumn.CellStyle>