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:

  
  </div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><Image x:Name="image" Height="155" HorizontalAlignment="Left"</div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">VerticalAlignment="Top" Width="240"</div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">RenderTransformOrigin="0.5,0.5" Source="bs00554_.jpg"></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><i:Interaction.Triggers></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><i:EventTrigger EventName="Loaded"></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><im:ControlStoryboardAction Storyboard="{StaticResource</div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">MoveAnimation}"/></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"></i:EventTrigger></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"></i:Interaction.Triggers></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><Image.RenderTransform></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><TransformGroup></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><ScaleTransform/></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><SkewTransform/></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><RotateTransform/></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><TranslateTransform/></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"></TransformGroup></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"></Image.RenderTransform></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"></Image></div>
  <div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">
  
  <Image x:Name="image" Height="155" HorizontalAlignment="Left"
                   VerticalAlignment="Top" Width="240"
                   RenderTransformOrigin="0.5,0.5" Source="bs00554_.jpg">
     <i:Interaction.Triggers>
         <i:EventTrigger EventName="Loaded">
               <im:ControlStoryboardAction Storyboard="{StaticResource
                      MoveAnimation}"/>
          </i:EventTrigger>
    </i:Interaction.Triggers>
    <Image.RenderTransform>
        <TransformGroup>
         <ScaleTransform/>
         <SkewTransform/>
         <RotateTransform/>
         <TranslateTransform/>
      </TransformGroup>
  </Image.RenderTransform>
  </Image>
  
  

  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

Related Posts:

• Silverlight Best Practices (Part 4 of 4)
• Silverlight Best Practices (Part 2 of 4)
• Silverlight Best Practices (Part 3 of 4)
• Silverlight Best Practices (Part 1 of 4)
• Creating Page Transitions in Windows Phone