ControlStoryboardAction in Silverlight 3

Microsoft.Expression.Interactions namespace ships with an interesting control - ControlStoryBoardAction.  This control can be applied on any Silverlight UI Control that has Content property. What does it do?

Well, it allows us to add Animation/Movement Behavior to any control. Let us see how.

Let us implement a swivel effect to an image on a page. Steps to implement this:

• Add an image to the Page.xaml -> say the image name is x:Name="image"
  
• Drag and drop the ControlStoryBoardAction from the toolbox on the image.

  The new XAML appears like:

  [sourcecode language='xml']
  VerticalAlignment="Top" Width="240"

  RenderTransformOrigin="0.5,0.5" Source="bs00554_.jpg">

  MoveAnimation}"/>

  [/sourcecode]

  [sourcecode language='xml']
  
  
  
  
  
  
  

  
  
  

  
  

  [/sourcecode]

  This ControlStoryBoardAction refers to a StaticResource MoveAnimation

• Add an Animation for this image in this StoryBoard and press F5
• Whoa! The image animates!

How does this work?

There are 2 parts to understand

• EventTrigger: This is the function that triggers this ControlStoryboardAction
• StoryBoard: The animation which should be displayed when the above event is triggered.

It is this simple :)