How do I style the column header on a UWP CommunityToolkit DataGrid

Question

I'm currently looking at the UWP CommunityToolkit DataGrid. I've been through the docs, but I'm not finding them clear on how to apply a ColumnHeaderStyle. I'm not sure what I should be targeting in the column header to set my style. I'm wishing to change the background and foreground colors. I would also like these properties to apply across the whole header, not just individual columns.

 <controls:DataGrid.ColumnHeaderStyle>
       <Style TargetType="">
             <Setter Property="" Value=""/>
       </Style>                                       
 </controls:DataGrid.ColumnHeaderStyle>

You are right, you need to update `ColumnHeaderStyle` of the `DataGrid`. What you need to change depends on what customization/styling you need, better to give more info on the styling you need so that I can help you with some code snippet. — Dishant, Aug 30 '18 at 23:11
@Dishant. Thank you for your reply. I'm trying to change the background color of the entire header (not just the columns with content). I also wish to change the foreground color of the text in the header columns. — Mark, Sep 03 '18 at 11:41
@Dishant. Thank you for your reply. I'm trying to change the background color of the entire header (not just the columns with content). I also wish to change the foreground color of the text in the header columns. to change the background color I targeted the border and chose background as a property and set the property value. However I get an exception saying that the style cannot be applied to that target type. I'm not sure what it is I should be setting my target type to. I also get an exceptions if I target textblock for changing the foreground color. — Mark, Sep 03 '18 at 11:52
As per the [DataGrid](https://github.com/Microsoft/WindowsCommunityToolkit/blob/master/Microsoft.Toolkit.Uwp.UI.Controls.DataGrid/DataGrid/DataGrid.xaml) styling, you can change `DataGridColumnHeaderBackgroundBrush` and `DataGridColumnHeaderForegroundBrush` for changing header background and foreground. — Dishant, Sep 03 '18 at 23:49
@Dishant, Thanks again for your reply and apologies for my lateness in coming back. I do not understand how I target these properties from the datagrid. Are you able to provide an example of say just changing the background color? — Mark, Sep 21 '18 at 13:02

score 6 · Answer 1 · answered Dec 10 '18 at 21:38

This one had me puzzled for a while, but I eventually discovered you need to add another XML namespace declaration in order to target the column header.

<Application
    x:Class="MyApp"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
    xmlns:controlsprimitives="using:Microsoft.Toolkit.Uwp.UI.Controls.Primitives">

So in this case I just appended:

xmlns:controlsprimitives="using:Microsoft.Toolkit.Uwp.UI.Controls.Primitives"

Then you can create a style with this target:

<Style x:Key="ColumnHeaderStyle" TargetType="controlsprimitives:DataGridColumnHeader">
    <!-- style properties -->
</Style>

(As of writing this, however, there seems to be weird styling behavior in doing this for some reason.)

for clarity you could add to your answer: the nuget packages needed are then both .Controls and .Controls.DataGrid — Allstar, Jun 24 '20 at 09:21

score 0 · Answer 2 · answered Sep 22 '18 at 05:00

0

You can override DataGridColumnHeaderBackgroundBrush and DataGridColumnHeaderForegroundBrush in your App.xaml as below:

<SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="#FFCB2128" />
<SolidColorBrush x:Key="DataGridColumnHeaderForegroundBrush" Color="#FFB03060" />

answered Sep 22 '18 at 05:00

Dishant

1,545
12
29

This is a nice idea, and it works for changing the Foreground. For whatever reason, it's not changing the Background for me. I had to override the Template just to change the Background. – Ben Jasperson Aug 25 '22 at 15:12

score 0 · Answer 3 · answered Aug 25 '22 at 15:04

The answer from @user1559112 got me on the right track, but it took some time to realize that in order to deal with the "weird styling behavior", it wasn't enough to just add a setter for the Background. I had to override the template like this:

<controls:DataGrid.ColumnHeaderStyle>
    <Style TargetType="controlsprimitives:DataGridColumnHeader">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <TextBlock Text="{Binding}" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="prms:DataGridColumnHeader">
                    <ContentPresenter Background="{ThemeResource HeaderBackgroundBrush}" />
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</controls:DataGrid.ColumnHeaderStyle>

How do I style the column header on a UWP CommunityToolkit DataGrid

3 Answers3