Custom Header GridView

[Madovi]

Hi,
I'm trying to change the color for the header.
I can change the GridViewHeaderCell background but the GridViewHeaderRow remains the same (OfficeBlack Theme).
Can you tell me what's wrong.

Thanks

   Maximilien

 

 

 

<Window.Resources>

 

 

 

 

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

 

 

 

 

<GradientStop Color="Blue" Offset="0"/>

 

 

 

 

<GradientStop Color="Red" Offset="1"/>

 

 

 

 

<GradientStop Color="Green" Offset="0.4"/>

 

 

 

 

<GradientStop Color="Yellow" Offset="0.4"/>

 

 

 

 

</LinearGradientBrush>

 

 

 

 

<Style x:Name="GridViewHeaderCellStyle" TargetType="telerik:GridViewHeaderCell" >

 

 

 

 

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

 

 

 

 

<Setter Property="BorderBrush" Value="#FFF40505"/>

 

 

 

 

</Style>

 

 

 

 

<ControlTemplate x:Key="GridViewHeaderRowTemplate" TargetType="telerik:GridViewHeaderRow">

 

 

 

 

<Border x:Name="PART_GridViewHeaderRowBorder" SnapsToDevicePixels="True" Background="{StaticResource GridViewHeaderBackground}">

 

 

 

 

<Grid>

 

 

 

 

<Grid.ColumnDefinitions>

 

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

 

<ColumnDefinition Width="Auto" />

 

 

 

 

</Grid.ColumnDefinitions>

 

 

 

 

<Border BorderBrush="#FFEEEEEE" Grid.ColumnSpan="3" BorderThickness="0,0,0,1" SnapsToDevicePixels="True" Background="{StaticResource GridViewHeaderBackground}" />

 

 

 

 

<telerik:IndicatorPresenter x:Name="PART_IndicatorPresenter" Grid.Column="0" />

 

 

 

 

<telerik:IndentPresenter x:Name="PART_IndentPresenter" Grid.Column="1" />

 

 

 

 

<telerik:DataCellsPresenter x:Name="PART_DataCellsPresenter" Grid.Column="2" />

 

 

 

 

</Grid>

 

 

 

 

</Border>

 

 

 

 

</ControlTemplate>

 

 

 

 

<Style x:Name="GridViewHeaderRowStyle" TargetType="telerik:GridViewHeaderRow">

 

 

 

 

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

 

 

 

 

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

 

 

 

 

<Setter Property="BorderBrush" Value="#FFF40505"/>

 

 

 

 

</Style>

 

 

 

 

 

</Window.Resources>

 

 

 

 

<Grid x:Name="LayoutRoot" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >

 

 

 

 

<telerikGrid:RadGridView x:Name="radGridView" >

 

 

 

 

<telerikGrid:RadGridView.Columns>

 

 

 

 

<telerikGrid:GridViewDataColumn Header="Film" >

 

 

 

 

<telerikGrid:GridViewDataColumn.CellTemplate >

 

 

 

 

<DataTemplate>

 

 

 

 

<TextBlock FontWeight="Bold" FontSize="18" Text="{Binding FilmNumber}" />

 

 

 

 

</DataTemplate>

 

 

 

 

</telerikGrid:GridViewDataColumn.CellTemplate>

 

 

 

 

</telerikGrid:GridViewDataColumn>

 

 

 

 

<telerikGrid:GridViewDataColumn Header="Regiment" >

 

 

 

 

<telerikGrid:GridViewDataColumn.CellTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<TextBlock FontWeight="Bold" FontSize="18" Text="{Binding RegimentNumber}" />

 

 

 

 

</DataTemplate>

 

 

 

 

</telerikGrid:GridViewDataColumn.CellTemplate>

 

 

 

 

</telerikGrid:GridViewDataColumn>

 

 

 

 

<telerikGrid:GridViewDataColumn Header="Date" >

 

 

 

 

<telerikGrid:GridViewDataColumn.CellTemplate>

 

 

 

 

<DataTemplate>

 

 

 

 

<TextBlock FontWeight="Bold" FontSize="18" Text="{Binding InfractionDate, StringFormat=d}" />

 

 

 

 

</DataTemplate>

 

 

 

 

</telerikGrid:GridViewDataColumn.CellTemplate>

 

 

 

 

</telerikGrid:GridViewDataColumn>

 

 

 

 

</telerikGrid:RadGridView.Columns>

 

 

 

 

</telerikGrid:RadGridView>

 

 

 

 

 

</Grid>

 

[Maya]

Hi Madovi,

If you want to change the colours of the GridViewHeaderRow or GridViewHeaderCell, you may define Style for each one as Resources and apply them implicitly.
For example:

<UserControl.Resources>
    <Style TargetType="telerik:GridViewHeaderRow">
        <Setter Property="Background" Value="Bisque"/>
    </Style>
    <Style TargetType="telerik:GridViewHeaderCell">
        <Setter Property="Background" Value="Pink"/>
        <Setter Property="Foreground" Value="Yellow"/>
    </Style>
</UserControl.Resources>

Regards,
Maya
the Telerik team

[Madovi]

Hi Maya,
It's not so simple, I might have forget some details.
In my case, I need to change the background of the header too because the column headers don't hide it.
See the image.

But I found the solution to avoid using the Office_theme.
First, I was trying without expression Blend so it was realy complicated.
Then I downloaded Blend and I followed your tutorial without any trouble.

thanks for help
  Maximilien