更改列标题背景 DataGrid UWP答案

【问题标题】：Change column header background DataGrid UWP更改列标题背景 DataGrid UWP
【发布时间】：2021-02-11 23:03:38
【问题描述】：

我目前正在查看来自 Nuget Microsoft.Toolkit.Uwp.UI.Controls.DataGrid xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls" 的 UWP DataGrid，我想更改单个列标题背景颜色我尝试更改标题样式但到目前为止没有出来了。这是我的例子：

        <controls:DataGrid AutoGenerateColumns="False" AlternatingRowBackground="LightGray"
                       ItemsSource="{Binding ListOfGrips}">
        <controls:DataGrid.Columns>

            <controls:DataGridTextColumn
                Header="First header"
                Width="SizeToHeader"
                Binding="{Binding DirectionType}"
                FontSize="15"
                Foreground="White">
                <controls:DataGridTextColumn.HeaderStyle>
                    <Style TargetType="primitives:DataGridColumnHeader">
                        <Setter Property="Background" Value="#58622D" />
                    </Style>
                </controls:DataGridTextColumn.HeaderStyle>
            </controls:DataGridTextColumn>

            <!-- Other columns -->
        </controls:DataGrid.Columns>
    </controls:DataGrid>

那么如何更改标题单元格的背景颜色？

【问题讨论】：

标签： uwp datagrid uwp-xaml windows-community-toolkit

【解决方案1】：

目前DataGrid没有提供设置DataGridColumnHeader背景颜色的属性。

通过source code的分析可以看出Background属性实际上并没有绑定BackgroundRectangle.Fill。

如果你想改变这种行为，你可能需要更多额外的代码来做到这一点，即重写DataGridColumnHeader的样式。

但是，因为DataGrid使用了大量的自定义资源，所以在重写样式之前需要创建一个资源字典来存储这些默认资源。

DefaultDataGridResources.xaml

<ResourceDictionary
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApplication.Template">
    <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="{StaticResource DataGridColumnHeaderBackgroundColor}"/>
            <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="{StaticResource DataGridColumnHeaderBackgroundColor}"/>
            <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="{StaticResource DataGridColumnHeaderBackgroundColor}"/>
            <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"/>

    <x:String x:Key="SortIconAscending">&#xE74A;</x:String>
    <x:String x:Key="SortIconDescending">&#xE74B;</x:String>
    <x:String x:Key="RowGroupHeaderIconClosed">&#xE0E3;</x:String>
    <x:String x:Key="RowGroupHeaderIconOpened">&#xE0E5;</x:String>

    <x:String x:Key="ScrollBarsSeparatorExpandBeginTime">00:00:00.40</x:String>
    <x:String x:Key="ScrollBarsSeparatorExpandDuration">00:00:00.1</x:String>
    <x:String x:Key="ScrollBarsSeparatorContractBeginTime">00:00:02.00</x:String>
    <x:String x:Key="ScrollBarsSeparatorContractDelay">00:00:02</x:String>
    <x:String x:Key="ScrollBarsSeparatorContractDuration">00:00:00.1</x:String>
    <x:String x:Key="ScrollBarsSeparatorContractFinalKeyframe">00:00:02.1</x:String>
    <x:String x:Key="ScrollBarsSeparatorNoTouchDuration">00:00:00.5</x:String>

    <x:Double x:Key="ListAccentLowOpacity">0.6</x:Double>
    <x:Double x:Key="ListAccentMediumOpacity">0.8</x:Double>

    <StaticResource x:Key="GridLinesBrush" ResourceKey="SystemControlGridLinesBaseMediumLowBrush"/>

    <StaticResource x:Key="DataGridDetailsPresenterBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>
    <StaticResource x:Key="DataGridFillerColumnGridLinesBrush" ResourceKey="FillerGridLinesBrush"/>
    <StaticResource x:Key="DataGridRowSelectedBackgroundColor" ResourceKey="SystemAccentColor"/>
    <StaticResource x:Key="DataGridRowSelectedBackgroundOpacity" ResourceKey="ListAccentLowOpacity"/>
    <StaticResource x:Key="DataGridRowSelectedHoveredBackgroundColor" ResourceKey="SystemAccentColor"/>
    <StaticResource x:Key="DataGridRowSelectedHoveredBackgroundOpacity" ResourceKey="ListAccentMediumOpacity"/>
    <StaticResource x:Key="DataGridRowSelectedUnfocusedBackgroundColor" ResourceKey="SystemAccentColor"/>
    <StaticResource x:Key="DataGridRowSelectedUnfocusedBackgroundOpacity" ResourceKey="ListAccentLowOpacity"/>
    <StaticResource x:Key="DataGridRowSelectedHoveredUnfocusedBackgroundColor" ResourceKey="SystemAccentColor"/>
    <StaticResource x:Key="DataGridRowSelectedHoveredUnfocusedBackgroundOpacity" ResourceKey="ListAccentMediumOpacity"/>
    <StaticResource x:Key="DataGridRowHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>
    <StaticResource x:Key="DataGridRowHeaderBackgroundBrush" ResourceKey="SystemControlBackgroundAltHighBrush"/>
    <StaticResource x:Key="DataGridRowGroupHeaderBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumBrush"/>
    <StaticResource x:Key="DataGridRowGroupHeaderHoveredBackgroundBrush" ResourceKey="SystemControlBackgroundListLowBrush"/>
    <StaticResource x:Key="DataGridRowGroupHeaderPressedBackgroundBrush" ResourceKey="SystemControlBackgroundListMediumBrush"/>
    <StaticResource x:Key="DataGridRowGroupHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseHighBrush"/>
    <StaticResource x:Key="DataGridRowInvalidBrush" ResourceKey="InvalidBrush"/>
    <StaticResource x:Key="DataGridCellBackgroundBrush" ResourceKey="SystemControlTransparentBrush"/>
    <StaticResource x:Key="DataGridCellFocusVisualPrimaryBrush" ResourceKey="SystemControlFocusVisualPrimaryBrush"/>
    <StaticResource x:Key="DataGridCellFocusVisualSecondaryBrush" ResourceKey="SystemControlFocusVisualSecondaryBrush"/>
    <StaticResource x:Key="DataGridCellInvalidBrush" ResourceKey="InvalidBrush"/>
