How to change HeaderColumn color of a custom RadGridView ?

[Jad]

Hello, i created a control, inheriting from RadGridView.

My custom control is ok, i created a style for it in app.xaml to put some settings.

The problem is, i want to change the columnheader's color, the foreground color of headerColumn's text, how can I do it pls ?

I also have another question, is it possible to add a main title to my control ? Like a main Header.

 

Thanks in advance :)

[Dinko | Tech Support Engineer]

Hi Jad,

Thank you for contacting us.

You can take a look at the Styling Column Headers help article in our documentation which describes how you can change the style of the columns header.

For your second question, the RadGridView control doesn't have a built-in header/title. You can easily achieve such effect by placing the control in a Grid and add a Row above it which will contain a TextBlock. The Textblock will represent the header.

Hope this information is helpful.

Regards,
Dinko
Progress Telerik

[Jad]

Hello Dinko.

 

"For your second question, the RadGridView control doesn't have a
built-in header/title. You can easily achieve such effect by placing the
control in a Grid and add a Row above it which will contain a
TextBlock. The Textblock will represent the header."

Yes, thanks it's perfect.

 

"You can take a look at the Styling Column Headers help article in our documentation which describes how you can change the style of the columns header."

I tried to do that in my app.xaml :

<Style x:Key="testHeaderCell"
       TargetType="telerik:GridViewHeaderCell">
    <Setter Property="Background" Value="Green" />
</Style>

 

But as you can see in the picture, border stays black.

 

 

 

[Dilyan Traykov]

Hello Jad,

In order to further the look of the header row, you should extract the control template of the element and modify it to your liking.

Here's an example for the Office_Black theme:

