Styling RadGridView

[StevenDale]

I have created some styles that apply globally to all GridView Controls but the style does not work correctly. It does not have any affect the RowIndicator Column Header nor the Fill Column Header (the header that shows to the right when the columns do not fill the width of the Grid). If, however, I set a key on the style, and then set the Style on an individual GridView, it works like expected.

Here are my global styles and key style.

Global Styles:

<Style TargetType="{x:Type telerik:GridViewHeaderCell}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderCell}">
                    <Grid x:Name="PART_HeaderCellGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="GridViewHeaderCell" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2">
                            <Border BorderBrush="#FF98999B" BorderThickness="1" Background="{DynamicResource Office2007Silver}"/>
                        </Border>
                        <Border x:Name="GridViewHeaderCell_Over" BorderBrush="#FFFFC92B" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                            <Border BorderBrush="White" BorderThickness="1">
                                <Border.Background>
                                    <LinearGradientBrush 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>
                                </Border.Background>
                            </Border>
                        </Border>
                        <Border x:Name="GridViewHeaderCell_Selected" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="2" Opacity="0">
                            <Border.BorderBrush>
                                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                    <GradientStop Color="#FF616161" Offset="0"/>
                                    <GradientStop Color="#FF989898" Offset="1"/>
                                </LinearGradientBrush>
                            </Border.BorderBrush>
                            <Border BorderThickness="1">
                                <Border.BorderBrush>
                                    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                                        <GradientStop Color="#FFB69A78"/>
                                        <GradientStop Color="#FFFFE17A" Offset="0.126"/>
                                    </LinearGradientBrush>
                                </Border.BorderBrush>
                                <Border.Background>
                                    <LinearGradientBrush 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>
                                </Border.Background>
                            </Border>
                        </Border>
                        <ContentControl x:Name="ContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Grid.Column="0" Foreground="{StaticResource GridBlueBrush}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="{TemplateBinding IsTabStop}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" BorderBrush="{DynamicResource GridBlueBrush}" FontWeight="Bold">
                            <ContentControl.Style>
                                <Style TargetType="{x:Type ContentControl}">
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                    <Setter Property="VerticalContentAlignment" Value="Stretch"/>
                                </Style>
                            </ContentControl.Style>
                        </ContentControl>
                        <Path x:Name="PART_SortIndicator" Grid.ColumnSpan="2" Data="M0,0L1,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,0z" Fill="Black" HorizontalAlignment="Center" Height="3" Margin="0,3,0,0" Opacity="0" RenderTransformOrigin="0.5,0.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" IsTabStop="False" Margin="0,0,8,0" Visibility="{TemplateBinding FilteringUIVisibility}">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:FilteringDropDown>
                        <Thumb x:Name="PART_LeftHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Left" IsTabStop="{TemplateBinding IsTabStop}">
                            <Thumb.Style>
                                <Style TargetType="{x:Type 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="{x:Type 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>
                            </Thumb.Style>
                        </Thumb>
                        <Thumb x:Name="PART_RightHeaderGripper" Grid.ColumnSpan="2" HorizontalAlignment="Right" IsTabStop="{TemplateBinding IsTabStop}">
                            <Thumb.Style>
                                <Style TargetType="{x:Type 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="{x:Type 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>
                            </Thumb.Style>
                        </Thumb>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <MultiTrigger>
                            <MultiTrigger.Conditions>
                                <Condition Property="IsMouseOver" Value="True"/>
                                <Condition Property="SortingState" Value="None"/>
                            </MultiTrigger.Conditions>
                            <MultiTrigger.EnterActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="1"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.EnterActions>
                            <MultiTrigger.ExitActions>
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimationUsingKeyFrames BeginTime="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="GridViewHeaderCell_Over">
                                            <SplineDoubleKeyFrame KeyTime="0:0:0.2" Value="0"/>
                                        </DoubleAnimationUsingKeyFrames>
                                    </Storyboard>
                                </BeginStoryboard>
                            </MultiTrigger.ExitActions>
                            <Setter Property="Foreground" Value="Black"/>
                        </MultiTrigger>
                        <Trigger Property="SortingState" Value="Ascending">
                            <Setter Property="Foreground" Value="Black"/>
                            <Setter Property="Opacity" TargetName="PART_SortIndicator" Value="1"/>
                            <Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
                                <Setter.Value>
                                    <ScaleTransform ScaleY="1" ScaleX="1"/>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
                        </Trigger>
                        <Trigger Property="SortingState" Value="Descending">
                            <Setter Property="Foreground" Value="Black"/>
                            <Setter Property="Opacity" TargetName="PART_SortIndicator" Value="1"/>
                            <Setter Property="LayoutTransform" TargetName="PART_SortIndicator">
                                <Setter.Value>
                                    <ScaleTransform ScaleY="-1" ScaleX="1"/>
                                </Setter.Value>
                            </Setter>
                            <Setter Property="Opacity" TargetName="GridViewHeaderCell_Selected" Value="1"/>
                        </Trigger>
                        <Trigger Property="SortingState" Value="None">
                            <Setter Property="Opacity" TargetName="PART_SortIndicator" Value="0"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="{DynamicResource GrayGradientGradientBrush}"/>
        <Setter Property="BorderBrush" Value="#FF848484"/>
        <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 GridBlueBrush}"/>
        <Setter Property="FontWeight" Value="Bold" />
        <Setter Property="DropMarkPen">
            <Setter.Value>
                <Pen Brush="White" Thickness="2"/>
            </Setter.Value>
        </Setter>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
    </Style>
    <Style TargetType="{x:Type telerik:GridViewHeaderIndentCell}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderIndentCell}">
                    <Border x:Name="OuterBorder" BorderBrush="#FF848484" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Width="25">
                        <Border Background="{DynamicResource Office2007Silver}" x:Name="InnerBorder" BorderBrush="#FF848484" BorderThickness="1">

                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderThickness" Value="0,0,1,1"/>
        <Setter Property="BorderBrush" Value="#FF848484"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
    </Style>
    <Style TargetType="{x:Type telerik:GridViewHeaderRow}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderRow}">
                    <telerik:SelectiveScrollingGrid>
                        <telerik:SelectiveScrollingGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </telerik:SelectiveScrollingGrid.ColumnDefinitions>
                        <Border x:Name="PART_GridViewHeaderRowBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                            <Border BorderBrush="#FF4B4B4B" BorderThickness="1" Background="{DynamicResource Office2007Silver}"/>
                        </Border>
                        <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Grid.Column="3" IsTabStop="False">
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:DataCellsPresenter>
                        <Border x:Name="PART_IndicatorPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{TemplateBinding RowIndicatorVisibility}" Width="25">
                            <Border BorderBrush="#FF848484" Background="{DynamicResource Office2007Silver}" BorderThickness="1">

                            </Border>
                        </Border>
                        <telerik:IndentPresenter x:Name="PART_IndentPresenter" Grid.Column="1" IsTabStop="False" IndentLevel="{TemplateBinding IndentLevel}" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                            <telerik:IndentPresenter.ItemTemplate>
                                <DataTemplate>
                                    <telerik:GridViewHeaderIndentCell IsTabStop="False">
                                        <telerik:StyleManager.Theme>
                                            <telerik:Office_BlackTheme/>
                                        </telerik:StyleManager.Theme>
                                    </telerik:GridViewHeaderIndentCell>
                                </DataTemplate>
                            </telerik:IndentPresenter.ItemTemplate>
                            <telerik:StyleManager.Theme>
                                <telerik:Office_BlackTheme/>
                            </telerik:StyleManager.Theme>
                        </telerik:IndentPresenter>
                        <Border x:Name="PART_HierarchyIndentPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" Grid.Column="2" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Width="25">
                            <Border.Visibility>
                                <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
                                    <Binding.Converter>
                                        <telerik:BooleanToVisibilityConverter/>
                                    </Binding.Converter>
                                </Binding>
                            </Border.Visibility>
                            <Border BorderBrush="#FF4B4B4B" Background="{DynamicResource Office2007Silver}" BorderThickness="1">

                            </Border>
                        </Border>
                    </telerik:SelectiveScrollingGrid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Background" Value="{DynamicResource Office2007Silver}">
        </Setter>
        <Setter Property="MinHeight" Value="27"/>
        <Setter Property="BorderBrush" Value="#FF848484"/>
        <Setter Property="BorderThickness" Value="1,0,0,1"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="SnapsToDevicePixels" Value="True"/>
    </Style>

Key Style:

<Style x:Key="GridViewHeaderRowStyle1" TargetType="{x:Type telerik:GridViewHeaderRow}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type telerik:GridViewHeaderRow}">
                        <telerik:SelectiveScrollingGrid>
                            <telerik:SelectiveScrollingGrid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                            </telerik:SelectiveScrollingGrid.ColumnDefinitions>
                            <Border x:Name="PART_GridViewHeaderRowBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Grid.ColumnSpan="4" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Border BorderBrush="#FF4B4B4B" BorderThickness="1" Background="{DynamicResource Office2007Silver}"/>
                            </Border>
                            <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Grid.Column="3" IsTabStop="False">
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </telerik:DataCellsPresenter>
                            <Border x:Name="PART_IndicatorPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Visibility="{TemplateBinding RowIndicatorVisibility}" Width="25">
                                <Border BorderBrush="#FF848484" BorderThickness="1" Background="{DynamicResource Office2007Silver}"/>
                            </Border>
                            <telerik:IndentPresenter x:Name="PART_IndentPresenter" Grid.Column="1" IsTabStop="False" IndentLevel="{TemplateBinding IndentLevel}" MinHeight="{TemplateBinding MinHeight}" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                                <telerik:IndentPresenter.ItemTemplate>
                                    <DataTemplate>
                                        <telerik:GridViewHeaderIndentCell IsTabStop="False">
                                            <telerik:StyleManager.Theme>
                                                <telerik:Office_BlackTheme/>
                                            </telerik:StyleManager.Theme>
                                        </telerik:GridViewHeaderIndentCell>
                                    </DataTemplate>
                                </telerik:IndentPresenter.ItemTemplate>
                                <telerik:StyleManager.Theme>
                                    <telerik:Office_BlackTheme/>
                                </telerik:StyleManager.Theme>
                            </telerik:IndentPresenter>
                            <Border x:Name="PART_HierarchyIndentPresenter" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="0,0,1,1" Grid.Column="2" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" Width="25">
                                <Border.Visibility>
                                    <Binding Path="HasHierarchy" RelativeSource="{RelativeSource TemplatedParent}">
                                        <Binding.Converter>
                                            <telerik:BooleanToVisibilityConverter/>
                                        </Binding.Converter>
                                    </Binding>
                                </Border.Visibility>
                                <Border BorderBrush="#FF4B4B4B" BorderThickness="1" Background="{DynamicResource Blue}"/>
                            </Border>
                        </telerik:SelectiveScrollingGrid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Setter Property="Background" Value="{DynamicResource Office2007Silver}"/>
            <Setter Property="MinHeight" Value="27"/>
            <Setter Property="BorderBrush" Value="#FF848484"/>
            <Setter Property="BorderThickness" Value="1,0,0,1"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="Padding" Value="0"/>
            <Setter Property="SnapsToDevicePixels" Value="True"/>
        </Style>

[Vanya Pavlova]

Hello Billy,

 

This is a known issue related to control styles in RadGridView/WPF. The implicit style with TargetType GridViewHeaderRow would not be applied in RadGridView, if you need to use this style you have to reference it as explicit using the x:Key attribute. We will do our best to provide a fix for this issue, however I cannot commit to a specific release date. 


Please excuse us for any inconvenience caused. 

Best wishes,
Vanya Pavlova
the Telerik team