WPF MVVM中UserControl内IsMouseOver绑定ViewModel的实现问题

嘿，刚接触WPF和MVVM遇到这种样式优先级的问题太正常了，我来帮你拆解下整个问题的原因和你最终解决方案的妙处：

问题回顾 #

你在做自定义菜单控件，需要实现选中/鼠标悬停切换PNG图片的功能：

• 选中状态正常工作，但鼠标悬停一开始完全没效果
• 第一次尝试绑定IsMouseOver到ViewModel的IsHovered属性，结果因为IsMouseOver是只读属性编译失败
• 第二次直接在Style Trigger里设置Source为DisplayHoverImage，代码能编译但悬停时图片不切换
• 最后把Source的默认绑定移到Style的Setter里，问题解决！

为什么第一次尝试失败？ #

IsMouseOver是WPF控件的只读依赖属性，它的值只能由WPF内部根据鼠标状态更新，你不能通过Setter（不管是绑定还是硬编码）去修改它，所以这段代码必然编译报错：

<Trigger Property="IsMouseOver" Value="True">
    <Setter Property="IsMouseOver" Value="{Binding Path=IsHovered, Mode=OneWayToSource}"/>
</Trigger>

如果真的需要把鼠标悬停状态同步到ViewModel，推荐用Microsoft.Xaml.Behaviors.Wpf里的EventTrigger监听MouseEnter和MouseLeave事件，触发ViewModel的命令或更新属性，但这个场景其实完全不需要把状态传到ViewModel，直接在View层处理更高效。

为什么第二次尝试没生效？ #

WPF的依赖属性有严格的值优先级规则，其中：

直接在元素标签上设置的属性值 > Style Trigger里的Setter值 > Style里的默认Setter值

你第二次的代码里，直接在<Image>标签上绑定了Source：

<Image Source="{Binding DisplayImage}">
    <Image.Style>
        <Style TargetType="{x:Type Image}">
            <Style.Triggers>
                <Trigger Property="IsMouseOver" Value="True">
                    <Setter Property="Source" Value="{Binding DisplayHoverImage}"/>
                </Trigger>
            </Style.Triggers>
        </Style>
    </Image.Style>
</Image>

这就导致Trigger里的SourceSetter永远覆盖不了直接在Image上设置的Source值，所以鼠标悬停时图片不会切换。

最终解决方案的原理 #

你最后调整的代码把Source的默认绑定放到了Style的<Setter>里：

<Grid>
    <Image>
        <Image.InputBindings>
            <MouseBinding Gesture="LeftClick" Command="{Binding LeftClickCommand}"/>
        </Image.InputBindings>
        <Image.Style>
            <Style TargetType="{x:Type Image}">
                <Setter Property="Source" Value="{Binding DisplayImage}"/>
                <Style.Triggers>
                    <Trigger Property="IsMouseOver" Value="True">
                        <Setter Property="Source" Value="{Binding DisplayHoverImage}"/>
                    </Trigger>
                </Style.Triggers>
            </Style>
        </Image.Style>
    </Image>
</Grid>

这样一来，Style Trigger里的Setter优先级就高于Style的默认Setter，当IsMouseOver为True时，Trigger的Setter会替换掉默认的Source值，鼠标离开后又会自动恢复成DisplayImage，完美实现了悬停切换图片的需求！

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