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="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();
}
|