[UWP] how to set DataGrid background color during columns autogeneration

Question

Hello;

How to set DataGridColumn.Header background color to blue during autogeneration column (code behind).

    private void MyDataGrid_AutoGeneratingColumn(object sender, DataGridAutoGeneratingColumnEventArgs e)
    {

......

}

Answer 1

Hello,

Welcome to Microsoft Q&A!

If you want to change the Background of DataGridColumn.Header, you need to change its default Style. From the default Style, there is a line which define the background of the Header:

<Rectangle x:Name="BackgroundRectangle" Stretch="Fill" Fill="{ThemeResource DataGridColumnHeaderBackgroundBrush}" Grid.ColumnSpan="2"/>

So if you want to change the background, you can change the value of DataGridColumnHeaderBackgroundBrush or define a Background property and bind the property with this Fill property. For example, I define a Background property in Style of DataGridColumnHeader.

.xaml:

<Page.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Default">
                <SolidColorBrush x:Key="InvalidBrush" Color="#FFFF00"/>
                <SolidColorBrush x:Key="FillerGridLinesBrush" Color="Transparent"/>
                <StaticResource x:Key="ScrollBarsSeparatorBackground" ResourceKey="SystemControlPageBackgroundChromeLowBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="SystemAltHighColor"/>
                <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="Red"/>
                <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>
                <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>
                <StaticResource x:Key="DataGridColumnHeaderDraggedBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderPointerOverBrush" ResourceKey="SystemControlHighlightListLowBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderPressedBrush" ResourceKey="SystemControlHighlightListMediumBrush"/>
            </ResourceDictionary>
            <ResourceDictionary x:Key="HighContrast">
                <SolidColorBrush x:Key="InvalidBrush" Color="#FFFF00"/>
                <SolidColorBrush x:Key="FillerGridLinesBrush" Color="Transparent"/>
                <StaticResource x:Key="ScrollBarsSeparatorBackground" ResourceKey="SystemControlPageBackgroundChromeLowBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="SystemAltHighColor"/>
                <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="Red"/>
                <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>
                <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>
                <StaticResource x:Key="DataGridColumnHeaderDraggedBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderPointerOverBrush" ResourceKey="SystemControlHighlightListLowBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderPressedBrush" ResourceKey="SystemControlHighlightListMediumBrush"/>
            </ResourceDictionary>
            <ResourceDictionary x:Key="Light">
                <SolidColorBrush x:Key="InvalidBrush" Color="#C50500"/>
                <SolidColorBrush x:Key="FillerGridLinesBrush" Color="Transparent"/>
                <SolidColorBrush x:Key="ScrollBarsSeparatorBackground" Color="{StaticResource SystemChromeMediumColor}" Opacity="0.9"/>
                <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="SystemAltHighColor"/>
                <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="Red"/>
                <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>
                <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>
                <StaticResource x:Key="DataGridColumnHeaderDraggedBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderPointerOverBrush" ResourceKey="SystemControlHighlightListLowBrush"/>
                <StaticResource x:Key="DataGridColumnHeaderPressedBrush" ResourceKey="SystemControlHighlightListMediumBrush"/>
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>

        <SolidColorBrush x:Key="SystemControlGridLinesBaseMediumLowBrush" Color="{StaticResource SystemBaseMediumLowColor}" Opacity="0.4"/>
        <SolidColorBrush x:Key="SystemControlRowGroupHeaderBackgroundMediumBrush" Color="{StaticResource SystemChromeMediumColor}"/>
        <SolidColorBrush x:Key="DataGridCurrencyVisualPrimaryBrush" Color="Transparent"/>

        <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
        <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundColor" Color="Red"/>
        <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="Red"/>
        <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>
        <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>
        <x:String x:Key="SortIconAscending">&#xE74A;</x:String>
        <x:String x:Key="SortIconDescending">&#xE74B;</x:String>
        <StaticResource x:Key="GridLinesBrush" ResourceKey="SystemControlGridLinesBaseMediumLowBrush"/>
        <StaticResource x:Key="DataGridCellFocusVisualPrimaryBrush" ResourceKey="SystemControlFocusVisualPrimaryBrush"/>
        <StaticResource x:Key="DataGridCellFocusVisualSecondaryBrush" ResourceKey="SystemControlFocusVisualSecondaryBrush"/>

        <Style x:Key="DataGridColumnHeaderNoSortStyle" TargetType="controlsprimitives:DataGridColumnHeader">
            <Setter Property="Foreground" Value="{ThemeResource DataGridColumnHeaderForegroundBrush}"/>
            <Setter Property="Background" Value="Blue"></Setter>
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>
            <Setter Property="IsTabStop" Value="False"/>
            <Setter Property="SeparatorBrush" Value="{ThemeResource GridLinesBrush}"/>
            <Setter Property="Padding" Value="12,0,0,0"/>
            <Setter Property="FontSize" Value="12"/>
            <Setter Property="MinHeight" Value="32"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="controlsprimitives:DataGridColumnHeader">
                        <Grid x:Name="ColumnHeaderRoot">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="FocusStates">
                                    <VisualState x:Name="Unfocused"/>
                                    <VisualState x:Name="Focused">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="SortStates">
                                    <VisualState x:Name="Unsorted"/>
                                    <VisualState x:Name="SortAscending">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="SortDescending">
                                        <VisualState.Setters>
                                            <Setter Target="SortIcon.Glyph" Value="{ThemeResource SortIconDescending}"/>
                                        </VisualState.Setters>
                                        <Storyboard>
                                            <DoubleAnimation Duration="0" Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" To="1"/>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="{TemplateBinding Background}" Stretch="Fill"/>
                            <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                    <ColumnDefinition MinWidth="0" Width="Auto"/>
                                </Grid.ColumnDefinitions>
                                <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Left" VerticalAlignment="Center"/>
                                <FontIcon x:Name="SortIcon" Grid.Column="1" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="{ThemeResource DataGridColumnHeaderForegroundBrush}" FontSize="12" Glyph="{ThemeResource SortIconAscending}" HorizontalAlignment="Center" Opacity="0" VerticalAlignment="Center"
                                      Visibility="Collapsed"/>
                            </Grid>
                            <Rectangle x:Name="VerticalSeparator" Grid.Column="1" Fill="{TemplateBinding SeparatorBrush}" VerticalAlignment="Stretch" Visibility="{TemplateBinding SeparatorVisibility}" Width="1"/>
                            <Grid x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0">
                                <Rectangle x:Name="FocusVisualPrimary" Fill="Transparent" HorizontalAlignment="Stretch" IsHitTestVisible="False" StrokeThickness="2" Stroke="{ThemeResource DataGridCellFocusVisualPrimaryBrush}" VerticalAlignment="Stretch"/>
                                <Rectangle x:Name="FocusVisualSecondary" Fill="Transparent" HorizontalAlignment="Stretch" IsHitTestVisible="False" Margin="2" StrokeThickness="1" Stroke="{ThemeResource DataGridCellFocusVisualSecondaryBrush}" VerticalAlignment="Stretch"/>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ResourceDictionary>
</Page.Resources>

<controls:DataGrid x:Name="dataGrid1" ItemsSource="{x:Bind Customers}">
    <controls:DataGrid.Columns>
        <controls:DataGridTextColumn
        Header="First Name" 
        Width="SizeToHeader"
        Binding="{Binding FirstName}"
        FontSize="20" HeaderStyle="{StaticResource MyDataGridColumnHeaderStyle}">
        </controls:DataGridTextColumn>
    </controls:DataGrid.Columns>
</controls:DataGrid>

Update:

If you want to override the DataGridColumnHeaderBackgroundColor, you can try the following method and don't need to change its default style.

.xaml:

<Page.Resources>
    <Color x:Key="MyColumnHeaderBackgroundColor">Red</Color>
    <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="MyColumnHeaderBackgroundColor"/>
</Page.Resources>