有没有办法轻松自定义 DataGrid 列标题？

Question

UWP 社区工具包 DataGrid 在列标题中为排序图标保留了一点空间，这让事情看起来很奇怪。当您不使用排序时（甚至当列不可排序时），数据网格列标题中有一个 35 像素宽的空间，该空间没有任何内容。如果您将列宽变小，它会在您真正需要之前很久就切断您的标题文本。

我制定了一个解决方案，方法是在加载标题后获取标题，向下浏览可视化树，并手动分配我需要的属性 - 但它似乎需要做很多工作，并且如果模板发生更改就会中断。 ????

有没有更好的方法来做到这一点？

我现在如何修改标题：

var mainPanel = (Windows.UI.Xaml.Controls.Grid)VisualTreeHelper.GetChild(header, 0);
if (mainPanel != null)
{
    var contentPanel = (Windows.UI.Xaml.Controls.Grid)VisualTreeHelper.GetChild(mainPanel, 1);
    contentPanel.ColumnDefinitions[1].MinWidth = 0;

    var fontIcon = (FontIcon)VisualTreeHelper.GetChild(contentPanel, 1);
    fontIcon.Margin = new Thickness(2, 0, 2, 0);
    fontIcon.SetBinding(UIElement.VisibilityProperty,//hide it instead of using opacity
        new Binding()
        {
            Source = fontIcon,
            Path = new PropertyPath(nameof(FontIcon.Opacity)),
            Converter = new ShowSortingIconValueConverter()
        });

    SetCustomizeHeader(header, false);
}

Answer 1

将DataGridColumnHeader 的边距设置为负数。使用ResourceDictionary 中的样式，如下所示。 -10 删除前标题空间，-25 后：

<Style TargetType="controlsprimitives:DataGridColumnHeader" x:Name="MyDataGridColumnHeaderStyle" x:Key="MyDataGridColumnHeaderStyle">
    <Setter Property="Margin" Value="-10,0,-25,0"/>
    <Setter Property="FontSize" Value="11"/>
    <Setter Property="Foreground" Value="Black"/>
    <Setter Property="Background" Value="LightGray"/>
</Style>

然后你显然设置了你的ColumnHeaderstyle = "{StaticResource MyDataGridColumnHeaderstyle"} 或你的DataGrid

Answer 2

您可以为 ColumnHeader 定义自己的样式（要使其看起来与默认样式相同，您需要定义一些资源（您可以查看at the source code at GitHub））。

在提到的样式中，您将 FontIcon 的 可见性设置为折叠并将 ColumnDefinition 的 MinWidth 更改为 0。应该可以：

<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="{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"/>

        <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"/>
        <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="localprimitives:DataGridColumnHeader">
            <Setter Property="Foreground" Value="{ThemeResource DataGridColumnHeaderForegroundBrush}"/>
            <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="localprimitives:DataGridColumnHeader">
                        <Grid x:Name="ColumnHeaderRoot">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="{ThemeResource DataGridColumnHeaderBackgroundColor}"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="{ThemeResource DataGridColumnHeaderHoveredBackgroundColor}"/>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="{ThemeResource DataGridColumnHeaderPressedBackgroundColor}"/>
                                        </Storyboard>
                                    </VisualState>
                                </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="{ThemeResource DataGridColumnHeaderBackgroundBrush}" 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>

然后在你的 DataGrid 中使用它：

<controls:DataGrid ColumnHeaderStyle="{StaticResource DataGridColumnHeaderNoSortStyle}" … />