有没有一种方法可以轻松自定义DataGrid列标题？

Question

有没有一种方法可以轻松自定义DataGrid列标题？

bre*_*esh 8 datagrid uwp windows-community-toolkit

UWP Community Toolkit DataGrid在列标题中为排序图标保留了一些空间，这使事情看起来真的很奇怪。当您不使用排序（甚至是无法排序的列）时，数据网格列标题中还有35px的空白空间。如果使列宽变小，它会在真正需要时很早就切断标题文本。

我制定了一个解决方案，方法是在加载标头之后获取标头，遍历可视化树，然后手动分配所需的属性，但是这似乎需要大量工作，并且如果模板发生更改，该标头会中断。

有一个更好的方法吗？

我现在如何修改标题：

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);
}

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rom*_*asz 1

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

\n\n

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

\n\n
<Page.Resources>\n <ResourceDictionary>\n <ResourceDictionary.ThemeDictionaries>\n <ResourceDictionary x:Key="Default">\n <SolidColorBrush x:Key="InvalidBrush" Color="#FFFF00"/>\n <SolidColorBrush x:Key="FillerGridLinesBrush" Color="Transparent"/>\n <StaticResource x:Key="ScrollBarsSeparatorBackground" ResourceKey="SystemControlPageBackgroundChromeLowBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="SystemAltHighColor"/>\n <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="{StaticResource DataGridColumnHeaderBackgroundColor}"/>\n <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>\n <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>\n <StaticResource x:Key="DataGridColumnHeaderDraggedBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderPointerOverBrush" ResourceKey="SystemControlHighlightListLowBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderPressedBrush" ResourceKey="SystemControlHighlightListMediumBrush"/>\n </ResourceDictionary>\n <ResourceDictionary x:Key="HighContrast">\n <SolidColorBrush x:Key="InvalidBrush" Color="#FFFF00"/>\n <SolidColorBrush x:Key="FillerGridLinesBrush" Color="Transparent"/>\n <StaticResource x:Key="ScrollBarsSeparatorBackground" ResourceKey="SystemControlPageBackgroundChromeLowBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="SystemAltHighColor"/>\n <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="{StaticResource DataGridColumnHeaderBackgroundColor}"/>\n <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>\n <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>\n <StaticResource x:Key="DataGridColumnHeaderDraggedBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderPointerOverBrush" ResourceKey="SystemControlHighlightListLowBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderPressedBrush" ResourceKey="SystemControlHighlightListMediumBrush"/>\n </ResourceDictionary>\n <ResourceDictionary x:Key="Light">\n <SolidColorBrush x:Key="InvalidBrush" Color="#C50500"/>\n <SolidColorBrush x:Key="FillerGridLinesBrush" Color="Transparent"/>\n <SolidColorBrush x:Key="ScrollBarsSeparatorBackground" Color="{StaticResource SystemChromeMediumColor}" Opacity="0.9"/>\n <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="SystemAltHighColor"/>\n <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="{StaticResource DataGridColumnHeaderBackgroundColor}"/>\n <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>\n <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>\n <StaticResource x:Key="DataGridColumnHeaderDraggedBackgroundBrush" ResourceKey="SystemControlBackgroundChromeMediumLowBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderPointerOverBrush" ResourceKey="SystemControlHighlightListLowBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderPressedBrush" ResourceKey="SystemControlHighlightListMediumBrush"/>\n </ResourceDictionary>\n </ResourceDictionary.ThemeDictionaries>\n\n <SolidColorBrush x:Key="SystemControlGridLinesBaseMediumLowBrush" Color="{StaticResource SystemBaseMediumLowColor}" Opacity="0.4"/>\n <SolidColorBrush x:Key="SystemControlRowGroupHeaderBackgroundMediumBrush" Color="{StaticResource SystemChromeMediumColor}"/>\n <SolidColorBrush x:Key="DataGridCurrencyVisualPrimaryBrush" Color="Transparent"/>\n\n <StaticResource x:Key="DataGridColumnHeaderForegroundBrush" ResourceKey="SystemControlForegroundBaseMediumBrush"/>\n <StaticResource x:Key="DataGridColumnHeaderBackgroundColor" ResourceKey="SystemAltHighColor"/>\n <SolidColorBrush x:Key="DataGridColumnHeaderBackgroundBrush" Color="{StaticResource DataGridColumnHeaderBackgroundColor}"/>\n <StaticResource x:Key="DataGridColumnHeaderHoveredBackgroundColor" ResourceKey="SystemListLowColor"/>\n <StaticResource x:Key="DataGridColumnHeaderPressedBackgroundColor" ResourceKey="SystemListMediumColor"/>\n <x:String x:Key="SortIconAscending"></x:String>\n <x:String x:Key="SortIconDescending"></x:String>\n <StaticResource x:Key="GridLinesBrush" ResourceKey="SystemControlGridLinesBaseMediumLowBrush"/>\n <StaticResource x:Key="DataGridCellFocusVisualPrimaryBrush" ResourceKey="SystemControlFocusVisualPrimaryBrush"/>\n <StaticResource x:Key="DataGridCellFocusVisualSecondaryBrush" ResourceKey="SystemControlFocusVisualSecondaryBrush"/>\n\n <Style x:Key="DataGridColumnHeaderNoSortStyle" TargetType="localprimitives:DataGridColumnHeader">\n <Setter Property="Foreground" Value="{ThemeResource DataGridColumnHeaderForegroundBrush}"/>\n <Setter Property="HorizontalContentAlignment" Value="Stretch"/>\n <Setter Property="VerticalContentAlignment" Value="Center"/>\n <Setter Property="IsTabStop" Value="False"/>\n <Setter Property="SeparatorBrush" Value="{ThemeResource GridLinesBrush}"/>\n <Setter Property="Padding" Value="12,0,0,0"/>\n <Setter Property="FontSize" Value="12"/>\n <Setter Property="MinHeight" Value="32"/>\n <Setter Property="Template">\n <Setter.Value>\n <ControlTemplate TargetType="localprimitives:DataGridColumnHeader">\n <Grid x:Name="ColumnHeaderRoot">\n <Grid.ColumnDefinitions>\n <ColumnDefinition Width="*"/>\n <ColumnDefinition Width="Auto"/>\n </Grid.ColumnDefinitions>\n <VisualStateManager.VisualStateGroups>\n <VisualStateGroup x:Name="CommonStates">\n <VisualState x:Name="Normal">\n <Storyboard>\n <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="{ThemeResource DataGridColumnHeaderBackgroundColor}"/>\n </Storyboard>\n </VisualState>\n <VisualState x:Name="PointerOver">\n <Storyboard>\n <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="{ThemeResource DataGridColumnHeaderHoveredBackgroundColor}"/>\n </Storyboard>\n </VisualState>\n <VisualState x:Name="Pressed">\n <Storyboard>\n <ColorAnimation Duration="0" Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="{ThemeResource DataGridColumnHeaderPressedBackgroundColor}"/>\n </Storyboard>\n </VisualState>\n </VisualStateGroup>\n <VisualStateGroup x:Name="FocusStates">\n <VisualState x:Name="Unfocused"/>\n <VisualState x:Name="Focused">\n <Storyboard>\n <DoubleAnimation Duration="0" Storyboard.TargetName="FocusVisual" Storyboard.TargetProperty="Opacity" To="1"/>\n </Storyboard>\n </VisualState>\n </VisualStateGroup>\n <VisualStateGroup x:Name="SortStates">\n <VisualState x:Name="Unsorted"/>\n <VisualState x:Name="SortAscending">\n <Storyboard>\n <DoubleAnimation Duration="0" Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" To="1"/>\n </Storyboard>\n </VisualState>\n <VisualState x:Name="SortDescending">\n <VisualState.Setters>\n <Setter Target="SortIcon.Glyph" Value="{ThemeResource SortIconDescending}"/>\n </VisualState.Setters>\n <Storyboard>\n <DoubleAnimation Duration="0" Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" To="1"/>\n </Storyboard>\n </VisualState>\n </VisualStateGroup>\n </VisualStateManager.VisualStateGroups>\n <Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="{ThemeResource DataGridColumnHeaderBackgroundBrush}" Stretch="Fill"/>\n <Grid HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">\n <Grid.ColumnDefinitions>\n <ColumnDefinition Width="*"/>\n <ColumnDefinition MinWidth="0" Width="Auto"/>\n </Grid.ColumnDefinitions>\n <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Left" VerticalAlignment="Center"/>\n <FontIcon x:Name="SortIcon" Grid.Column="1" FontFamily="{ThemeResource SymbolThemeFontFamily}" Foreground="{ThemeResource DataGridColumnHeaderForegroundBrush}" FontSize="12" Glyph="{ThemeResource SortIconAscending}" HorizontalAlignment="Center" Opacity="0" VerticalAlignment="Center"\n Visibility="Collapsed"/>\n </Grid>\n <Rectangle x:Name="VerticalSeparator" Grid.Column="1" Fill="{TemplateBinding SeparatorBrush}" VerticalAlignment="Stretch" Visibility="{TemplateBinding SeparatorVisibility}" Width="1"/>\n <Grid x:Name="FocusVisual" IsHitTestVisible="False" Opacity="0">\n <Rectangle x:Name="FocusVisualPrimary" Fill="Transparent" HorizontalAlignment="Stretch" IsHitTestVisible="False" StrokeThickness="2" Stroke="{ThemeResource DataGridCellFocusVisualPrimaryBrush}" VerticalAlignment="Stretch"/>\n <Rectangle x:Name="FocusVisualSecondary" Fill="Transparent" HorizontalAlignment="Stretch" IsHitTestVisible="False" Margin="2" StrokeThickness="1" Stroke="{ThemeResource DataGridCellFocusVisualSecondaryBrush}" VerticalAlignment="Stretch"/>\n </Grid>\n </Grid>\n </ControlTemplate>\n </Setter.Value>\n </Setter>\n </Style>\n </ResourceDictionary>\n</Page.Resources>\n
Run Code Online (Sandbox Code Playgroud)\n\n
然后只需在DataGrid中使用它：
\n\n
<controls:DataGrid ColumnHeaderStyle="{StaticResource DataGridColumnHeaderNoSortStyle}" \xe2\x80\xa6 />\n
Run Code Online (Sandbox Code Playgroud)\n

是的，我看到了，但不想完全覆盖控件模板...里面有很多内容，然后我必须确保它在 UWP 模板发生变化时保持最新 (2认同)

归档时间：	7 年，2 月前
查看次数：	161 次
最近记录：	7 年，2 月前