[Solved] How to style a RadGridView

[Rosco]

I am currently working with the Silverlight RadGridView and need some assistance on styling the grid. The grid is bound to a List and also displays checkboxes in the first column. Here is what I want to achieve:

1. The column headings need to have the color #F3F5F8
2. When you hover over a column heading, the color needs to change to #DDE3EB
3. Each row of the first column needs to have the color #EFF2F6
4. When you select a row, the color of the selected row needs to be #A7CDF0

I have tried using the following XAML code to change the background color of the column headings.

<telerik:RadGridView.HeaderRowStyle>
    <Style TargetType="telerik:GridViewHeaderRow">
        <Setter Property="Background" Value="#F3F5F8"/>
    </Style>
</telerik:RadGridView.HeaderRowStyle>

This works to some extent, but when I bind the control to a List, it default back to the black HeaderRow color. Can someone assist me here?

[Maya]

Hi Rosco,

I would recommend you to take a look at the following articles:
1. Styling the Column Headers
2. Styling a Cell.
3. Styling a Row.
 

Best wishes,
Maya
the Telerik team

[Rosco]

Hi Maya,

Thanks for the reply. I have made some changes using Expression Blend 4, however I am still having some issues.

<telerik:RadGridView Margin="12,64,0,0" RowIndicatorVisibility="Collapsed" Name="campaigngrid" VerticalAlignment="Top" Height="180" ShowGroupPanel="false" HorizontalAlignment="Left" Width="616" SelectionMode="Extended" IsFilteringAllowed="False" AlternateRowBackground="White" BorderThickness="1" BorderBrush="Black" Foreground="Black">
    <telerik:RadGridView.Columns>
        <telerik:GridViewSelectColumn/>
        <telerik:GridViewDataColumn Header="Campaigns" DataMemberBinding="{Binding Campaigns}" HeaderCellStyle="{StaticResource GridViewHeaderCellStyle1}"/>
    </telerik:RadGridView.Columns>
</telerik:RadGridView>

Firstly, above is my RadGridView definition. The HeaderCellStyle is giving me a warning saying The resource "GridViewHeaderCellStyle1" could not be resolved. Correct me if I'm wrong here, but I've declared a new Application Resource inside App.xaml which now looks like this:

