如何：在 Silverlight 4 中为 MVVM ViewModel 属性设置动画？

Question

我想问一下，如果可能的话，您如何在 Silverlight 中为 MVVM 视图模型上的属性设置动画。例如，这里我在 XAML 中有一个典型的 Storyboard 声明：

  <DoubleAnimation
                    Storyboard.TargetName="yearSlider"
                    Storyboard.TargetProperty="Value"
                    From="1990" To="2012" Duration="0:0:8" />

现在假设我不想为 Slider yearSlider 上的 Value 属性设置动画，而是在我的 MVVM 视图模型上为 CLR（非依赖）属性“Year”设置动画。例如，如果我的视图模型设置为 DataContext，则代码可能如下所示：

  <DoubleAnimation
                    Storyboard.BindingSource="{Binding}"
                    Storyboard.TargetProperty="Year"
                    From="1990" To="2012" Duration="0:0:8" />

当然，Storyboard 上没有这样的“BindingSource”属性，但这应该有助于说明我想要做什么。

Silverlight 4 中是否有任何机制来完成为 MVVM 视图模型属性设置动画的任务，而无需在代码隐藏中添加代码？

Answer 1

是的。你可以这样做。

MVVM 中的属性必须是依赖属性，而不是普通属性。因此，您的 MVVM 必须从 DependencyObject 继承，然后您才能创建可以动画的依赖属性。

public class MyViewModel : DependencyObject
{
  public static readonly DependencyProperty YearProperty = 
    DependencyProperty.Register(
    "Year", typeof(int),
    typeof(MyViewModel), null
    );

  public int Year
  {
    get { return (int)GetValue(YearProperty); }
    set { SetValue(YearProperty, value); }
  }
}

然后您的 XAML 将如下所示：

<DoubleAnimation
   Storyboard.Target="{Binding}"
   Storyboard.TargetProperty="Year"
   From="1990" To="2012" Duration="0:0:8" />

尝试一下，如果它有效，请告诉我。

如果没有，请尝试摆弄它，直到弄清楚如何满足 DoubleAnimation 的绑定。也许你可以在范围内捎带另一个元素：

<TextBlock x:Name="YearLabel" Text="{Binding Year}" />
<DoubleAnimation
   Storyboard.TargetName="YearLabel"
   Storyboard.TargetProperty="DataContext.Year"
   From="1990" To="2012" Duration="0:0:8" />

注意我们是如何修改“DataContext.Year”的。它不必是 TextBlock。可以是具有名称的任何元素...例如 RootLayout Grid。