Stop (Storyboard)

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

Halts the set of animations associated with a Storyboard object.

object.Stop()

Managed Equivalent

Stop

Remarks

If you stop the storyboard, you can set storyboard properties that can be set only on a stopped storyboard. For example, you can declare a new Storyboard.TargetName on contained animations.

Example

You can use the Begin, Pause, Resume, and Stop methods to control a Storyboard object. The following example associates these methods with a series of buttons that enable you 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>

  <!-- 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>

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