Begin

Managed Equivalent

Begin

Remarks

You will generally use this method to initiate storyboards that are not associated with a trigger or that are intended to be used again after an initial triggered run.

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

Example

The following example associates the Begin, Pause, Resume, and Stop methods, with which you can control a Storyboard object, with a series of buttons that enable the user to begin, pause, resume, and stop an animation.

<Canvas
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://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>

  <!-- Create the button that begins the 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>

  <!-- Create the button that pauses the 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>

  <!-- Create the button that resumes the 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>

  <!-- Create the button that stops the 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>

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

Reference