如何修改WPF中展开DataGrid行详情时行标题下方及最左侧继承父行颜色区域的颜色？

嘿，搞定这两个WPF DataGrid行详情的样式定制问题其实不难，我给你拆解成两个具体方案，直接就能用：

这个区域其实是行展开后，RowHeader延伸到行详情高度的部分。我们可以通过重写DataGridRowHeader的样式来定制它的背景色：

<Style x:Key="CustomRowHeaderStyle" TargetType="{x:Type DataGridRowHeader}">
    <!-- 设置默认背景色 -->
    <Setter Property="Background" Value="#FFE0F7FA"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridRowHeader}">
                <Border Background="{TemplateBinding Background}" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}">
                    <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
                        <!-- 保留默认的展开/折叠按钮 -->
                        <ToggleButton x:Name="Expander" 
                                      Margin="0,0,4,0" 
                                      IsChecked="{Binding IsExpanded, RelativeSource={RelativeSource AncestorType={x:Type DataGridRow}}}" />
                        <ContentPresenter RecognizesAccessKey="True" />
                    </StackPanel>
                </Border>
                <!-- 可选：添加鼠标悬停、按下等状态的样式 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Background" Value="#FFB3E5FC"/>
                    </Trigger>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter Property="Background" Value="#FF81D4FA"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

把这个样式绑定到DataGrid的RowHeaderStyle属性上即可生效：

<DataGrid RowHeaderStyle="{StaticResource CustomRowHeaderStyle}">
    <!-- 你的DataGrid列、数据源配置等 -->
</DataGrid>

这个区域是默认RowDetailsPresenter左侧的空白缩进，它会继承DataGridRow的背景色。有两种简单的解决方式：

方式1：直接修改RowDetailsTemplate的容器 #

如果你不想重写整个行模板，这是最快捷的方法。在你的RowDetailsTemplate里给最外层容器设置背景色，并用负Margin抵消默认的左侧缩进：

<DataGrid.RowDetailsTemplate>
    <DataTemplate>
        <!-- 用负Margin覆盖默认左侧空白，同时设置背景色 -->
        <Grid Background="#FFE8F5E9" Margin="-1,0,0,0">
            <!-- 这里放你的行详情内容 -->
            <StackPanel Margin="10">
                <TextBlock Text="行详情内容1"/>
                <TextBlock Text="行详情内容2"/>
            </StackPanel>
        </Grid>
    </DataTemplate>
</DataGrid.RowDetailsTemplate>

方式2：重写DataGridRow模板（更彻底的定制） #

如果需要更全局的样式控制，可以重写DataGridRow的模板，直接修改DataGridDetailsPresenter的属性：

<Style x:Key="CustomDataGridRowStyle" TargetType="{x:Type DataGridRow}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type DataGridRow}">
                <Border x:Name="RowBorder" 
                        BorderBrush="{TemplateBinding BorderBrush}" 
                        BorderThickness="{TemplateBinding BorderThickness}" 
                        Background="{TemplateBinding Background}" 
                        SnapsToDevicePixels="True">
                    <SelectiveScrollingGrid>
                        <SelectiveScrollingGrid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </SelectiveScrollingGrid.ColumnDefinitions>
                        <SelectiveScrollingGrid.RowDefinitions>
                            <RowDefinition Height="*"/>
                            <RowDefinition Height="Auto"/>
                        </SelectiveScrollingGrid.RowDefinitions>
                        <!-- 行标题 -->
                        <DataGridRowHeader x:Name="RowHeader" 
                                           SelectiveScrollingGrid.SelectiveScrollingOrientation="Vertical" 
                                           Visibility="{Binding HeadersVisibility, ConverterParameter={x:Static DataGridHeadersVisibility.Row}, Converter={x:Static DataGrid.HeadersVisibilityConverter}, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}}" />
                        <!-- 行单元格内容 -->
                        <DataGridCellsPresenter x:Name="CellsPresenter" 
                                               Grid.Column="1" 
                                               ItemsPanel="{TemplateBinding ItemsPanel}" 
                                               SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                        <!-- 修改行详情的背景和边距 -->
                        <DataGridDetailsPresenter x:Name="DetailsPresenter" 
                                                 Grid.Column="1" 
                                                 Grid.Row="1" 
                                                 Background="#FFE8F5E9" 
                                                 Margin="0" 
                                                 SelectiveScrollingGrid.SelectiveScrollingOrientation="Both" 
                                                 Visibility="{TemplateBinding DetailsVisibility}" />
                    </SelectiveScrollingGrid>
                </Border>
                <!-- 保留默认的选中、禁用等状态触发器 -->
                <ControlTemplate.Triggers>
                    <Trigger Property="IsSelected" Value="True">
                        <Setter Property="Background" TargetName="RowBorder" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

然后把这个样式应用到DataGrid的RowStyle上：

<DataGrid RowStyle="{StaticResource CustomDataGridRowStyle}">
    <!-- 你的DataGrid配置 -->
</DataGrid>

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