RadGridView header unused space color

[Ivan Kopcanski]

Hi,

Q1.)    I have a problem with RadGridView header row and color of unused space. 

I believe that color is forced by theme used in grid, if I'm not miss-leading you.

Please, refer the attached image for the explanation which color its' all about.

Q2.)   Also the splitting cursor when moving between the column headers is missing and columns are not resizible.

Can you point out the place where i'm mistaking?  

The following code is the style and resources used for grid header row.

The headerCellWithCustomFilteringStyle is the style with template used for header row.

<Color x:Key="GridViewHeaderGradientColor1">#FFDFE2E5</Color>

    <Color x:Key="GridViewHeaderGradientColor2">#FFC7CBD1</Color>

    <Color x:Key="GridViewHeaderGradientColor3">#FFC1D7F0</Color>

    <Color x:Key="GridViewHeaderGradientColor4">#FFDDE7F4</Color>

    <Color x:Key="GridViewElementInnerBorderBrushColor">#FFEEEEEE</Color>

    <Color x:Key="GridViewHeaderCellForegroundColor">#FF000000</Color>

    <Color x:Key="TransparentColor">Transparent</Color>

    <Color x:Key="GridViewIndicatorsPartsFillGradientStop1">#FF000000</Color>

    <Color x:Key="GridViewIndicatorsPartsFillGradientStop2">#FF000000</Color>

    <SolidColorBrush x:Key="GridViewHeaderCellInnerBorderBrush" Color="{StaticResource GridViewElementInnerBorderBrushColor}" />

    <SolidColorBrush x:Key="GridViewHeaderCellForeground" Color="{StaticResource GridViewHeaderCellForegroundColor}" />

    <SolidColorBrush x:Key="GridViewHeaderCellSortingAndFilteringContentBackground" Color="{StaticResource TransparentColor}" />

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

    <LinearGradientBrush x:Key="GridViewHeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="{StaticResource GridViewHeaderGradientColor4}" Offset="0" />

        <GradientStop Color="{StaticResource GridViewHeaderGradientColor3}" Offset="1" />

        <!--<GradientStop Color="{StaticResource GridViewHeaderGradientColor1}" Offset="0.4" />

            <GradientStop Color="{StaticResource GridViewHeaderGradientColor2}" Offset="0.4" />-->

    </LinearGradientBrush>

    <LinearGradientBrush x:Key="GridViewIndicatorsPartsFill" EndPoint="0.5,1" StartPoint="0.5,0">

        <GradientStop Color="{StaticResource GridViewIndicatorsPartsFillGradientStop1}" Offset="0" />

        <GradientStop Color="{StaticResource GridViewIndicatorsPartsFillGradientStop2}" Offset="1" />

    </LinearGradientBrush>

    <ControlTemplate x:Key="headerCellWithCustomFilteringTemplate" TargetType="grid:GridViewHeaderCell" >

        <Grid>

            <Border x:Name="GridViewHeaderCell" 

                        BorderBrush="{TemplateBinding BorderBrush}" 

                        BorderThickness="{TemplateBinding BorderThickness}" 

                        Background="{TemplateBinding Background}" UseLayoutRounding="True">

            </Border>

            <Grid x:Name="PART_HeaderCellGrid">

                <Grid.ColumnDefinitions>

                    <ColumnDefinition Width="*" />

                    <ColumnDefinition Width="Auto" />

                </Grid.ColumnDefinitions>

                <Grid.RowDefinitions>

                    <RowDefinition Height="Auto" />

                    <RowDefinition Height="*" />

                </Grid.RowDefinitions>

                <grid:AlignmentContentPresenter Grid.Column="0" Grid.Row="0" Margin="3,4,2,3" VerticalAlignment="Center" TextAlignment="{TemplateBinding TextAlignment}" />

                <Grid Grid.Column="1" Grid.Row="0" HorizontalAlignment="Right" Background="{StaticResource GridViewHeaderCellSortingAndFilteringContentBackground}">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="Auto" />

                        <ColumnDefinition Width="Auto" />

                    </Grid.ColumnDefinitions>

                    <Path x:Name="PART_SortIndicator" Fill="{StaticResource GridViewIndicatorsPartsFill}" Stretch="Fill" 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" HorizontalAlignment="Left" Margin="1,0,4,0" VerticalAlignment="Center" Width="5" Height="3" RenderTransformOrigin="0.5,0.5">

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

                </Grid>

                <TextBox x:Name="tbFilter" 

                             Grid.ColumnSpan="2" 

                             Grid.Column="0" 

                             Grid.Row="1" 

                             KeyDown="tb_KeyDown"

                            >

                </TextBox>

            </Grid>

            <VisualStateManager.VisualStateGroups>

                <VisualStateGroup x:Name="CommonStates">

                    <VisualState x:Name="Normal" />

                    <VisualState x:Name="MouseOver">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="GridViewHeaderCell" Storyboard.TargetProperty="Background">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Red" />

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                </VisualStateGroup>

                <VisualStateGroup x:Name="SortingStates">

                    <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" Storyboard.TargetProperty="Opacity">

                                <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="1" />

                            </ObjectAnimationUsingKeyFrames>

                        </Storyboard>

                    </VisualState>

                    <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" 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>

    </ControlTemplate>

    <Style x:Key="headerCellWithCustomFilteringStyle" TargetType="grid:GridViewHeaderCell">

        <Setter Property="Template" Value="{StaticResource headerCellWithCustomFilteringTemplate}" />

        <Setter Property="Background" Value="{StaticResource GridViewHeaderBackground}" />

        <Setter Property="BorderBrush" Value="{StaticResource GridViewHeaderCellInnerBorderBrush}" />

        <Setter Property="BorderThickness" Value="0,0,2,1" />

        <Setter Property="Foreground" Value="{StaticResource GridViewHeaderCellForeground}" />

        <Setter Property="FontWeight" Value="Bold" />

    </Style>

    <Style x:Key="FilterButtonStyle" TargetType="Button">

        <Setter Property="Template">

            <Setter.Value>

                <ControlTemplate TargetType="Button">

                    <Border Background="Transparent">

                        <ContentPresenter />

                    </Border>

                </ControlTemplate>

            </Setter.Value>

        </Setter>

    </Style>

[Kalin Milanov]

Hi Ivan Kopcanski,

The "unused space" is actually the grid's header row. The header cells you are styling are rendered on top of it. Therefore to achieve a consistent look of the header you will need to style both header cells and header row.

As for the resizing of the cells ... When creating your template you missed placing the two header grippers responsible for the resizing of the columns. The code for them and their default style is as follows:

<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 Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>


<Thumb x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" Style="{StaticResource ColumnHeaderGripperStyle}" Grid.ColumnSpan="2" />
<Thumb x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" Style="{StaticResource ColumnHeaderGripperStyle}" Grid.ColumnSpan="2" />

I hope this will solve the issue.

Greetings,
Kalin Milanov
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.