Stop Method (Storyboard)
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(); } |