RadGridView Column Header Style

[Lyubomir]

Hello,
I have a RadGridView and I am filling it with data and styling it in the ViewModel of my wpf app.
I have the following code:

FontSizeConverter myFontSizeConverter = new FontSizeConverter();
Style headerStyle = new Style(typeof(GridViewHeaderCell));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.HorizontalContentAlignmentProperty, System.Windows.HorizontalAlignment.Left));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.BackgroundProperty, (Brush)(new BrushConverter().ConvertFrom("#546E7A"))));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.ForegroundProperty, (Brush)(new BrushConverter().ConvertFrom("#ffffff"))));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.FontWeightProperty, FontWeights.Bold));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.FontSizeProperty, (Double)myFontSizeConverter.ConvertFromString("12")));

 

var headerIsMouseOverTrigger = new Trigger();
headerIsMouseOverTrigger.Property = UIElement.IsMouseOverProperty;
headerIsMouseOverTrigger.Value = true;

var headerIsMouseOverStyle = new Style(typeof(GridViewHeaderCell));
headerIsMouseOverStyle.Setters.Add(new Setter(HeaderedContentControl.HorizontalContentAlignmentProperty, System.Windows.HorizontalAlignment.Left));
headerIsMouseOverStyle.Setters.Add(new Setter(HeaderedContentControl.BackgroundProperty, (Brush)(new BrushConverter().ConvertFrom("#546E7A"))));
headerIsMouseOverStyle.Setters.Add(new Setter(HeaderedContentControl.ForegroundProperty, (Brush)(new BrushConverter().ConvertFrom("#ffffff"))));
headerIsMouseOverStyle.Setters.Add(new Setter(HeaderedContentControl.FontWeightProperty, FontWeights.Bold));
headerIsMouseOverStyle.Setters.Add(new Setter(HeaderedContentControl.FontSizeProperty, (Double)myFontSizeConverter.ConvertFromString("12")));

headerIsMouseOverTrigger.Setters.Add(new Setter(GridViewHeaderCell.StyleProperty, headerIsMouseOverStyle));
headerStyle.Triggers.Add(headerIsMouseOverTrigger);

 

var name = new GridViewDataColumn()
{
DataMemberBinding = new Binding("Name"),
IsReadOnly = true,
IsFilterable = false,
IsResizable = false,
Width = 210.0D,
Header = base.GetText(2615),
HeaderCellStyle = headerStyle,
Tag = "NotSelected"
};

What I am trying to accomplish is not to change the background of the column header  when the mouse is over it. Can you tell me what I am doing wrong and how to make the desired effect? Thank you :)

[Lyubomir]

I found a solution. I created a new GridViewHeaderCell and put a textblock in it. Then set it in the trigger and added the trigger to the headerstyle.

FontSizeConverter myFontSizeConverter = new FontSizeConverter();
Style headerStyle = new Style(typeof(GridViewHeaderCell));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.HorizontalContentAlignmentProperty, System.Windows.HorizontalAlignment.Left));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.BackgroundProperty, (Brush)(new BrushConverter().ConvertFrom("#546E7A"))));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.ForegroundProperty, (Brush)(new BrushConverter().ConvertFrom("#ffffff"))));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.FontWeightProperty, FontWeights.Bold));
headerStyle.Setters.Add(new Setter(HeaderedContentControl.FontSizeProperty, (Double)myFontSizeConverter.ConvertFromString("12")));

var headerIsMouseOverTrigger = new Trigger();
headerIsMouseOverTrigger.Property = UIElement.IsMouseOverProperty;
headerIsMouseOverTrigger.Value = true;

var isMouseOverTempalteHeader = new System.Windows.Controls.ControlTemplate(typeof(GridViewHeaderCell));
var isMouseOverTempaltefactoryHeader = new FrameworkElementFactory(typeof(System.Windows.Controls.TextBlock));
isMouseOverTempaltefactoryHeader.SetValue(TextBlock.ForegroundProperty, new SolidColorBrush(Colors.White));
isMouseOverTempaltefactoryHeader.SetValue(TextBlock.BackgroundProperty, (Brush)(new BrushConverter().ConvertFrom("#546E7A")));
isMouseOverTempaltefactoryHeader.SetValue(TextBlock.TextProperty, base.GetText(2615));
isMouseOverTempaltefactoryHeader.SetValue(TextBlock.FontSizeProperty, 12D);
isMouseOverTempaltefactoryHeader.SetValue(TextBlock.HorizontalAlignmentProperty, HorizontalAlignment.Stretch);
isMouseOverTempaltefactoryHeader.SetValue(TextBlock.VerticalAlignmentProperty, VerticalAlignment.Stretch);
isMouseOverTempaltefactoryHeader.SetValue(TextBlock.TextAlignmentProperty, TextAlignment.Left);

isMouseOverTempalteHeader.VisualTree = isMouseOverTempaltefactoryHeader;

headerIsMouseOverTrigger.Setters.Add(new Setter(Telerik.Windows.Controls.GridView.GridViewCell.TemplateProperty, isMouseOverTempalteHeader));
headerStyle.Triggers.Add(headerIsMouseOverTrigger);

var name = new GridViewDataColumn()
{
DataMemberBinding = new Binding("Name"),
IsReadOnly = true,
IsFilterable = false,
IsResizable = false,
Width = 210.0D,
Header = base.GetText(2615),
HeaderCellStyle = headerStyle,
Tag = "NotSelected"
};

[Lyubomir]

But I have one question? Is there a smoother way to change the background? Without having to create a new element and populating it. My GridViewDataColumn is called name and I saw that I can do this -> name.HeaderCellStyle.Triggers.Add. Is it possible to add the setter this way and if yes what is the right implementation?

Thanks :)

[Vladimir Stoyanov]

Hello Lyubomir,

Thank you for the provided sample code. 

My current understanding is that you want to avoid changing the Background of the GridViewHeaderCell when the mouse is over it. Feel free to correct me, if I am wrong and provide some more information about what you are trying to achieve. 

If that is indeed the case, the way to go is to extract and modify the ControlTemplate of the GridViewHeaderCell for the theme that you are using. I am attaching a sample project demonstrating how you can achieve that. Note, that the recommended way modifying ControlTemplates is with implicit styling and the NoXaml binaries as in the attached project. Also, note that the extracted template is for the Office_Black theme. If you are using a different theme, you will have to extract and edit the corresponding template. 

I hope you find this helpful. 

Regards,
Vladimir Stoyanov
Progress Telerik