Remarks

Unlike a Storyboard associated with an EventTrigger, a Storyboard defined as a resource does not start automatically. You can retrieve a reference to the Storyboard by assigning it a name and using the FindName method. You can then control the Storyboard by using its interactive methods: Begin, Pause, Resume, and Stop.

The XAML syntax for the Resources property is an example of an implicit collection syntax. For scripting, the property type of the property is ResourceDictionary, but you can omit the ResourceDictionary opening and closing tags in your markup because they are implicit. Instead, you include one or more Storyboard elements as child elements of <object.Resources>. For more information about XAML implicit collection syntax, see XAML Syntax Overview. (Explicitly including a ResourceDictionary object element is permissible XAML syntax.)

Examples

The following example makes a rectangle fade from view when the user presses the left mouse button over it. Because it is defined as a resource, the animation does not start automatically.

<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://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>

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

}

Applies To

Canvas, Ellipse, Glyphs, Image, InkPresenter, Line, MediaElement, Path, Polygon, Polyline, Rectangle, TextBlock

See Also

Interactive Animations Overview