RadGridView edit GridViewHeaderRow Mouse over style

[Justin]

Hello,
I'm doing a generic UserControl so I have no idea of the number of columns and their names. This is the reason why I'm using GridViewHeaderRow instead of GridVIewHeaderCell. My columns are AutoGenerated.
The main is that : 
I edit the style like this => 

        <Style x:Key="HeaderRowStyle" TargetType="telerik:GridViewHeaderRow">
            <Setter Property="Background" Value="#FF606366"></Setter>
            <Setter Property="FontWeight" Value="Medium"></Setter>
        </Style>

I need to as this background on the mouse over the header.

I tried a few things like using the Setter of the property template and using the Trigger of IsMouseOver but it's not working.
Perhaps the trigger was the good solution and I was just missing a few properties? 
Thanks in advance

[Martin Ivanov]

Hello Justin,

The orange gradient shown on mouse over comes from the default ControlTemplate of the GridView's header cell in the Office_Black theme (the default one). You can see a similar result if you click onto the header in order to sort the column. This is implemented with VisualStates in the ControlTemplate that animate the background color and visibility of different elements. In older themes, as Office_Black, most of those animations use hard-coded brushes defined in the template's resources. This means that the only way to customize them is to extract the ControlTemplate of the corresponding element and change the brushes or remove the visuals that are displayed.

More specifically for your case, you can extract the ControlTemplate of GridViewHeaderCell and remove the VisualState with x:Name set to GridViewHeaderCell_Over. Then re-apply the custom template using an implicit style. For example:

<telerik:RadGridView.Resources>                
	<Style TargetType="telerik:GridViewHeaderCell">
		<Setter Property="Template" Value="{StaticResource CustomGridViewHeaderCellTemplate}" />
	</Style>
</telerik:RadGridView.Resources>

With our newer themes, like Fluent, Material, Office2019, etc., we strive to improve the templates and their customization abilities, so there this type of modification can be done very easily, without the need of extracting any templates. To change the mouse over background you can simply set the ThemeHelper.MouseOverBrush attached property to the GridViewHeaderCell element. In addtion, you can change the check (sort) state brush using the ThemeHelper.CheckedBrush. You can read more about the ThemeHelper in the help documentation.

So, if you use a newer theme, you can use the following approach:

<telerik:RadGridView.Resources>                
	<Style TargetType="telerik:GridViewHeaderCell">
		<Setter Property="helpers:ThemeHelper.MouseOverBrush" Value="Red"/>
		<Setter Property="helpers:ThemeHelper.CheckedBrush" Value="Green"/>
	</Style>
</telerik:RadGridView.Resources>

I also attached a small example showing how to implement this. Note that the project uses Xaml dlls and the StyleManager theming approach.

I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

[Justin]

Thanks for your answer !

[Psyduck]

Hello.

The way you think is right.

There seems to be something wrong with the property settings.

Please check my example file.

<Style x:Key="GridViewHeaderRowStyle" TargetType="telerik:GridViewHeaderRow">
	<Setter Property="Background" Value="#FF606366"/>
	<Style.Triggers>
		<Trigger Property="IsMouseOver" Value="True">
			<Setter Property="Background" Value="Red"/>
		</Trigger>
	</Style.Triggers>
</Style>

<telerik:RadGridView HeaderRowStyle="{StaticResource GridViewHeaderRowStyle}">

 

Or if you are using NoXaml you should use baseon for style.

<Style  x:Key="GridViewHeaderRowStyle" TargetType="grid:GridViewHeaderRow" BasedOn="{StaticResource GridViewHeaderRowStyle}"/>

 

[Justin]

Thanks for your answer. I was talking about the background of "Final Target" : 
Is it possible without modifying the  Columns Header Cell? Because I need to have AutoGenerateColumn to True. The reason is I don't know which will be my columns.
I try something like this : 

<telerik:RadGridView.Columns>
    <ItemsControl ItemsSource="{Binding MySource}">
        ....
    </ItemsControl>
</telerik:RadGridView.Columns>

But Columns didn't accept ItemsControl as child.

[Psyduck]

I still don't understand. What is Final Target?

And even when AutoGenerateColumn is set to true, the style I used is the same. Just telerik:RadGridView.Columns shouldn't exist. because it is duplicated.
https://docs.telerik.com/devtools/wpf/controls/radgridview/columns/how-to/prevent-column-autogenerate

It's the first time I've seen ItemsControl as a child of Columns.
If you want to know more details, I think it would be better to wait for the telerik supporter.

good luck.

[Justin]

I'm sorry. I try to explain myself a little bit more. I think my title is not correct it will perhaps be "Disable column mouse over event with auto-generated columns to true".
 The Final Target is a header of a column. My previous comment was just some idea I have but were not workings.

I will explain with a few points what is the current state =>

* Auto generate my columns (because I don't know what will be my columns. I can have 1 column or a lot more).
* I have used the default style. White background and black foreground for headers.
* My mouse came over the header and it changes as you can see the Final Target (this is not any more white background and black foreground). You can see the image just on my previous comment

What I want is =>

* Auto generate my columns (because I don't know what will be my columns. I can have 1 column or a lot more).
* I have used the default style. White background and black foreground for headers.
* My mouse came over the header and the style need to stay with white background and black foreground.

I have access to the RadGridView from the code behind if it can help.

Some solutions I found are always generating columns by hand, not as my control is working. I will put my code below. The best would be to only add a style on the resource which doesn't seem possible....

    <UserControl.Resources>
        <Style x:Key="HeaderRowStyle" TargetType="telerik:GridViewHeaderRow">
            <Setter Property="Background" Value="#FF606366"></Setter>
            <Setter Property="FontWeight" Value="Medium"></Setter>
        </Style>
    </UserControl.Resources>
    <DockPanel Margin="0">
        <telerik:RadGridView x:Name="GridView"
                             Margin="-2,0,0,0"
                             ItemsSource="{Binding Data}"
                             SelectionMode="Extended"
                             SelectionUnit="Cell"
                             HorizontalGridLinesBrush="Gray"
                             VerticalGridLinesBrush="Gray"
                             AutoGenerateColumns="True"
                             ShowGroupPanel="False"
                             IsFilteringAllowed="False"
                             IsReadOnly="True"
                             ShowToolTipOnTrimmedText="True"
                             RowIndicatorVisibility="Collapsed"    
                             CanUserFreezeColumns="False"
                             CanUserSortColumns="False"
                             CanUserDeleteRows="False"
                             CanUserInsertRows="False"
                             CanUserReorderColumns="False"
                             CanUserSelectColumns="True"
                             HeaderRowStyle="{StaticResource HeaderRowStyle}"
                             Background="Transparent"
                             GridLinesVisibility="Both"
                             BorderBrush="White"
                             BorderThickness="0.5"
                             MinColumnWidth="80"
                             CurrentCellChanged="GridView_OnCurrentCellChanged"
                             KeyUp="GridView_OnKeyUp">
        </telerik:RadGridView>
    </DockPanel>
</UserControl>

Is this a little bit clearer?

Thank you for your answer. Sorry for my English...