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 🙂