WPF代码后置动画替代方案：MVVM模式下鼠标悬停矩形变色实现咨询

好问题！在WPF的MVVM模式下，确实有更优雅的方案来实现这个交互，而且完全可以避免代码后置的耦合性。咱们一步步拆解来看：

核心思路是让UI事件触发ViewModel中的状态变更，再通过数据绑定将状态同步到目标矩形的颜色属性，完全避免直接操作UI元素。这里有两种常用的优雅方案：

1. 使用行为（Behaviors）绑定事件到ViewModel命令 #

这是最符合MVVM原则的方式之一，推荐使用Microsoft.Xaml.Behaviors.Wpf包（可通过NuGet安装）。步骤如下：

• 在ViewModel中定义两个ICommand（比如MouseEnterCommand和MouseLeaveCommand），以及一个公开的Brush属性（比如TargetRectangleBrush），用于绑定目标矩形的Fill属性。
• 在XAML中，给触发悬停的矩形添加行为，将MouseEnter和MouseLeave事件分别绑定到ViewModel的对应命令。
• 命令执行时，修改TargetRectangleBrush的值（比如从默认色改为高亮色），目标矩形会自动通过绑定更新颜色。

代码示例 #

ViewModel部分

public class MainViewModel : INotifyPropertyChanged
{
    private Brush _targetRectangleBrush = Brushes.Gray;
    public Brush TargetRectangleBrush
    {
        get => _targetRectangleBrush;
        set
        {
            _targetRectangleBrush = value;
            OnPropertyChanged();
        }
    }

    public ICommand MouseEnterCommand { get; }
    public ICommand MouseLeaveCommand { get; }

    public MainViewModel()
    {
        MouseEnterCommand = new RelayCommand(() => TargetRectangleBrush = Brushes.Blue);
        MouseLeaveCommand = new RelayCommand(() => TargetRectangleBrush = Brushes.Gray);
    }

    // 实现INotifyPropertyChanged接口
    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

XAML部分

xmlns:i="http://schemas.microsoft.com/xaml/behaviors"

<!-- 触发悬停的矩形 -->
<Rectangle Width="100" Height="100" Fill="LightGray">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <i:InvokeCommandAction Command="{Binding MouseEnterCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeave">
            <i:InvokeCommandAction Command="{Binding MouseLeaveCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Rectangle>

<!-- 目标矩形 -->
<Rectangle Width="100" Height="100" Fill="{Binding TargetRectangleBrush}" />

2. 使用状态属性+DataTrigger #

如果希望ViewModel只维护状态（不直接持有颜色值），可以定义一个bool类型的IsHovering属性，然后在XAML中用DataTrigger根据这个状态切换目标矩形的颜色：

代码示例 #

ViewModel部分

public class MainViewModel : INotifyPropertyChanged
{
    private bool _isHovering;
    public bool IsHovering
    {
        get => _isHovering;
        set
        {
            _isHovering = value;
            OnPropertyChanged();
        }
    }

    public ICommand MouseEnterCommand { get; }
    public ICommand MouseLeaveCommand { get; }

    public MainViewModel()
    {
        MouseEnterCommand = new RelayCommand(() => IsHovering = true);
        MouseLeaveCommand = new RelayCommand(() => IsHovering = false);
    }

    // 实现INotifyPropertyChanged接口...
}

XAML部分

<!-- 触发悬停的矩形 -->
<Rectangle Width="100" Height="100" Fill="LightGray">
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="MouseEnter">
            <i:InvokeCommandAction Command="{Binding MouseEnterCommand}" />
        </i:EventTrigger>
        <i:EventTrigger EventName="MouseLeave">
            <i:InvokeCommandAction Command="{Binding MouseLeaveCommand}" />
        </i:EventTrigger>
    </i:Interaction.Triggers>
</Rectangle>

<!-- 目标矩形 -->
<Rectangle Width="100" Height="100">
    <Rectangle.Style>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="Gray" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsHovering}" Value="True">
                    <Setter Property="Fill" Value="Blue" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Rectangle.Style>
</Rectangle>

关于事件绑定到ViewModel成员的合理性 #

先纠正一个小误区：ViewModel中用于绑定的属性必须是公开的，私有成员无法被XAML绑定。如果你的意思是将MouseEnter/MouseLeave事件通过命令绑定到ViewModel的方法（或命令逻辑），这完全合理，而且是MVVM模式下的标准做法：

• 这种方式将UI交互逻辑从代码后置（View）转移到ViewModel，实现了UI和业务逻辑的分离，便于单元测试（比如可以单独测试命令执行时状态是否正确变更）。
• 只要命令逻辑简单（比如只是切换状态或颜色），并不会徒增复杂度，反而让代码结构更清晰，后续如果需要修改交互逻辑（比如改变高亮色、添加额外逻辑），只需要修改ViewModel即可，不需要改动XAML或代码后置。

如果直接在代码后置中操作UI元素，虽然简单，但会导致View和UI逻辑耦合，当项目规模变大时，维护成本会显著上升。而MVVM的方案虽然初期多写一点代码，但长期来看更易维护和扩展。

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