WPF DataGridTemplateColumn单元格点击事件仅图标触发的问题排查与解决

问题场景 #

在WPF的DataGrid中，配置了多列TextColumn和一列TemplateColumn：

• TextColumn使用BasicCell样式，点击单元格任意区域均可正常触发点击事件
• TemplateColumn使用TemplateColumnCell样式，单元格内包含MaterialDesign的PackIcon，但仅点击图标时才会触发PreviewMouseLeftButtonDown事件，点击单元格空白区域无响应

模板列代码 #

<DataGridTemplateColumn Header="Edit"  Width="0.5*" CellStyle="{StaticResource TemplateColumnCell}">
     <DataGridTemplateColumn.CellTemplate>
          <DataTemplate>
              <materialDesign:PackIcon Kind="Edit" Width="15" HorizontalAlignment="Stretch"/>
           </DataTemplate>
     </DataGridTemplateColumn.CellTemplate>
</DataGridTemplateColumn>

模板列单元格样式代码 #

<Style x:Key="TemplateColumnCell"
           TargetType="{x:Type DataGridCell}">

        <Style.Triggers>
            <Trigger Property="IsSelected" Value="True">
                <Setter Property="Background" Value="Gainsboro"/>
                <Setter Property="Foreground" Value="Black"/>
                <Setter Property="BorderThickness" Value="0"/>
            </Trigger>

            <DataTrigger Binding="{Binding IsEnabled}" Value="False">
                <Setter Property="IsEnabled" Value="True"/>
                <Setter Property="Foreground" Value="LightSlateGray"/>
            </DataTrigger>
        </Style.Triggers>
        
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type DataGridCell}">
                    <Border Padding="{TemplateBinding Padding}" SnapsToDevicePixels="True">
                        <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        
        <EventSetter Event="PreviewMouseLeftButtonDown" 
                     Handler="myTemplateCell_PreviewMouseDown"/>
    </Style>

原因分析 #

问题核心在于单元格模板中的Border未设置背景。WPF中，元素默认Background为null，而非Transparent，此时空白区域无法捕获鼠标事件，点击时事件会直接穿透到单元格下方的元素；只有点击有实际渲染内容的区域（如PackIcon）时，事件才会向上冒泡触发DataGridCell的事件。

解决方案 #

方案一：修改单元格模板的Border背景 #

在TemplateColumnCell样式的ControlTemplate中，给Border添加Background绑定，继承DataGridCell的背景属性：

<Border Padding="{TemplateBinding Padding}" 
        SnapsToDevicePixels="True"
        Background="{TemplateBinding Background}">
    <ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>

若需要固定透明背景，也可直接设置为Background="Transparent"，这样单元格整个区域都会捕获鼠标事件。

方案二：修改CellTemplate的根元素布局 #

在CellTemplate中添加一个占满单元格的Grid容器，设置透明背景，将图标居中放置：

<DataGridTemplateColumn.CellTemplate>
    <DataTemplate>
        <Grid Background="Transparent" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
            <materialDesign:PackIcon Kind="Edit" Width="15" HorizontalAlignment="Center" VerticalAlignment="Center"/>
        </Grid>
    </DataTemplate>
</DataGridTemplateColumn.CellTemplate>

通过Grid覆盖整个单元格区域，确保任何位置的点击都能触发事件，同时保持图标显示位置不受影响。

内容的提问来源于stack exchange，提问作者nb-1999