在 WPF 中使用数据绑定启动动画答案

【问题标题】：Using data binding to launch animations in WPF在 WPF 中使用数据绑定启动动画
【发布时间】：2010-09-22 03:53:38
【问题描述】：

我正在尝试调整一个简单的 WPF 应用程序以使用 Model-View-ViewModel 模式。在我的页面上，我有几个动画：

<Page.Resources>
    <Storyboard x:Name="storyboardRight"
                x:Key="storyboardRight">
        <DoubleAnimation x:Name="da3"
                         Storyboard.TargetName="labelRight"
                         Storyboard.TargetProperty="Opacity"
                         From="0"
                         To="1"
                         Duration="0:0:0.5" />
        <DoubleAnimation x:Name="da4"
                         Storyboard.TargetName="labelRight"
                         Storyboard.TargetProperty="Opacity"
                         From="1"
                         To="0"
                         BeginTime="0:0:1"
                         Duration="0:0:0.5" />
    </Storyboard>
    ...
</Page.Resources>

目前我在后面的代码中开始动画，并且可以通过以下代码监听 Completed 事件来做一些事情：

storyboardRight = (Storyboard)TryFindResource("storyboardRight");
storyboardRight.Completed += new EventHandler(storyboardRight_Completed);
storyboardRight.Begin(this);

有没有一种方法可以将故事板数据绑定到我的 ViewModel，以便它在 ViewModel 引发的事件上启动，并在完成后回调到该 ViewModel？

【问题讨论】：

标签： wpf data-binding animation mvvm

【解决方案1】：

我有机会向 Microsoft 的 Josh Twist 提出这个问题，他很乐意花时间提供这个问题的答案。解决方案是使用DataTrigger 结合ViewModel 中的枚举来启动Storyboard，而这又需要将页面放入ContentPresenter。为了处理动画完成，需要少量代码来调用 ViewModel 上的 ICommand。

阅读 Josh 的帖子 here 了解解决方案的完整说明。

【讨论】：

如果您使用 DataTemplate，此解决方案仅需要将页面放入 CpntentPresenter。如果您正在为控件的属性设置动画，则可以在控件自己的样式的触发器中使用它，而不是在 DataTemplate 的触发器中使用它。
Josh Twists 网站的链接已损坏。显然 Josh 的整个网站都坏了（没有加载博客文章），当我尝试给他发电子邮件时，它就被退回了。有人知道如何联系 Josh 并解决问题吗？
@SimonGillbee 我已经在推特上给他发了一条消息

【解决方案2】：

我通过使用 DataTrigger 并将其绑定到我的 ViewModel 中的属性来做到这一点。当“FlashingBackGround”属性设置为“ON”时，情节提要动画开始。

还要确保在您的项目中包含对“Microsoft.Expression.Interactions”的引用

XAML：（直接进入根节点）

<Window
   xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
   xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
   x:Name="window" >
    ...

    <i:Interaction.Triggers>
      <ei:DataTrigger Binding="{Binding FlashingBackground, Mode=OneWay}" Value="ON">
        <ei:ControlStoryboardAction Storyboard="{StaticResource MyAnimation}"     
                                                ControlStoryboardOption="Play"/>
      </ei:DataTrigger>
    </i:Interaction.Triggers>

    ...
</Window>

视图模型：

    private void TurnOnFlashingBackround()
    {
        this.FlashingBackground = "ON";
    }

    private string _FlashingBackround = "OFF";

    public string FlashingBackground
    {
        get { return this._FlashingBackround; }

        private set
        {
            if (this.FlashingBackground == value)
            {
                return;
            }

            this._FlashingBackround = value;
            this.OnPropertyChanged("FlashingBackground");
        }
    }

    public new event PropertyChangedEventHandler PropertyChanged;

    private void OnPropertyChanged(string propertyName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(
                this, 
                new PropertyChangedEventArgs(propertyName));
        }
    }

最后，Viewmodel 必须继承自“INotifyPropertyChanged”

【讨论】：

另请注意：您需要两个程序集引用：System.Windows.Interactivity 和上面提到的 Microsoft.Expression.Interactions。

【解决方案3】：

您需要使用EventTrigger。这个article about Animations in WPF 可能会有所帮助。另请参阅 MSDN 上的 Routed Events Overview 和 How to: Use Event Triggers to Control a Storyboard After It Starts。

【讨论】：

感谢指针，但 EventTrigger 的所有文档都显示它是由来自现有 FrameworkElement 的事件触发的。我现在正在从我的 ViewModel 触发一个 RoutedEvent，但看不到如何让 XAML 订阅：