如何修复DataGrid滚动条与ColumnHeader相交的空白点？

Question

我正在使用 WPF

DataGrid

显示一些数据，当我有足够的行时，会出现滚动条。在滚动条的顶部，与

DataGrid

ColumnHeader

相交的地方有一个空白方块，我想用理想的

ColumnHeader

或其他看起来更令人愉悦的东西来填充。

我怎样才能实现这个目标？

以下是我正在使用的代码。

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="100"/>
        <RowDefinition />
        <RowDefinition Height="150"/>
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="1" Orientation="Horizontal">
        <DataGrid x:Name="DataGrid"
                  ItemsSource="{Binding ProfilesDataGrid}"
                  Style="{StaticResource DataGrid_Style}"
                  CellStyle="{StaticResource DataGridCell_Style}"
                  RowStyle="{StaticResource DataGridRow_Style}"
                  RowHeaderStyle="{StaticResource DataGridRowHeader_Style}"
                  ColumnHeaderStyle="{StaticResource DataGridColHeader_Style}">

            <!-- Data Grid Columns -->
            <DataGrid.Columns>
                <DataGridTextColumn Header="Status" 
                                    Binding = "{Binding ProfileStatus}"
                                    Width="50"
                                    ElementStyle="{StaticResource DataGridCellCenter_Style}"/>
                <DataGridTextColumn Header="Profile" 
                                    Binding = "{Binding ProfileName}"
                                    MinWidth="125"/>
                <DataGridTextColumn Header="Email" 
                                    Binding = "{Binding ProfileEmail}"
                                    Width="*"/>
                <DataGridTemplateColumn Header=""
                                        Width="60">
                    <DataGridTemplateColumn.CellTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <Button x:Name="EditProfileButton"
                                        BorderThickness="0"
                                        Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                                    <Image Source="../Resources/Images/icon_edit.png"/>
                                </Button>
                                <Button x:Name="DeleteProfileButton"
                                        BorderThickness="0"
                                        Style="{StaticResource {x:Static ToolBar.ButtonStyleKey}}">
                                    <Image Source="../Resources/Images/icon_delete.png"/>
                                </Button>
                            </StackPanel>
                        </DataTemplate>
                    </DataGridTemplateColumn.CellTemplate>
                </DataGridTemplateColumn>
            </DataGrid.Columns>
        </DataGrid>
    </StackPanel>
</Grid>

我已经看到另一篇文章用

ScrollContentPresenter

解决了这个问题，但我不能使用它，因为我使用的是ItemSource（如果你知道这是为什么，我也很高兴知道这一点！）。

如果相关的话，这也是我的造型。

<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <!-- Data Grid -->
    <Style x:Key="DataGrid_Style" TargetType="{x:Type DataGrid}">
        <Setter Property="Foreground" Value="WhiteSmoke"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="HorizontalAlignment" Value="Left"/>
        <Setter Property="AutoGenerateColumns" Value="False"/>
        <Setter Property="CanUserReorderColumns" Value="False"/>
        <Setter Property="CanUserResizeColumns" Value="False"/>
        <Setter Property="CanUserResizeRows" Value="False"/>
        <Setter Property="CanUserAddRows" Value="False"/>
        <Setter Property="CanUserDeleteRows" Value="False"/>
        <Setter Property="IsReadOnly" Value="True"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Width" Value="500"/>
        <Setter Property="Margin" Value="50 20"/>
        <Setter Property="BorderBrush" Value="#343b48"/>
        <Setter Property="FontSize" Value="14"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="GridLinesVisibility" Value="All"/>
        <Setter Property="SelectionMode" Value="Single"/>
        <Setter Property="SelectionUnit" Value="FullRow"/>
        <Setter Property="HorizontalGridLinesBrush" Value="#2c313c"/>
        <Setter Property="VerticalGridLinesBrush" Value="#2c313c"/>
    </Style>

    <!-- Cell -->
    <Style x:Key="DataGridCell_Style" TargetType="{x:Type DataGridCell}">
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    </Style>

    <!-- Row -->
    <Style x:Key="DataGridRow_Style" TargetType="{x:Type DataGridRow}">
        <Setter Property="Background" Value="#343b48"/>
        <Setter Property="Height" Value="25" />
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="Background" Value="#839096"/>
                <Setter Property="Foreground" Value="Black"/>
            </Trigger>
        </Style.Triggers>
    </Style>

    <!-- Row Header -->
    <Style x:Key="DataGridRowHeader_Style" TargetType="{x:Type DataGridRowHeader}">
        <Setter Property="Width" Value="0"/>
    </Style>

    <!-- Column Header -->
    <Style x:Key="DataGridColHeader_Style" TargetType="{x:Type DataGridColumnHeader}">
        <Setter Property="Background" Value="#1a95d4"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
        <Setter Property="Height" Value="25"/>
    </Style>
    
    <!-- Cell Centered -->
    <Style x:Key="DataGridCellCenter_Style" TargetType="{x:Type TextBlock}">
        <Setter Property="HorizontalAlignment" Value="Center"/>
    </Style>
</ResourceDictionary>

Answer 1

您可以将

Background

本身的

DataGrid

设置为与

Brush

使用的相同

DataGridColumnHeader

：

<Style x:Key="DataGrid_Style" TargetType="{x:Type DataGrid}">
    <Setter Property="Foreground" Value="WhiteSmoke"/>
    <Setter Property="Background" Value="#1a95d4"/>
    ...