C# WPF - DataGrid 中的背景颜色

Question

我是 WPF 的新手，我尝试使用自动生成的列创建 DataGrid。 现在我根据需要对 DataGrid 进行了风格化，但是当 DG 小于 ParentContent 时会出现问题，它看起来像这样。

我不喜欢 DG 右侧那个白条的样子，但我不知道如何更改它的颜色。我希望它看起来像在 DataGridView 中。

我的问题是，如何更改网格那部分的颜色？

网格代码

<DataGrid x:Class="Project.WPF.Grid"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
      xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
      xmlns:local="clr-namespace:Project.WPF"
      mc:Ignorable="d" 
      d:DesignHeight="50" d:DesignWidth="200"
      Name="dgv_grid"
      Height="Auto" Width="Auto"
      AutoGenerateColumns="True" 
      SelectionMode="Single"
      ItemsSource="{Binding}" 
      DataContext="{Binding}"
      Background="#ABABAB" 
      SelectionUnit="FullRow"
      CanUserAddRows="False"
      CanUserReorderColumns="False"
      CanUserResizeColumns="True"
      CanUserResizeRows="False"
      IsReadOnly="True"
      GridLinesVisibility="None"
      HorizontalGridLinesBrush="#A0A0A0"
      VerticalGridLinesBrush="#A0A0A0"
      BorderThickness="1"
      BorderBrush="#636363"
      EnableColumnVirtualization="True"
      RowHeaderWidth="0"
      ColumnWidth="Auto"
      Loaded="dgv_grid_Loaded" 
      AutoGeneratedColumns="dgv_grid_AutoGeneratedColumns"
      AutoGeneratingColumn="dgv_grid_AutoGeneratingColumn"
      MouseDoubleClick="dgv_grid_MouseDoubleClick"
      SelectedCellsChanged="dgv_grid_SelectedCellsChanged">

<DataGrid.ColumnHeaderStyle>
    <Style TargetType="{x:Type DataGridColumnHeader}">
        <!--#region Triggers-->
        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="#A0A0A0"/>
                <Setter Property="BorderThickness" Value="1,1,1,1"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="BorderBrush" Value="#A0A0A0"/>
                <Setter Property="BorderThickness" Value="1,1,1,1"/>
                <Setter Property="Background" Value="#FFB6B6B6"/>
            </Trigger>
        </Style.Triggers>
        <!--#endregion-->
        <!--#region Setters-->
        <!--<Setter Property="Height" Value="Auto"/>-->
        <Setter Property="FontFamily" Value="Myanmar Text"/>
        <Setter Property="FontSize" Value="12"/>
        <Setter Property="FontWeight" Value="SemiBold"/>
        <Setter Property="Background" Value="#ffffff"/>
        <Setter Property="BorderThickness" Value="1,1,0,1"/>
        <Setter Property="Padding" Value="7,5,5,0"/>
        <Setter Property="BorderBrush" Value="#e5e5e5"/>
        <Setter Property="TextBlock.TextAlignment" Value="Left"/>
        <Setter Property="VerticalAlignment" Value="Stretch"/>
        <Setter Property="TextBlock.TextWrapping" Value="WrapWithOverflow"/>
        <!--#endregion-->
    </Style>
</DataGrid.ColumnHeaderStyle>

<DataGrid.RowHeaderStyle>
    <Style TargetType="{x:Type DataGridRowHeader}">

        <Style.Triggers>
            <Trigger Property="IsMouseOver" Value="True">
                <Setter Property="BorderBrush" Value="#A0A0A0"/>
                <Setter Property="BorderThickness" Value="1,1,1,1"/>
            </Trigger>
            <Trigger Property="IsPressed" Value="True">
                <Setter Property="BorderBrush" Value="#A0A0A0"/>
                <Setter Property="BorderThickness" Value="1,1,1,1"/>
                <Setter Property="Background" Value="#FFB6B6B6"/>
            </Trigger>
        </Style.Triggers>

        <Setter Property="Background" Value="#ffffff"/>
        <Setter Property="BorderBrush" Value="#e5e5e5"/>
        <Setter Property="BorderThickness" Value="1,1,1,0"/>
        <Setter Property="Width" Value="33"/>
        <Setter Property="Height" Value="20"/>
    </Style>
</DataGrid.RowHeaderStyle>

<DataGrid.CellStyle>
    <Style TargetType="{x:Type DataGridCell}">
        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="#FF7B7E99"/>
                <Setter Property="BorderThickness" Value="0"/>
            </Trigger>
            <Trigger Property="IsKeyboardFocusWithin" Value="True">
                <Setter Property="Background" Value="#FF4DA2D8"/>
                <Setter Property="BorderThickness" Value="0"/>
            </Trigger>
            <Trigger Property="IsEnabled" Value="False">
                <Setter Property="Background" Value="#ABABAB"/>
            </Trigger>
        </Style.Triggers>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <Grid Background="{TemplateBinding Background}">
                        <Border BorderBrush="#a0a0a0" BorderThickness="1,1,0,0"/>
                        <ContentPresenter VerticalAlignment="Center" HorizontalAlignment="Center" Margin="6,2,6,2"/>
                        <ContentControl FontFamily="Myanmar Text" FontSize="20"/>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</DataGrid.CellStyle>

Answer 1

如果您阅读 MSDN 的 DataGrid 的 ControlTemplate：

DataGrid Styles and Templates

您会看到大量的代码。 我不知道您是否熟悉 ControlTemplates。但在此代码后面的 ScrollViewer 上有一个 ColumnDefinition ： （我的意思是在 MSDN 中）

<ScrollViewer x:Name="DG_ScrollViewer" Focusable="false" Background="Black">
     <ScrollViewer.Template>
            <ControlTemplate TargetType="{x:Type ScrollViewer}">
                 <Grid>
                     <Grid.ColumnDefinitions>
                     <ColumnDefinition Width="Auto" />
                     <ColumnDefinition Width="*" />
                     <ColumnDefinition Width="Auto" />

您可以看到这个定义将填充父容器。因为中间列的宽度是*，它将填满整个父级。

我不知道如何摆脱 WPF 默认值中的这一列。但是如果你有时间来设计你的 DataGrid。您可以更改 MSDN 的 ControlTemplate 并删除此行：

 <ColumnDefinition Width="*" />

这样你就会得到 DataGridView 给你的东西。

Answer 2

如果您不希望DataGrid 水平拉伸，可以将其HorizontalAlignment 属性设置为Left：

<DataGrid x:Class="Project.WPF.Grid" ... HorizontalAlignment="Left" />

如果你想改变空白部分的背景，你可以把DataGrid放在Grid中，并设置这个Background属性：´

<Grid Background="Gray">
    <DataGrid ... HorizontalAlignment="Left" />
</Grid>