silverlight-4.0 - 如何: animate a MVVM ViewModel property in Silverlight 4?

Question

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

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

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

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

当然 Storyboard 上没有这样的“BindingSource”属性，但这应该有助于说明我正在尝试做的事情。

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

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 的绑定(bind)。也许你可以在范围内搭载另一个元素:

<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。