Telerik RadGridView Selected and Hover Row Colors

Introduction

My program manager was not happy with the default colors of the grids we were using. It seems like Tekerik’s solutions to everything is to use Expression Blend. I never use Expression Blend and it seems that when I do try to use it, the project does not open because of some issue. The other option they give is to override the RadGridView style, using a copy from the Themes. Of course, they tell you to use the right Theme. What they are telling you is that once you base something on a Theme, then you no longer can change themes and have the RadGridView theme also change.

I searched and found a lot of other developers that were in the same quandary as me, but so straight forward solution. How Telerik could not provide a straight forward solution to this problem is beyond. This is something I know is important to a program managers, and often specified in requirements. What is worse is that all their help assumes that you work with Expression Blend, and I have found few developers that do. I tried, but my project would not open in Expression Blend, so that was out.

I did finally find something on the internet that worked that was very similar to the solution I am showing here. Basically the solution used ComtrolTemplate for the GridViewRow that had triggers to change the Grid Background and Foreground. There are some complexities in the template to include all the controls to make different features work.

Solution

The initial solution I created was working, except then I tried using the ControlTemplate where I had a row details pane, and the RowDetails no longer showed. Well, I contact Telerik, and they told me that their solution for me was to copy the whole RadGridView style and use that. Not very simple since there were all sorts of StaticResources, and the StaticResources were not resolved by changing them to dynamic. Well their solution is I guess fine if you want to totally override everything in their Theme, but I am not a graphics designer, and I did not want to have to figure out how to create a set of acceptable colors and other resources for everything in the RadGridView. Well I started investigating into the XAML for the style, and finally figured out that all I really needed was to add a PART_DetailsPresenter to what I already had.

<Setter Property="Template">
  <Setter.Value>
    <ControlTemplate TargetType="telerik:GridViewRow">
      <Grid>
        <SelectiveScrollingGrid x:Name="grid">
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" />
          </Grid.RowDefinitions>
          <Border x:Name="SelectionBackground"
                  Grid.Column="2"
                  Grid.ColumnSpan="2"
                  Background="{TemplateBinding Background}"
                  BorderBrush="{TemplateBinding HorizontalGridLinesBrush}"
                  BorderThickness="{Binding HorizontalGridLinesWidth,
                  RelativeSource={RelativeSource TemplatedParent},
                  Converter={StaticResource GridLineWidthToThicknessConverter},
                  ConverterParameter=Bottom}" />
          <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter"
                    Grid.Column="3" />
          <telerik:IndentPresenter x:Name="PART_IndentPresenter"
                    Grid.Column="1"
                    IndentLevel="{TemplateBinding IndentLevel}"
                    SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" />
          <telerik:DetailsPresenter x:Name="PART_DetailsPresenter"
                    Grid.Row="1"
                    Grid.Column="2"
                    Grid.ColumnSpan="2"
                    DetailsProvider="{TemplateBinding DetailsProvider}"
                    SelectiveScrollingGrid.SelectiveScrollingClip="True" />
        </SelectiveScrollingGrid>
      </Grid>
      <ControlTemplate.Triggers>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="DisplayVisualCues" Value="True" />
            <Condition Property="IsMouseOver" Value="True" />
          </MultiTrigger.Conditions>
          <Setter TargetName="SelectionBackground"
          Property="Background" Value="#4F8FAB" />
          <Setter Property="Foreground" Value="White" />
        </MultiTrigger>
        <MultiTrigger>
          <MultiTrigger.Conditions>
            <Condition Property="IsSelected" Value="True" />
            <Condition Property="DisplayVisualCues" Value="True" />
          </MultiTrigger.Conditions>
          <Setter TargetName="SelectionBackground"
          Property="Background" Value="#59C9F5" />
          <Setter Property="Foreground" Value="White" />
        </MultiTrigger>
      </ControlTemplate.Triggers>
    </ControlTemplate>
  </Setter.Value>
</Setter>

In this snippet, you can easily see where to change the colors for mouse hover and selected in the Triggers section.

There is one thing that I am not sure about, and that is opening the details pane. I know that the option to open the details pane does not work with the opening of the window on selecting row option for the grid. What happens is that the opening is not coordinated with the open details CheckBox on the row. What does seem to work just fine using the following field definition for the CheckBox to open and close the details pane:

<telerik:GridViewToggleRowDetailsColumn Tag="Expand" />

Using the Code

I would recommend putting this code in a ResrouceDictionary and using it in Style which is assigned a key that is used in the Window or UserControl XAML with the RadGradView.

History

• 12/19/2015: Initial version