This is a migrated thread and some comments may be shown as answers.

RadGridView Column Header Style

3 Answers 109 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Lyubomir
Top achievements
Rank 1
Lyubomir asked on 24 Jun 2019, 12:29 PM

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



3 Answers, 1 is accepted

Sort by
0
Lyubomir
Top achievements
Rank 1
answered on 24 Jun 2019, 01:31 PM

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


0
Lyubomir
Top achievements
Rank 1
answered on 24 Jun 2019, 01:34 PM
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 :)
0
Vladimir Stoyanov
Telerik team
answered on 27 Jun 2019, 12:20 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
GridView
Asked by
Lyubomir
Top achievements
Rank 1
Answers by
Lyubomir
Top achievements
Rank 1
Vladimir Stoyanov
Telerik team
Share this question
or