Share via

  • Article

BeginStoryboard

Microsoft Silverlight will reach end of support after October 2021. Learn more.

Begins a Storyboard and distributes its animations to their targeted objects and properties.

<BeginStoryboard>
  singleStoryboard
</BeginStoryboard>

XAML Values

Value

Description

singleStoryboard

Exactly one Storyboard object element.

Managed Equivalent

BeginStoryboard

Remarks

BeginStoryboard is used as a wrapper around a Storyboard object that is being triggered. A BeginStoryboard object can contain only one Storyboard, rather than a collection of them.

In addition to using BeginStoryboard to start a storyboard automatically when an object loads, you can use the interactive methods of the Storyboard object to start, pause, resume, and stop an animation.

For more information on basic concepts, see Animation Overview. Note that the Animation Overview topic is written primarily for users of the managed API, and may not have code examples or specific information that address the JavaScript API scenarios.

Example

The following example shows how to use a Storyboard object and a BeginStoryboard object to make a rectangle that fades in and out of view after it is loaded.

<Canvas
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml">
  <Rectangle
    x:Name="MyAnimatedRectangle"
    Width="100"
    Height="100"
    Fill="Blue">
    <Rectangle.Triggers>

      <!-- Animates the rectangle's opacity. -->
      <EventTrigger RoutedEvent="Rectangle.Loaded">
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation
              Storyboard.TargetName="MyAnimatedRectangle"
              Storyboard.TargetProperty="Opacity"
              From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever" />
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger>
    </Rectangle.Triggers>
  </Rectangle>
</Canvas>