How to change HeaderColumn color of a custom RadGridView ?

4 posts, 0 answers
  1. Jad
    Jad avatar
    2 posts
    Member since:
    Apr 2017

    Posted 24 May Link to this post

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

  2. Dinko
    Admin
    Dinko avatar
    308 posts

    Posted 29 May Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
  3. Jad
    Jad avatar
    2 posts
    Member since:
    Apr 2017

    Posted 01 Jun in reply to Dinko Link to this post

    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.

     

     

     

  4. Dilyan Traykov
    Admin
    Dilyan Traykov avatar
    510 posts

    Posted 05 Jun Link to this post

    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
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top