Windows Phone MVVM 动画按钮答案

【问题标题】：Windows Phone MVVM Animated buttonWindows Phone MVVM 动画按钮
【发布时间】：2014-06-26 18:17:10
【问题描述】：

我想使用 MVVM 模式在 Windows Phone 8 Silverlight 中创建动画按钮。这个控件应该像这样工作：

点击时，如果它的值是正确的，它会触发旋转动画。当文本不可见时（绕 Y 轴旋转 90 度），我会将按钮上的文本更改为“是！”然后它会旋转回到正常状态。如果值不正确，我会将背景更改为红色，不进行旋转。

在 WPF 中我可以使用 DataTriggers，所以我看起来像这样：

1)用户点击按钮 -> 命令被执行

2a)如果值正确，我在 viewmodel 中更改一些值，这会触发 DataTrigger，它会启动第一个动画将按钮旋转 90 度

3a)动画结束触发命令，改变文本值

4a)文本更改触发第二次旋转，一开始按钮旋转 180 度，然后正常旋转 90 度，所以看起来新文本在其他站点上

2b)如果值不正确，我将一些值更改为触发错误值动画的值

但在 windows phone silverlight 中，样式中没有触发器，所以最简单的方法是只使用代码隐藏，但我想在 MVVM 中这样做。也许有人遇到过类似的问题。我目前正在考虑使用来自 MVVM Light 工具包的消息，但我不确定它是否会起作用

编辑：

好的，多亏了 Muhammad Saifullah 的提示，我终于成功了。我使用按钮的命令将点击发送到 VM，接下来我使用 MVVM light Toolkit 发送消息以查看以启动动画。不幸的是，MVVM light toolkit 中的 EventToCommand 不适用于 Storyboard，所以我只是在 Completed 事件后面的代码中执行 VM 的命令，它会更改值并发送下一条消息。

【问题讨论】：

标签： xaml windows-phone-7 animation windows-phone-8 mvvm

【解决方案1】：

您可以将 xaml 中的命令绑定到您的虚拟机。下面是一个如何在 MVVM Light 中绑定命令的示例。

对于按钮

<Button ....>
<i:Interaction.Triggers>
   <i:EventTrigger EventName="Click">
     <MvvmLight_Command:EventToCommand Command="{Binding Navigate}" CommandParameter="{Binding ElementName=btnClockin,Path=Tag}"></MvvmLight_Command:EventToCommand>
     </i:EventTrigger>
</i:Interaction.Triggers>

在页面 xaml 中添加以下程序集引用

  xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
  xmlns:MvvmLight_Command="clr-namespace:GalaSoft.MvvmLight.Command;assembly=GalaSoft.MvvmLight.Extras.WP8"

虚拟机中的命令代码

/// <summary>
    /// Gets the Navigate.
    /// </summary>
    public RelayCommand<object> Navigate
    {
        get
        {
            return _navigate
                ?? (_navigate = new RelayCommand<object>(
                                      page =>
                                      {
                                          if (page.ToString() == "0")
                                              MessageBox.Show("Comming Soon");
                                          else
                                              Messenger.Default.Send<NavigateCommand, MyPge33>(new NavigateCommand(page.ToString()));
                                      }));
        }
    }

您可以以类似的方式在故事板上绑定命令。但要启动故事板，您可以将消息从您的 VM 发送到 view.xaml.cs 以启动故事板。

希望这会有所帮助。

【讨论】：