</ResourceDictionary>

App.xaml 中的引用

App.xaml

<Application
    x:Class="TestApplication.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:TestApplication">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <ResourceDictionary Source="ms-appx:///Template/DefaultDataGridResources"/>
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

完成以上准备后，就可以修改我们DataGridColumnHeader的样式了

MainPage.xaml

<Page.Resources>
    <Style TargetType="primitives:DataGridColumnHeader" x:Key="CustomColumnHeader">
        <Setter Property="Foreground" Value="{ThemeResource DataGridColumnHeaderForegroundBrush}"/>
        <Setter Property="Background" Value="Transparent" />
        <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="primitives:DataGridColumnHeader">
                    <Grid x:Name="ColumnHeaderRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="PointerOver">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Duration="0" To="{ThemeResource DataGridColumnHeaderHoveredBackgroundColor}"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ColorAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" Duration="0" To="{ThemeResource DataGridColumnHeaderPressedBackgroundColor}"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Unfocused"/>
                                <VisualState x:Name="Focused">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SortStates">
                                <VisualState x:Name="Unsorted"/>
                                <VisualState x:Name="SortAscending">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SortDescending">
                                    <Storyboard>
                                        <DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1"/>
                                    </Storyboard>
                                    <VisualState.Setters>
                                        <Setter Target="SortIcon.Glyph" Value="{ThemeResource SortIconDescending}"/>
                                    </VisualState.Setters>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>

                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"/>
                            <ColumnDefinition Width="Auto"/>
                        </Grid.ColumnDefinitions>

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

                        <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Margin="{TemplateBinding Padding}">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition MinWidth="32" Width="Auto"/>
                            </Grid.ColumnDefinitions>

                            <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Left" VerticalAlignment="Center"/>

                            <FontIcon Grid.Column="1" x:Name="SortIcon" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="{ThemeResource SortIconAscending}" FontSize="12"
                            Foreground="{ThemeResource DataGridColumnHeaderForegroundBrush}" HorizontalAlignment="Center" VerticalAlignment="Center" Opacity="0"/>
                        </Grid>
                        <Rectangle x:Name="VerticalSeparator" Grid.Column="1" Width="1" VerticalAlignment="Stretch" Fill="{TemplateBinding SeparatorBrush}" Visibility="{TemplateBinding SeparatorVisibility}"/>

                        <Grid x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0">
                            <Rectangle x:Name="FocusVisualPrimary" Stroke="{ThemeResource DataGridCellFocusVisualPrimaryBrush}" StrokeThickness="2" Fill="Transparent" 
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="False"/>
                            <Rectangle x:Name="FocusVisualSecondary" Stroke="{ThemeResource DataGridCellFocusVisualSecondaryBrush}" StrokeThickness="1" Fill="Transparent" 
                            HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsHitTestVisible="False" Margin="2"/>
                        </Grid>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

用法

<controls:DataGridTextColumn 
    ...>
    <controls:DataGridTextColumn.HeaderStyle>
        <Style TargetType="primitives:DataGridColumnHeader" BasedOn="{StaticResource CustomColumnHeader}">
            <Setter Property="Background" Value="#58622D" />
        </Style>
    </controls:DataGridTextColumn.HeaderStyle>
</controls:DataGridTextColumn>

【讨论】：

【解决方案2】：

您可以将DataGridColumnHeaderBackgroundColor 添加到Page.Resources。

<Page.Resources>
    <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundColor">Blue</SolidColorBrush>
</Page.Resources>

这会将 DataGrid 列标题的背景颜色更改为Blue。

【讨论】：