Share via

Interactive Animations in Silverlight

  • Article

This topic describes how to interactively control Storyboard animations in Microsoft Silverlight. It also describes how to declare Storyboard animations as resources to prevent them from playing automatically.

This topic contains the following sections:

  • Prerequisites
  • Storyboard Interactive Methods
  • Storyboard as Resources

Prerequisites

To understand this topic, you should be familiar with Silverlight animations. For an introduction, see the Animation Overview.

Storyboard Interactive Methods

To interactively control a Storyboard, you retrieve the Storyboard and use its interactive methods.

  • Begin: Initiates the Storyboard.
  • Pause: Pauses the Storyboard.
  • Resume: Resumes a paused Storyboard.
  • Stop: Stops the Storyboard.
  • Seek: Skips to a specific part of the Storyboard animation.

The following example is a modified version of the fading rectangle from the Animation Overview. This version of the example assigns a name to its Storyboard so that it can be retrieved. It also registers for the rectangle's MouseLeftButtonDown event. The Storyboard begins as soon as the Rectangle is loaded, and restarts whenever the user presses the left mouse button over the Rectangle.

XAML 
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle
    x:Name="MyAnimatedRectangle"
    Width="100"
    Height="100"
    Fill="Blue"
    MouseLeftButtonDown="startAnimation">
    <Rectangle.Triggers>
      <!-- Animates the rectangle's opacity. -->
      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard x:Name="myStoryboard">
            <DoubleAnimation
              Storyboard.TargetName="MyAnimatedRectangle"
              Storyboard.TargetProperty="Opacity"
              From="1.0" To="0.0" Duration="0:0:5" 
              AutoReverse="True" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Rectangle.Triggers>
  </Rectangle>
</Canvas>

The following JavaScript handles the MouseLeftButtonDown event. It retrieves the Storyboard and calls its Begin method.

JavaScript 
function startAnimation(sender, mouseEventArgs)
{
    // Retrieve the Storyboard and begin it.
    sender.findName("myStoryboard").begin();
}

Storyboards as Resources

The Storyboard in the preceding example begins playing as soon as the Rectangle object is loaded, and again whenever the left mouse button is pressed over the Rectangle. Suppose that you did not want the Storyboard to play until the user pressed the left mouse button. Instead of using an EventTrigger to create the Storyboard, declare the Storyboard as a resource.

The following example makes a rectangle fade from view when the user presses the left mouse button over it. Unlike the previous example, the animation does not start automatically.

XAML 
<Canvas
  xmlns="https://schemas.microsoft.com/client/2007"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Canvas.Resources>
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" />
    </Storyboard>  
  </Canvas.Resources>
  <Rectangle
    x:Name="MyAnimatedRectangle"
    Width="100"
    Height="100"
    Fill="Blue"
    MouseLeftButtonDown="startAnimation">
  </Rectangle>
</Canvas>
JavaScript 
function startAnimation(sender, mouseEventArgs)
{
    // Retrieve the Storyboard and begin it.
    sender.findName("myStoryboard").begin();
}

See Also

Animation Overview
Key-Frame Animations
Working with Animations Programmatically
Storyboard
Overviews and How-to Topics