Stop Method (Storyboard)

  • Article

Halts the set of animations associated with this Storyboard.

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

Remarks

If you stop the storyboard, you can certain storyboard properties that can only be set on a stopped storyboard, such as declaring a new target 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="https://schemas.microsoft.com/client/2007"
  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>
  <!-- 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

Animation Overview