Silverlight - Using StoryBoard From Expression Blend

很多年前都一直有玩Flash，約是Flash 4至Flash MX2004期間。所以Blend其實不是太難上手，玩過Silverlight 2.0 和Expression Blend後，我學習SL覺得首先的就是要放下Flash的基本概念。雖然Flash和Blend都同樣使用Timeline,Keyframe去達到動畫效果，但Blend並沒有類似MovieClip的東西出現，反之是用一樣叫StoryBoard的東西，透過改變Target,Property去做到一個"劇本"的效用。而StoryBoard同樣是XAML，並不是好像MovieClip般可以當是一個物件。

以下是我學習期間，導入StoryBoard方法

按此觀看Demo

Page.xmal

<Canvas>
<Canvas.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimation x:Name="myDoubleAnimation" Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:2" AutoReverse="True" />
</Storyboard>
</Canvas.Resources>
<Rectangle x:Name="MyAnimatedRectangle1" Canvas.Top="10" Canvas.Left="10" Width="100" Height="100" Fill="Blue" MouseLeftButtonDown="Start_Animation" />
<Rectangle x:Name="MyAnimatedRectangle2" Canvas.Top="10" Canvas.Left="120" Width="100" Height="100" Fill="Blue" MouseLeftButtonDown="Start_Animation" />
<Rectangle x:Name="MyAnimatedRectangle3" Canvas.Top="10" Canvas.Left="230" Width="100" Height="100" Fill="Blue" MouseLeftButtonDown="Start_Animation" />
<Rectangle x:Name="MyAnimatedRectangle4" Canvas.Top="10" Canvas.Left="340" Width="100" Height="100" Fill="Blue" MouseLeftButtonDown="Start_Animation" />
</Canvas>

Page.xaml.cs

public void Start_Animation(object sender, MouseEventArgs e)
{
myStoryboard.Stop();
Rectangle myRect = (Rectangle)sender;
myDoubleAnimation.SetValue(Storyboard.TargetNameProperty, myRect.Name);
myStoryboard.Begin();
}

以上例子就是利用sender的Name去代入SetValue()中的myRect.Name,
換句話說,透過SetValue()再引用正確的dependency property,就可以同樣Override 其他數值。