Click here to Skip to main content
15,611,549 members
Articles / Desktop Programming / XAML
Tip/Trick
Posted 19 Dec 2015

Tagged as

Stats

18.9K views
5 bookmarked

Telerik RadGridView Selected and Hover Row Colors

Rate me:
Please Sign up or sign in to vote.
5.00/5 (4 votes)
19 Dec 2015CPOL3 min read
It is not straight forward to change the row selected and hover colors on the Telerik RadGridView. This is a ControlTemplate that works, and works with the detail pane.

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.

XML
<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:

XML
<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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Clifford Nelson Consulting
United States United States
Has been working as a C# developer on contract for the last several years, including 3 years at Microsoft. Previously worked with Visual Basic and Microsoft Access VBA, and have developed code for Word, Excel and Outlook. Started working with WPF in 2007 when part of the Microsoft WPF team. For the last eight years has been working primarily as a senior WPF/C# and Silverlight/C# developer. Currently working as WPF developer with BioNano Genomics in San Diego, CA redesigning their UI for their camera system. he can be reached at qck1@hotmail.com.

Comments and Discussions

 
Questionit doesn't compile Pin
Giulio Di Gio Battista3-Feb-21 4:07
Giulio Di Gio Battista3-Feb-21 4:07 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.