Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

Pause Method (Storyboard)

Pauses the set of animations associated with this Storyboard.

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

Remarks

If you pause a storyboard, the storyboard is not considered stopped for purposes of resetting certain storyboard properties that can only be set on a stopped storyboard, such as declaring a new target property.

Attempting to pause live streaming media will have no result.

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

Animation Overview
Interactive Animations Overview

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

Show:
© 2014 Microsoft. All rights reserved.