Export (0) Print
Expand All

Resources Property

Gets or sets a collection of Storyboard objects that you can use to control animations.

XAML
<object>
  <object.Resources>
    oneOrMoreNamedStoryboards   </object.Resources>
<object>
Scripting
value = object.Resources
object.Resources = value

XAML Values

oneOrMoreNamedStoryboards One or more Storyboard object elements. Each Storyboard object element must specify the Name or x:Name attribute, and each Name or x:Name attribute value must be unique.

Property Value

ResourceDictionary

A collection of Storyboard objects.

This property is read/write. The default value is an empty collection.

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.

XAML
<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>
JavaScript
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

Community Additions

Show:
© 2015 Microsoft