使用 MVVM 使用 Storyboard 对其进行动画处理后设置属性答案

【问题标题】：Set a Property After Animating It with a Storyboard using MVVM使用 MVVM 使用 Storyboard 对其进行动画处理后设置属性
【发布时间】：2014-05-02 12:19:47
【问题描述】：

我正在使用<i:EventTrigger> 播放改变标签前景的故事板动画。（我需要使用这种类型的触发器，因为我使用它的 SourceObject 属性来绑定到数据上下文的事件。为了简单起见，我从示例中删除了绑定）。
当这个动画结束时，我想将标签改回原来的颜色（蓝色），但不是在代码隐藏中，因为我使用的是 MVVM。（我对 storyborad 的 Completed 事件很熟悉，但我不能使用它，因为它会破坏代码并破坏 MVVM 模式。）

这是我的代码：

<Window x:Class="WpfApplication12.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    Title="MainWindow" Height="350" Width="525">
<Grid>
    <Grid.Resources>
        <Storyboard x:Key="MySB" Storyboard.TargetProperty="Foreground">
            <DoubleAnimation Storyboard.TargetName="GradientStop2"
                            Storyboard.TargetProperty="Offset"
                            From="0.0" To="0.6" Duration="0:0:0.6" RepeatBehavior="0:0:3"
                            AutoReverse="True" />
            <DoubleAnimation Storyboard.TargetName="GradientStop3"
                            Storyboard.TargetProperty="Offset"
                            From="0.4" To="1" Duration="0:0:0.6" RepeatBehavior="0:0:3"
                            AutoReverse="True" />
        </Storyboard>
    </Grid.Resources>
    <Label x:Name="CollectionTabHeader" Foreground="Blue" Height="30" Width="80">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="MouseEnter">
                    <ei:ChangePropertyAction PropertyName="Foreground">
                        <ei:ChangePropertyAction.Value>
                            <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                                <GradientStop x:Name="GradientStop1" Color="Red" Offset="0.0" />
                                <GradientStop x:Name="GradientStop2" Color="White" Offset="0.2" />
                                <GradientStop x:Name="GradientStop3" Color="White" Offset="0.3" />
                                <GradientStop x:Name="GradientStop4" Color="Red" Offset="1.0" />
                            </LinearGradientBrush>
                        </ei:ChangePropertyAction.Value>
                    </ei:ChangePropertyAction>
                    <ei:ControlStoryboardAction Storyboard="{StaticResource MySB}"     
                                    ControlStoryboardOption="Play"/>
                </i:EventTrigger>
        </i:Interaction.Triggers>
        MyLabel
    </Label>
</Grid>

【问题讨论】：

标签： wpf mvvm

【解决方案1】：

首先，在使用 MVVM 时，使用后面的代码处理事件并没有错。其次，即使您真的不想在这些情况下使用后面的代码，您也可以通过实现附加属性以对 MVVM 友好的方式处理该事件。

与其在这个问题中再次解释整个情况，我更愿意建议您阅读我在 Stack Overflow 上对What's the best way to pass event to ViewModel? 问题的回答。它包含一个完整的代码示例，虽然它处理不同的事件，但差别不大……只需将 GetPreviewKeyDown 事件替换为您的 Completed 事件即可。

【讨论】：

谢谢，但您是否知道这是否只能由 xaml 处理？
据我所知，它不能……它不是RoutedEvent。

【解决方案2】：

用 MVVM 模式消除代码本身并不是目的——它只是副作用（虽然很好）。 Model-View-ViewModel 的目的是：消除应用程序逻辑和视图代码的混合——因此应用程序可以是可测试的（并且代码更可重用）。不影响应用程序逻辑/数据操作的代码隐藏视图相关代码没有任何问题。

【讨论】：