Customize Gridview themes

[Kavi]

Hi,

I wanted to customize the default theme of the gridview control. I've attached here with the snapshot of my current grid view. Please let me know how do i customize it.
I would like to change the black colored part of the grid to the green shown in the pic.

Thanks.

[Veselin Vasilev]

Hi Kavi,

Please check the Styling the Column Headers help topic.

Hope this helps.

Kind regards,
Veskoni
the Telerik team

[Kavi]

Hi,
Thanks for your reply,

Could you please let me know what do i need to change to modify the color of the grid header from black (in the snapshot which you provided).

<Application.Resources>
    <!--BackGround -->
    <LinearGradientBrush x:Key="GridBackground" EndPoint="0.5,.03" StartPoint="0.5,0">
        <GradientStop Color="#FF99CC00"/>
        <GradientStop Color="#FFFFFFFF" Offset="1"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.5"/>
    </LinearGradientBrush>
    <Style x:Name="SubHeaderStyle" TargetType="TextBlock">
        <Setter Property="Foreground" Value="#FF009900"/>
        <Setter Property="FontFamily" Value="Verdana"/>
        <Setter Property="FontSize"   Value="12"/>
        <Setter Property="VerticalAlignment" Value="Center" />
        <Setter Property="HorizontalAlignment" Value="Left" />
        <!--<Setter Property="FontWeight" Value="Bold"/>-->
    </Style>

    <!-- RadGridview Styling-->
    <LinearGradientBrush x:Key="GridViewGroupPanelBackground"   EndPoint="0.5,1.5" StartPoint="0.5,0">
        <GradientStop Color="#FF99CC00"/>
        <GradientStop Color="#FFFFFFFF" Offset="1"/>
        <GradientStop Color="#FFFFFFFF" Offset="0.727"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GridViewGroupPanelForeground" Color="#009900"/>
    <SolidColorBrush x:Key="GridViewHeaderRowDataCellsPresenterBackground" Color="Transparent"/>
    <twc:Office_BlackTheme x:Key="Theme"/>
    <SolidColorBrush x:Key="GridViewHeaderCellBorderBrush" Color="#FFB3B3B3"/>
    <LinearGradientBrush x:Key="GridViewHeaderCellMouseOverBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFFE391" Offset="1"/>
        <GradientStop Color="#FFFFFDEB" Offset="0"/>
        <GradientStop Color="#FFFFD563" Offset="0.43"/>
        <GradientStop Color="#FFFFEDB3" Offset="0.42"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GridViewHeaderCellMouseOverBorderBrush" Color="#FFFFFDE6"/>
    <LinearGradientBrush x:Key="GridViewHeaderCellSortedBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFFCE79F" Offset="1"/>
        <GradientStop Color="#FFFDD3A8" Offset="0.07"/>
        <GradientStop Color="#FFF9932E" Offset="0.43"/>
        <GradientStop Color="#FFFAAD5F" Offset="0.42"/>
        <GradientStop Color="#FFB0987C" Offset="0"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GridViewHeaderCellSortingAndFilteringContentBackground" Color="Transparent"/>
    <LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FF000000" Offset="0"/>
        <GradientStop Color="#FF000000" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="ColumnHeaderGripperStyle" TargetType="Thumb">
        <Setter Property="Width" Value="8"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="Cursor" Value="SizeWE"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Border Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}"/>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <ControlTemplate x:Key="GridViewHeaderCellTemplate" TargetType="Telerik_Windows_Controls_GridView:GridViewHeaderCell">
        <Border BorderBrush="{StaticResource GridViewHeaderCellBorderBrush}" BorderThickness="0,0,1,0">
            <VisualStateManager.VisualStateGroups>
                <VisualStateGroup x:Name="CommonStates">
                    <VisualState x:Name="Normal"/>
                    <VisualState x:Name="MouseOver">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridViewHeaderCell_Over" Storyboard.TargetProperty="Opacity">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
                <VisualStateGroup x:Name="SortingStates">
                    <VisualState x:Name="Ascending">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="RenderTransform">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridViewHeaderCell_Selected" Storyboard.TargetProperty="Opacity">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="Descending">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="RenderTransform">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                    <DiscreteObjectKeyFrame.Value>
                                        <ScaleTransform ScaleX="1" ScaleY="1"/>
                                    </DiscreteObjectKeyFrame.Value>
                                </DiscreteObjectKeyFrame>
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridViewHeaderCell_Selected" Storyboard.TargetProperty="Opacity">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                    <VisualState x:Name="None">
                        <Storyboard>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Collapsed"/>
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualState>
                </VisualStateGroup>
            </VisualStateManager.VisualStateGroups>
            <Grid>
                <Border x:Name="GridViewHeaderCell" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
                <Border x:Name="GridViewHeaderCell_Over" Opacity="0" Background="{StaticResource GridViewHeaderCellMouseOverBackground}" BorderBrush="{StaticResource GridViewHeaderCellMouseOverBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
                <Border x:Name="GridViewHeaderCell_Selected" Opacity="0" Background="{StaticResource GridViewHeaderCellSortedBackground}" BorderBrush="{StaticResource GridViewHeaderCellMouseOverBorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
                <Grid x:Name="PART_HeaderCellGrid">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="Auto"/>
                    </Grid.ColumnDefinitions>
                    <Telerik_Windows_Controls_GridView:AlignmentContentPresenter Margin="5,0,3,0" VerticalAlignment="Center" Grid.Column="0" TextAlignment="{TemplateBinding TextAlignment}"/>
                    <Grid HorizontalAlignment="Right" Background="{StaticResource GridViewHeaderCellSortingAndFilteringContentBackground}" Grid.Column="1">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Path x:Name="PART_SortIndicator" Fill="{StaticResource GridViewIndicatorsPartsFill}" Stretch="Fill" Height="3" HorizontalAlignment="Left" Margin="1,0,4,0" VerticalAlignment="Center" Width="5" RenderTransformOrigin="0.5,0.5" 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">
                            <Path.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                    <SkewTransform AngleX="0" AngleY="0"/>
                                    <RotateTransform Angle="0"/>
                                    <TranslateTransform X="0" Y="0"/>
                                </TransformGroup>
                            </Path.RenderTransform>
                        </Path>
                        <Telerik_Windows_Controls_GridView:FilteringDropDown x:Name="PART_DistinctFilterControl" Margin="0,0,8,0" Visibility="{TemplateBinding FilteringUIVisibility}" Grid.Column="1" twc:StyleManager.Theme="{StaticResource Theme}"/>
                    </Grid>
                </Grid>
                <Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}"/>
                <Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}"/>
            </Grid>
        </Border>
    </ControlTemplate>
    <LinearGradientBrush x:Key="GridViewHeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
        <GradientStop Color="#FFF8F8F9" Offset="0"/>
        <GradientStop Color="#FFDBDEE1" Offset="1"/>
        <GradientStop Color="#FFDFE2E5" Offset="0.4"/>
        <GradientStop Color="#FFC7CBD1" Offset="0.4"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="GridViewHeaderCellInnerBorderBrush" Color="#FFEEEEEE"/>
    <SolidColorBrush x:Key="GridViewHeaderCellForeground" Color="#FF000000"/>
    <Style x:Key="GridViewHeaderCellStyle" TargetType="Telerik_Windows_Controls_GridView:GridViewHeaderCell">
        <Setter Property="Template" Value="{StaticResource GridViewHeaderCellTemplate}"/>
        <Setter Property="Background" Value="{StaticResource GridViewGroupPanelBackground}"/>
        <Setter Property="BorderBrush" Value="{StaticResource GridViewHeaderCellBorderBrush}"/>
        <Setter Property="BorderThickness" Value="0,1,1,1"/>
        <Setter Property="Foreground" Value="{StaticResource GridViewHeaderCellForeground}"/>
        <Setter Property="FontWeight" Value="Normal"/>
        <Setter Property="FontFamily" Value="Verdana"/>
    </Style>
</Application.Resources>

[Kalin Milanov]

Hello Kavi,

Basically every brush which contains GridViewHeaderCell in it is a brush you would like to change to match a certain style. The only exception being the "black bacground" which is named GridViewHeaderBackground.

Best wishes,
Kalin Milanov
the Telerik team

[Kavi]

Hello,

I'm unable to find the "GridViewHeaderBackground" in expression blend, Could you help me out please.

[Kalin Milanov]

Hi Kavi,

The brush is actually called GridView_HeaderBackground. You can find it in the resource tab of blend. 
I have also attached you an image for reference.

Greetings,
Kalin Milanov
the Telerik team