<Style TargetType="telerik:GridViewHeaderCell">
    <Setter Property="Background" Value="Green" />
    <Setter Property="BorderBrush" Value="Green" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:GridViewHeaderCell">
                <Grid x:Name="PART_OuterGrid">
                    <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.TargetName="GridViewHeaderCell_Over" Storyboard.TargetProperty="Opacity">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <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.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="Opacity">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="GridViewHeaderCell_Selected" Storyboard.TargetProperty="Opacity">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                            <VisualState x:Name="Descending">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="ContentPresenter" Storyboard.TargetProperty="Foreground">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource GridView_HeaderForeground_Selected}"/>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="Opacity">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_SortIndicator" Storyboard.TargetProperty="RenderTransform">
                                        <DiscreteObjectKeyFrame KeyTime="0:0:0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <ScaleTransform ScaleX="1" ScaleY="-1"/>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                    <DoubleAnimationUsingKeyFrames Storyboard.TargetName="GridViewHeaderCell_Selected" Storyboard.TargetProperty="Opacity">
                                        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                    </DoubleAnimationUsingKeyFrames>
                                </Storyboard>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateManager.VisualStateGroups>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="*"/>
                        <RowDefinition Height="Auto"/>
                    </Grid.RowDefinitions>
                    <Grid x:Name="PART_HeaderCellGrid" MinHeight="26">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>
                        <Border x:Name="GridViewHeaderCell" Grid.ColumnSpan="2" Margin="1 0 0 0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <Border BorderBrush="Red" Background="{TemplateBinding Background}" BorderThickness="1"/>
                        </Border>
                        <Border x:Name="GridViewHeaderCell_Over"
                Grid.ColumnSpan="2"
                BorderBrush="{StaticResource GridView_HeaderOuterBorder_Over}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Opacity="0">
                            <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Over}" Background="{StaticResource GridView_HeaderBackground_Over}" BorderThickness="1"/>
                        </Border>
                        <Border x:Name="GridViewHeaderCell_Selected"
                Grid.ColumnSpan="2"
                BorderBrush="{StaticResource GridView_HeaderOuterBorder_Selected}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Opacity="0">
                            <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder_Selected}" Background="{StaticResource GridView_HeaderBackground_Selected}" BorderThickness="1"/>
                        </Border>
                        <ContentControl x:Name="ContentPresenter"
                Grid.Column="0"
                Foreground="{TemplateBinding Foreground}"
                Style="{StaticResource StretchedContentControl}"
                Margin="{TemplateBinding Padding}"
                IsTabStop="{TemplateBinding IsTabStop}"
                Content="{TemplateBinding Content}"
                ContentTemplate="{TemplateBinding ContentTemplate}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
                        <Path x:Name="PART_SortIndicator"
                Grid.ColumnSpan="2"
                Fill="{StaticResource GridView_SortIndicatorColor}"
                Stretch="Fill"
                HorizontalAlignment="Center"
                VerticalAlignment="Top"
                Margin="0 3 0 0"
                Data="M256,328 L248,336 264,336"
                Width="5"
                Height="3"
                RenderTransformOrigin=".5,.5"
                Opacity="0"
                SnapsToDevicePixels="True">
                            <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>
                        <ContentControl
                Content="{Binding SortingIndex, Converter={StaticResource SortingIndexConverter},RelativeSource={RelativeSource TemplatedParent}}"
                Visibility="{Binding SortingIndex, Converter={StaticResource SortingIndexToVisibilityConverter},RelativeSource={RelativeSource TemplatedParent}}"
                Grid.ColumnSpan="2"
                FontSize="7"
                IsTabStop="{TemplateBinding IsTabStop}"
                Foreground="{StaticResource GridView_SortIndicatorColor}"
                HorizontalAlignment="Center"
                VerticalAlignment="Top"
                Margin="14 0 0 0"/>
                        <telerik:FilteringDropDown x:Name="PART_DistinctFilterControl" Grid.Column="1" Visibility="{TemplateBinding FilteringUIVisibility}" Margin="0 0 4 0"/>
                        <Thumb x:Name="PART_LeftHeaderGripper"
                HorizontalAlignment="Left"
                IsTabStop="{TemplateBinding IsTabStop}"
                Style="{StaticResource ColumnHeaderGripperStyle}"
                Grid.ColumnSpan="2"/>
                        <Thumb x:Name="PART_RightHeaderGripper"
                HorizontalAlignment="Right"
                IsTabStop="{TemplateBinding IsTabStop}"
                Style="{StaticResource ColumnHeaderGripperStyle}"
                Grid.ColumnSpan="2"/>
                    </Grid>
                    <telerik:FieldFilterControl x:Name="PART_FieldFilterControl" Visibility="{TemplateBinding FieldFilterControlVisibility}" Grid.Row="1"/>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="telerik:GridViewHeaderRow">
    <Setter Property="Background" Value="Green" />
    <Setter Property="BorderBrush" Value="Green" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="telerik:GridViewHeaderRow">
                <telerik:SelectiveScrollingGrid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto"/>
                        <RowDefinition/>
                    </Grid.RowDefinitions>
                    <telerik:CommonHeaderPresenter x:Name="PART_CommonHeaderPresenter" Grid.Column="3"/>
                    <Border Background="Red" Grid.ColumnSpan="2" telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
                    <Border x:Name="CommonHeaderIndent"
            Visibility="{Binding Visibility, ElementName=PART_CommonHeaderPresenter}"
            telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
            Grid.ColumnSpan="2"
            BorderBrush="Red"
            Background="Red"
            Margin="-1 0 0 0"
            BorderThickness="0 0 1 1"/>
                    <Grid Grid.Row="1" Grid.ColumnSpan="4" x:Name="PART_OuterGrid">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Border x:Name="PART_GridViewHeaderRowBorder"
                BorderBrush="{TemplateBinding BorderBrush}"
                VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                Padding="{TemplateBinding Padding}"
                BorderThickness="{TemplateBinding BorderThickness}">
                            <Border BorderBrush="Red" Background="{TemplateBinding Background}" BorderThickness="1"/>
                        </Border>
                        <Border x:Name="PART_FieldFilterPlaceholder"
                Grid.Row="1"
                BorderBrush="{StaticResource ControlOuterBorder}"
                Background="{StaticResource GridViewCommonHeader_Background}"
                BorderThickness="0 0 1 1"
                Visibility="{TemplateBinding FieldFilterPlaceholderVisibility}"/>
                    </Grid>
                    <telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Grid.Row="1" Grid.Column="3"/>
                    <Border x:Name="PART_IndicatorPresenter"
            Grid.Row="1"
            Width="25"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="0 0 1 1"
            Visibility="{TemplateBinding RowIndicatorVisibility}"
            telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                        <Border BorderBrush="Red" Background="Red" BorderThickness="1"/>
                    </Border>
                    <telerik:IndentPresenter x:Name="PART_IndentPresenter"
            Grid.Column="1"
            MinHeight="{TemplateBinding MinHeight}"
            IndentLevel="{TemplateBinding IndentLevel}"
            ItemTemplate="{StaticResource GridViewHeaderIndentCellDataTemplate}"
            Grid.Row="1"
            telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"/>
                    <Border x:Name="PART_CommonHeaderHierarchyIndentPresenterAllLevels"
            Grid.Column="2"
            Grid.Row="0"
            Grid.RowSpan="10"
            Width="25"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="0 0 1 1"
            Visibility="{Binding HasHierarchy, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
            telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
            Background="{StaticResource GridViewCommonHeader_Background}"/>
                    <Border x:Name="PART_CommonHeaderHierarchyIndentPresenterFirstLevel"
            Grid.Column="2"
            Grid.Row="0"
            Grid.RowSpan="1"
            Width="25"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="0 0 1 1"
            Margin="0 -1 0 0"
            Visibility="{Binding HasHierarchy, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
            telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical"
            Background="{StaticResource GridViewCommonHeader_Background}"/>
                    <Border x:Name="PART_HierarchyIndentPresenter"
            Grid.Column="2"
            Grid.Row="1"
            Width="25"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="0 0 1 1"
            Visibility="{Binding HasHierarchy, RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BooleanToVisibilityConverter}}"
            telerik:SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical">
                        <Border BorderBrush="{StaticResource GridView_HeaderInnerBorder}" Background="{StaticResource GridView_HeaderBackground}" BorderThickness="1"/>
                    </Border>
                </telerik:SelectiveScrollingGrid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

Note that if you're using another theme, you should modify the template accordingly.

I hope you find this helpful.

Regards,
Dilyan Traykov
Progress Telerik