如何移除WPF .NET 8 DataGrid上出现的黑色额外表头？

问题描述 #

我在WPF .NET 8中构建了如下DataGrid，表格样式已符合预期，但出现了一个黑色额外表头。我已尝试将DataGrid放入Border的方法但无效，请问如何移除这个黑色额外表头？

当前效果如图：

现有代码 #

<DataGrid x:Name="dataGrid"
      Width="640"
      ClipToBounds="True"
      AutoGenerateColumns="False"
      GridLinesVisibility="All"
      HeadersVisibility="Column"
      RowHeaderWidth="0"
      IsReadOnly="True"
      CanUserAddRows="False"
      CanUserDeleteRows="False"
      CanUserReorderColumns="False"
      CanUserResizeColumns="False"
      CanUserResizeRows="False"
      HorizontalScrollBarVisibility="Disabled"
      VerticalScrollBarVisibility="Auto"
      ScrollViewer.CanContentScroll="False"
      Background="Transparent"
      BorderThickness="1"
      EnableRowVirtualization="True"
      EnableColumnVirtualization="True"
      VirtualizingPanel.VirtualizationMode="Recycling">

<DataGrid.Resources>
    <!-- 适配明暗主题的表头样式 -->
    <Style x:Key="BaseHeaderStyle" TargetType="DataGridColumnHeader">
        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlTextBrushKey}}" />
        <Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}" />
        <Setter Property="FontWeight" Value="SemiBold" />
        <Setter Property="Padding" Value="5" />
    </Style>
</DataGrid.Resources>


<DataGrid.Columns>
    <DataGridTextColumn Binding="{Binding SourceType}" Header="打印来源" Width="200">
        <DataGridTextColumn.ElementStyle>
            <Style TargetType="TextBlock">
                <Setter Property="HorizontalAlignment" Value="Left" />
            </Style>
        </DataGridTextColumn.ElementStyle>
        <DataGridTextColumn.HeaderStyle>
            <Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource BaseHeaderStyle}">
                <Setter Property="HorizontalContentAlignment" Value="Left" />
            </Style>
        </DataGridTextColumn.HeaderStyle>
    </DataGridTextColumn>

    <DataGridTextColumn Binding="{Binding PrintedAt}" Header="打印时间" Width="250" CanUserSort="False">
        <DataGridTextColumn.ElementStyle>
            <Style TargetType="TextBlock">
                <Setter Property="HorizontalAlignment" Value="Center" />
            </Style>
        </DataGridTextColumn.ElementStyle>
        <DataGridTextColumn.HeaderStyle>
            <Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource BaseHeaderStyle}">
                <Setter Property="HorizontalContentAlignment" Value="Center" />
            </Style>
        </DataGridTextColumn.HeaderStyle>
    </DataGridTextColumn>

    <DataGridTextColumn Binding="{Binding PageCount}" Header="打印页数" Width="170">
        <DataGridTextColumn.ElementStyle>
            <Style TargetType="TextBlock">
                <Setter Property="HorizontalAlignment" Value="Right" />
            </Style>
        </DataGridTextColumn.ElementStyle>
        <DataGridTextColumn.HeaderStyle>
            <Style TargetType="DataGridColumnHeader" BasedOn="{StaticResource BaseHeaderStyle}">
                <Setter Property="HorizontalContentAlignment" Value="Right" />
            </Style>
        </DataGridTextColumn.HeaderStyle>
    </DataGridTextColumn>
</DataGrid.Columns>

解决方案 #

这个黑色额外表头是DataGrid默认的列标题容器背景，可以通过以下两种方式移除：

方法1：覆盖DataGrid的ColumnHeadersPanelStyle #

在DataGrid.Resources中添加如下样式，将容器背景设为透明：

<Style TargetType="DataGridColumnHeadersPresenter">
    <Setter Property="Background" Value="Transparent" />
</Style>

方法2：修改DataGrid的默认模板 #

如果方法1无效，可以直接重写DataGrid的ControlTemplate，移除默认的黑色背景部分。以下是简化版模板示例：

<DataGrid.Template>
    <ControlTemplate TargetType="DataGrid">
        <Border BorderBrush="{TemplateBinding BorderBrush}"
                BorderThickness="{TemplateBinding BorderThickness}"
                Background="{TemplateBinding Background}">
            <ScrollViewer x:Name="DG_ScrollViewer"
                          Focusable="false">
                <ScrollViewer.Template>
                    <ControlTemplate TargetType="ScrollViewer">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto"/>
                                <ColumnDefinition Width="*"/>
                                <ColumnDefinition Width="Auto"/>
                            </Grid.ColumnDefinitions>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto"/>
                                <RowDefinition Height="*"/>
                                <RowDefinition Height="Auto"/>
                            </Grid.RowDefinitions>
                            <!-- 列标题 -->
                            <DataGridColumnHeadersPresenter x:Name="PART_ColumnHeadersPresenter"
                                                            Grid.Column="1"
                                                            Background="Transparent"/>
                            <!-- 数据内容 -->
                            <ScrollContentPresenter x:Name="PART_ScrollContentPresenter"
                                                    Grid.Row="1"
                                                    Grid.Column="1"
                                                    CanContentScroll="{TemplateBinding CanContentScroll}"
                                                    Content="{TemplateBinding Content}"/>
                            <!-- 垂直滚动条 -->
                            <ScrollBar x:Name="PART_VerticalScrollBar"
                                       Grid.Row="1"
                                       Grid.Column="2"
                                       Maximum="{TemplateBinding ScrollableHeight}"
                                       Orientation="Vertical"
                                       Visibility="{TemplateBinding ComputedVerticalScrollBarVisibility}"
                                       Value="{Binding VerticalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                       ViewportSize="{TemplateBinding ViewportHeight}"/>
                            <!-- 水平滚动条 -->
                            <ScrollBar x:Name="PART_HorizontalScrollBar"
                                       Grid.Row="2"
                                       Grid.Column="1"
                                       Maximum="{TemplateBinding ScrollableWidth}"
                                       Orientation="Horizontal"
                                       Visibility="{TemplateBinding ComputedHorizontalScrollBarVisibility}"
                                       Value="{Binding HorizontalOffset, Mode=OneWay, RelativeSource={RelativeSource TemplatedParent}}"
                                       ViewportSize="{TemplateBinding ViewportWidth}"/>
                        </Grid>
                    </ControlTemplate>
                </ScrollViewer.Template>
                <ItemsPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
            </ScrollViewer>
        </Border>
    </ControlTemplate>
</DataGrid.Template>

补充说明 #

• 优先使用方法1，更简洁且不会破坏原有模板结构
• 确认HeadersVisibility属性已设为Column（你当前代码已设置），避免显示行标题或其他额外表头

内容的提问来源于stack exchange，提问作者fkitsantas