Export (0) Print
Expand All

Begin Method (Storyboard)

Initiates the set of animations associated with this Storyboard.

XAML
Cannot use methods in XAML.
Scripting
object.Begin()

Remarks

This method is generally used to initiate storyboards that are not associated with a trigger, or at least that are intended to be used again after an initial triggered run. See Interactive Animations Overview.

If your Storyboard has an animation type that does not match the targeted property type, this will be indicated as a method failure of the call to Begin. This can be differentiated from a nonresolving Storyboard.TargetName because a nonresolving name will raise a SetValue error on the Storyboard.TargetName property.

Examples

The Begin, Pause, Resume, and Stop methods can be used to control a Storyboard. The following example associates these methods to a series of buttons which allow you to begin, pause, resume, and stop an animation.

XAML
<Canvas
  xmlns="http://schemas.microsoft.com/client/2007"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  Width="400" Height="300">
  <Canvas.Resources>
    <Storyboard x:Name="myStoryboard">

      <!-- Animate the center point of the ellipse. -->
      <PointAnimation
       Storyboard.TargetProperty="Center"
       Storyboard.TargetName="MyAnimatedEllipseGeometry"
       Duration="0:0:5" 
       From="20,200"
       To="400,100"
       RepeatBehavior="Forever" />

    </Storyboard>
  </Canvas.Resources>
  <Path Fill="Blue">
    <Path.Data>

      <!-- Describes an ellipse. -->
    <EllipseGeometry x:Name="MyAnimatedEllipseGeometry"
       Center="20,20" RadiusX="15" RadiusY="15" />
    </Path.Data>
  </Path>

  <!-- Button that begins animation. -->
  <Canvas MouseLeftButtonDown="animation_begin" 
    Canvas.Left="10" Canvas.Top="265">
    <Rectangle Stroke="Black" RadiusX="5" RadiusY="5"
      Height="30" Width="55">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="LimeGreen" Offset="0.0" />
          <GradientStop Color="Green" Offset="1.0" /> 
        </RadialGradientBrush>
      </Rectangle.Fill>
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">Begin</TextBlock> 
  </Canvas>

  <!-- Button that pauses Animation. -->
  <Canvas MouseLeftButtonDown="animation_pause" 
    Canvas.Left="70" Canvas.Top="265">
    <Rectangle Stroke="Black" 
      Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Yellow" Offset="0.0" />
          <GradientStop Color="Orange" Offset="1.0" /> 
        </RadialGradientBrush>
      </Rectangle.Fill> 
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">Pause</TextBlock> 
  </Canvas>

  <!-- Button that resumes Animation. -->
  <Canvas MouseLeftButtonDown="animation_resume" 
    Canvas.Left="130" Canvas.Top="265">
    <Rectangle Stroke="Black" 
      Height="30" Width="65" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="LimeGreen" Offset="0.0" />
          <GradientStop Color="Green" Offset="1.0" /> 
        </RadialGradientBrush>
      </Rectangle.Fill> 
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">Resume</TextBlock> 
  </Canvas>

  <!-- Button that stops Animation. Stopping the animation returns the
       ellipse to its original location. --> 
  <Canvas MouseLeftButtonDown="animation_stop" 
    Canvas.Left="200" Canvas.Top="265">
    <Rectangle Stroke="Black" 
      Height="30" Width="55" RadiusX="5" RadiusY="5">
      <Rectangle.Fill>
        <RadialGradientBrush GradientOrigin="0.75,0.25">
          <GradientStop Color="Orange" Offset="0.0" />
          <GradientStop Color="Red" Offset="1.0" /> 
        </RadialGradientBrush>
      </Rectangle.Fill> 
    </Rectangle>
    <TextBlock Canvas.Left="5" Canvas.Top="5">Stop</TextBlock> 
  </Canvas>


</Canvas>
JavaScript
function animation_begin(sender, args) {

    sender.findName("myStoryboard").begin();
}

function animation_pause(sender, args) {

    sender.findName("myStoryboard").pause();
}

function animation_resume(sender, args) {

    sender.findName("myStoryboard").resume();
}

function animation_stop(sender, args) {

    sender.findName("myStoryboard").stop();
}

Applies To

Storyboard

See Also

Seek, Stop
Animation Overview
Interactive Animations Overview

Community Additions

Show:
© 2014 Microsoft