<Application xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             x:Class="MailChimp.Silverlight.UI.App"
             >
    <Application.Resources>
        <SolidColorBrush x:Key="GridView_HeaderInnerBorder" Color="#FF4B4B4B"/>
        <SolidColorBrush x:Key="GridView_HeaderOuterBorder_Over" Color="#FFFFC92B"/>
        <SolidColorBrush x:Key="GridView_HeaderInnerBorder_Over" Color="#FFDDE3EB"/>
        <LinearGradientBrush x:Key="GridView_HeaderBackground_Over" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFFBA3" Offset="1"/>
            <GradientStop Color="#FFFFFBDA" Offset="0"/>
            <GradientStop Color="#FFFFD25A" Offset="0.43"/>
            <GradientStop Color="#FFFEEBAE" Offset="0.42"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="GridView_HeaderOuterBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF616161" Offset="0"/>
            <GradientStop Color="#FF989898" Offset="1"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="GridView_HeaderInnerBorder_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFB69A78"/>
            <GradientStop Color="#FFFFE17A" Offset="0.126"/>
        </LinearGradientBrush>
        <LinearGradientBrush x:Key="GridView_HeaderBackground_Selected" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FFFFD74E" Offset="0.996"/>
            <GradientStop Color="#FFFFDCAB" Offset="0.17"/>
            <GradientStop Color="#FFFFB062" Offset="0.57"/>
            <GradientStop Color="#FFFFD18F" Offset="0.56"/>
            <GradientStop Color="#FFFFBA74"/>
        </LinearGradientBrush>
        <Style x:Key="StretchedContentControl" TargetType="ContentControl">
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        </Style>
        <SolidColorBrush x:Key="GridView_SortIndicatorColor" Color="Black"/>
        <telerik:Office_BlackTheme x:Key="Theme"/>
        <Style x:Key="ColumnHeaderGripperStyle" TargetType="Thumb">
            <Setter Property="Width" Value="8"/>
            <Setter Property="Background" Value="Transparent"/>
            <Setter Property="BorderBrush" Value="Transparent"/>
            <Setter Property="BorderThickness" Value="0"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="Cursor" Value="SizeWE"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Thumb">
                        <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <SolidColorBrush x:Key="GridView_HeaderForeground_Selected" Color="Black"/>
        <ControlTemplate x:Key="GridViewHeaderCellTemplate" TargetType="telerik:GridViewHeaderCell">
            <Grid x:Name="PART_HeaderCellGrid">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualStateGroup.Transitions>
                            <VisualTransition GeneratedDuration="00:00:00.2000000" To="Normal"/>
                            <VisualTransition GeneratedDuration="00:00:00.2000000" To="MouseOver"/>
                        </VisualStateGroup.Transitions>
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
                                    <EasingDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Ascending">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Descending">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_SortIndicator">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="RenderTransform" Storyboard.TargetName="PART_SortIndicator">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                        <DiscreteObjectKeyFrame.Value>
                                            <ScaleTransform ScaleY="1" ScaleX="1"/>
                                        </DiscreteObjectKeyFrame.Value>
                                    </DiscreteObjectKeyFrame>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Selected">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border x:Name="GridViewHeaderCell" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2">
                    <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}" BorderThickness="1" Background="{TemplateBinding Background}"/>
                </Border>
                <Border x:Name="GridViewHeaderCell_Over" BorderBrush="{StaticResource GridView_HeaderOuterBorder_Over}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                    <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Over}" BorderThickness="1" Background="{StaticResource GridView_HeaderBackground_Over}"/>
                </Border>
                <Border x:Name="GridViewHeaderCell_Selected" BorderBrush="{StaticResource GridView_HeaderOuterBorder_Selected}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                    <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Selected}" BorderThickness="1" Background="{StaticResource GridView_HeaderBackground_Selected}"/>
                </Border>
                <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}" Style="{StaticResource StretchedContentControl}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                <Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M0,0 L1,0 2,0 3,0 4,0 5,0 5,1 4,1 4,2 3,2 3,3 2,3 2,2 1,2 1,1 0,1 0,0 z" Fill="{StaticResource GridView_SortIndicatorColor}" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin=".5,.5" Stretch="Fill" VerticalAlignment="Top" Width="5">
                    <Path.RenderTransform>
                        <TransformGroup>
                            <ScaleTransform ScaleY="-1" ScaleX="1"/>
                            <SkewTransform AngleY="0" AngleX="0"/>
                            <RotateTransform Angle="0"/>
                            <TranslateTransform X="0" Y="0"/>
                        </TransformGroup>
                    </Path.RenderTransform>
                </Path>
                <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" Margin="0,0,8,0" telerik:StyleManager.Theme="{StaticResource Theme}" Visibility="{TemplateBinding FilteringUIVisibility}"/>
                <Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                <Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}" Style="{StaticResource ColumnHeaderGripperStyle}"/>
            </Grid>
        </ControlTemplate>
        <LinearGradientBrush x:Key="GridView_HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
            <GradientStop Color="#FF5B5B5B" Offset="1"/>
            <GradientStop Color="#FF868686"/>
            <GradientStop Color="#FF4F4F4F" Offset="0.42"/>
            <GradientStop Color="#FFF3F5F8" Offset="0.43"/>
        </LinearGradientBrush>
        <SolidColorBrush x:Key="GridView_HeaderOuterBorder" Color="#FF848484"/>
        <SolidColorBrush x:Key="GridView_HeaderForeground" Color="White"/>
        <Style x:Key="GridViewHeaderCellStyle1" TargetType="telerik:GridViewHeaderCell">
            <Setter Property="Template" Value="{StaticResource GridViewHeaderCellTemplate}"/>
            <Setter Property="Background" Value="{StaticResource GridView_HeaderInnerBorder_Over}"/>
            <Setter Property="BorderBrush" Value="{StaticResource GridView_HeaderOuterBorder}"/>
            <Setter Property="BorderThickness" Value="0,0,1,1"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="5,0,3,0"/>
            <Setter Property="Foreground" Value="{StaticResource GridView_HeaderForeground}"/>
        </Style>
    </Application.Resources>
</Application>

Can you shed some light on this?

[Vanya Pavlova]

Hello Rosco,

 

I have tried to reproduce the issue by my side but I was not able to. May you please check the attached project and let me know how it differs from yours? Thus we would be able to provide you with an appropriate solution.

Kind regards,
Vanya Pavlova
the Telerik team