更改列标题背景 DataGrid UWP

问题描述 投票：0回答：3

我目前正在查看来自 Nuget Microsoft.Toolkit.Uwp.UI.Controls.DataGrid 的 UWP DataGrid 

xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
我想更改单个列标题背景颜色我已经尝试更改标题样式但到目前为止没有任何结果出去。这是我的例子：

        <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
3个回答
2
投票

目前 DataGrid 没有提供设置 

DataGridColumnHeader
.

背景颜色的属性

通过对源码的分析可以看出，

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
.

0
投票

您也可以将背景应用到整个网格并更改网格线和单元格的颜色。

但是你必须用任何颜色覆盖

<SolidColorBrush x:Key="DataGridColumnHeaderBackgroundColor" Color="Red"/>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.