xamlwinui-3winuiwindows-community-toolkit

Unable to change background color of DataGridColumnHeader in DataGrid Winui3

I am creating a WinUI3 project and using Datagrid from

CommunityToolkit.WinUI.UI.Controls.DataGrid

I am unable to change DataGridColumnHeader using Setter while Foreground changes perfectly fine. My Code :

 <controls:DataGrid.ColumnHeaderStyle>
   <Style TargetType="primitives:DataGridColumnHeader">
   <Setter Property="FontSize" Value="10"/>
   <Setter Property="FontWeight" Value="Bold"/>
   <Setter Property="HorizontalAlignment" Value="Stretch"/>
   <Setter Property="Background" Value="Green"/>       //This doesnt work                        
   <Setter Property="Foreground" Value="Red"/> //This works
                     
   </Style>
                           
</controls:DataGrid.ColumnHeaderStyle>

Output

enter image description here

No matter what I do, the header background remains white. What should I do to change Column Header Background color?

Edit

I saw an issue on Github about it, but didn't make sense to me how to implement it !

https://github.com/CommunityToolkit/WindowsCommunityToolkit/issues/3393
Solution

  • You need to override these 3 colors:

    <Page.Resources>
    <Color x:Key="GreenishColor">#FF60B560</Color>
    <Color x:Key="YellowishColor">#FFFFF700</Color>
    <Color x:Key="BlueishColor">#FF00e5ff</Color>
    <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="GreenishColor"/>
    <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="YellowishColor"/>
    <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="BlueishColor"/>
</Page.Resources>

    you can also do this inside your DataGrid like this:

    <controls:DataGrid>
    <controls:DataGrid.Resources>
        <Color x:Key="GreenishColor">#FF60B560</Color>
        <Color x:Key="YellowishColor">#FFFFF700</Color>
        <Color x:Key="BlueishColor">#FF00e5ff</Color>
        <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="GreenishColor"/>
        <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="YellowishColor"/>
        <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="BlueishColor"/>
    </controls:DataGrid.Resources>
</controls:DataGrid>