如何实现仅在鼠标悬停DataGrid行时显示按钮？

这个需求很常见，咱们借助WPF的**触发器（Trigger）**就能轻松搞定，核心思路就是监听DataGrid行的IsMouseOver状态，动态切换按钮的可见性。下面是基于你提供的代码修改后的完整方案：

基础实现方案 #

直接修改你的Button样式，添加一个绑定到父级DataGridRow的IsMouseOver属性的数据触发器：

<DataGrid.Columns>
    <!-- 其他列... -->
    <DataGridTemplateColumn>
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Button 
                    Style="{StaticResource MaterialDesignIconButton}" 
                    ToolTip="Delete"
                    Visibility="Collapsed"> <!-- 默认隐藏按钮 -->
                    <materialDesign:PackIcon Kind="DeleteOutline" />
                    <Button.Style>
                        <Style BasedOn="{StaticResource MaterialDesignIconButton}" TargetType="Button">
                            <Style.Triggers>
                                <!-- 监听所在DataGridRow的IsMouseOver状态 -->
                                <DataTrigger 
                                    Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=DataGridRow}}"
                                    Value="True">
                                    <Setter Property="Visibility" Value="Visible" />
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
</DataGrid.Columns>

原理说明 #

• 默认把按钮的Visibility设为Collapsed（完全隐藏，不占用布局空间）
• 通过RelativeSource向上查找父级的DataGridRow，绑定它的IsMouseOver属性
• 当鼠标悬停到行上时，触发器触发，把按钮的Visibility改为Visible，完美复刻Windows Mail的效果

进阶：添加平滑过渡动画 #

如果想让按钮的显示/隐藏更丝滑，可以加上淡入淡出的动画，提升用户体验：

<DataGrid.Columns>
    <!-- 其他列... -->
    <DataGridTemplateColumn>
        <DataGridTemplateColumn.CellTemplate>
            <DataTemplate>
                <Button 
                    Style="{StaticResource MaterialDesignIconButton}" 
                    ToolTip="Delete"
                    Opacity="0"> <!-- 默认完全透明 -->
                    <materialDesign:PackIcon Kind="DeleteOutline" />
                    <Button.Style>
                        <Style BasedOn="{StaticResource MaterialDesignIconButton}" TargetType="Button">
                            <Style.Triggers>
                                <DataTrigger 
                                    Binding="{Binding IsMouseOver, RelativeSource={RelativeSource AncestorType=DataGridRow}}"
                                    Value="True">
                                    <DataTrigger.EnterActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <!-- 0.2秒内淡入 -->
                                                <DoubleAnimation 
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="1"
                                                    Duration="0:0:0.2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.EnterActions>
                                    <DataTrigger.ExitActions>
                                        <BeginStoryboard>
                                            <Storyboard>
                                                <!-- 0.2秒内淡出 -->
                                                <DoubleAnimation 
                                                    Storyboard.TargetProperty="Opacity"
                                                    To="0"
                                                    Duration="0:0:0.2" />
                                            </Storyboard>
                                        </BeginStoryboard>
                                    </DataTrigger.ExitActions>
                                </DataTrigger>
                            </Style.Triggers>
                        </Style>
                    </Button.Style>
                </Button>
            </DataTemplate>
        </DataGridTemplateColumn.CellTemplate>
    </DataGridTemplateColumn>
</DataGrid.Columns>

这个方案用Opacity代替Visibility，配合动画实现平滑过渡，视觉效果会更自然。

注意事项 #

• 确保你的RelativeSource路径正确，如果按钮所在的模板结构特殊，可能需要调整AncestorType或者AncestorLevel
• 如果使用MaterialDesign的样式，记得在自定义Style里通过BasedOn继承原有的MaterialDesignIconButton样式，避免丢失原有按钮的样式效果

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