WPF Material Design中DataGrid单元格内容填满单元格的设置方法

核心原因 #

MaterialDesign 主题默认给 DataGridCell 设置了较大的内边距，同时单元格内容默认未开启拉伸对齐，才会出现内容缩在中间、点空白区域无法触发编辑的问题。按以下两步配置即可解决： #

步骤1：重写单元格全局样式 #

直接在你的DataGrid下添加单元格样式，强制内容拉伸、缩小内边距，所有列通用：

<DataGrid Name="gridComponents" AutoGenerateColumns="False" CanUserAddRows="False" CanUserDeleteRows="False" ItemsSource="{Binding Path=MassBalance.DefinedComponents}">
    <!-- 新增以下单元格样式配置 -->
    <DataGrid.CellStyle>
        <Style TargetType="DataGridCell" BasedOn="{StaticResource MaterialDesignDataGridCell}">
            <!-- 自定义极小内边距，数值可以按需调整，2,0对应左右2px、上下0px -->
            <Setter Property="Padding" Value="2,0"/>
            <!-- 强制单元格内容横向、纵向拉伸填满 -->
            <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
            <Setter Property="VerticalContentAlignment" Value="Stretch"/>
            <!-- 移除单元格默认边框避免额外占位 -->
            <Setter Property="BorderThickness" Value="0"/>
        </Style>
    </DataGrid.CellStyle>

    <DataGrid.Columns>
        <DataGridTextColumn Binding="{Binding Path=ComponentName}" Header="Component Name" IsReadOnly="True" />
        <DataGridTextColumn Binding="{Binding Path=Formula}" Header="Formula" />
        <DataGridComboBoxColumn ItemsSource="{Binding Source={StaticResource phaseEnum}}" SelectedItemBinding="{Binding Path=ComponentPhase}" Header="Phase" />
        <DataGridTextColumn Binding="{Binding Path=Density}" Header="Density" />
        <DataGridTextColumn Binding="{Binding Path=MolecularWeight}" Header="Molecular Weight" IsReadOnly="True" />
    </DataGrid.Columns>
</DataGrid>

步骤2：单独修正下拉框列的边距问题 #

DataGridComboBoxColumn 的编辑控件自带默认边距，需要单独给列指定编辑样式，保证下拉框也能填满单元格：

<!-- 替换原有的Phase列定义 -->
<DataGridComboBoxColumn ItemsSource="{Binding Source={StaticResource phaseEnum}}" SelectedItemBinding="{Binding Path=ComponentPhase}" Header="Phase">
    <DataGridComboBoxColumn.EditingElementStyle>
        <Style TargetType="ComboBox" BasedOn="{StaticResource MaterialDesignComboBox}">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Margin" Value="0"/>
            <Setter Property="Padding" Value="2,0"/>
        </Style>
    </DataGridComboBoxColumn.EditingElementStyle>
</DataGridComboBoxColumn>

可选优化：点击单元格任意区域直接进入编辑 #

如果配置完拉伸后，点击非控件区域还是无法触发编辑，加个简单的鼠标点击事件即可，不需要精准点到内部控件：
首先给DataGrid绑定事件：

<DataGrid 
    <!-- 其他原有属性保留 -->
    MouseLeftButtonDown="DataGrid_MouseLeftButtonDown">

然后在后台cs文件加对应事件逻辑：

private void DataGrid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    if (e.OriginalSource is not DataGridCell cell || cell.IsReadOnly || cell.IsEditing) 
        return;
    
    cell.Focus();
    gridComponents.BeginEdit();
}

配置完成后单元格内容会完全填充，仅保留你设置的极小内边距，点击单元格任意位置都能直接进入编辑状态，视觉和交互体验和原生控件一致。

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