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>

Flathead

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. – Cording

@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. – Flathead

@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. – Flathead

As per the DataGrid styling, you can change DataGridColumnHeaderBackgroundBrush and DataGridColumnHeaderForegroundBrush for changing header background and foreground. – Cording

@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? – Flathead

Answer 1

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

Magdau

for clarity you could add to your answer: the nuget packages needed are then both .Controls and .Controls.DataGrid – Boehm

Answer 2

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

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

Cording

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. – Inaccurate

Answer 3

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>

Inaccurate