WPF 中动画背后代码的替代方法

Question

我有一个非常简单的操作——每当用户将鼠标悬停在一个矩形上时，它应该改变其他矩形的颜色。 这是现在的做法：

<Rectangle Panel.ZIndex="3" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top" MouseEnter="Rectangle_MouseEnter" MouseLeave="Rectangle_MouseLeave">
    <Rectangle.Fill>
        <ImageBrush ImageSource="/Images/close.ico"/>
    </Rectangle.Fill>
</Rectangle>

<Rectangle Panel.ZIndex="2" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top" Name="ExitSquare">
    <Rectangle.Fill>
        <SolidColorBrush Color="#f9b129"/>
    </Rectangle.Fill>
</Rectangle>

---

private void Rectangle_MouseEnter(object sender, MouseEventArgs e)
{
    ExitSquare.Fill = new SolidColorBrush(Color.FromRgb(251, 200, 106));
}

private void Rectangle_MouseLeave(object sender, MouseEventArgs e)
{
    ExitSquare.Fill = new SolidColorBrush(Color.FromRgb(249, 177, 41));
}

我想知道 - 如果我打算使用 MVVM 模式，可能有更好的选择吗？ 尝试绑定 MouseEnter 和 MouseLeave 事件并让它们在我的 ViewModel 的私有成员上操作是否是一个好主意，该成员将绑定到矩形的颜色，或者只会使事情变得不必要地复杂？

Answer 1

为了使其成为 MVVM，您可以使用EventToCommand将两个 MouseEvents 绑定到您的ViewModel ，它是 Blend SDK 的一部分，通过此命名空间：

http://schemas.microsoft.com/expression/2010/interactivity

这里有一个 NuGet 包： https : //www.nuget.org/packages/Expression.Blend.Sdk/

关于如何使用它的示例：

<Rectangle Panel.ZIndex="3" Height="30" Width="30" HorizontalAlignment="Right" VerticalAlignment="Top">
    <Rectangle.Fill>
        <ImageBrush ImageSource="/Images/close.ico"/>
    </Rectangle.Fill>
     <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>

真正的问题是，你为什么希望这是MVVM ？ 这是您要进行单元测试的内容吗？ IMO，由于这仅需要处理美学，因此在代码隐藏中执行此操作完全没问题，因为它不处理任何数据、计算、状态等。

Answer 2

您既不需要视图模型，也不需要隐藏代码中的任何事件处理程序。

在另一个 Rectangle 的 IsMouseOver 属性上带有 DataTrigger 的 Style 就足够了：

<Rectangle x:Name="ImageRect" ...>
    <Rectangle.Fill>
        <ImageBrush ImageSource="/Images/close.ico"/>
    </Rectangle.Fill>
</Rectangle>
<Rectangle ...>
    <Rectangle.Style>
        <Style TargetType="Rectangle">
            <Setter Property="Fill" Value="#f9b129"/>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsMouseOver, ElementName=ImageRect}"
                             Value="True">
                    <Setter Property="Fill" Value="#fbc86A"/>
                </DataTrigger>
            </Style.Triggers>                    
        </Style>
    </Rectangle.Style>
</Rectangle>

Answer 3

此样式设置为可用于您的应用程序。

<Button>
    <Button.Style>
        <Style TargetType="{x:Type Button}">
            <Style.Setters>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type Button}">
                            <Border Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
                                <ContentPresenter />
                            </Border>
                            <ControlTemplate.Triggers>
                                <Trigger Property="IsMouseOver" Value="True">
                                    <Trigger.Setters>
                                        <Setter Property="Background" Value="Black" />
                                    </Trigger.Setters>
                                </Trigger>
                                <Trigger Property="IsMouseOver" Value="False">
                                    <Trigger.Setters>
                                        <Setter Property="Background">
                                            <Setter.Value>
                                                <ImageBrush ImageSource="/Images/close.ico"/>
                                            </Setter.Value>
                                        </Setter>
                                    </Trigger.Setters>
                                </Trigger>
                            </ControlTemplate.Triggers>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style.Setters>
        </Style>
    </Button.Style>
</Button>