Begin Method (Storyboard)
Initiates the set of animations associated with this Storyboard.
XAML |
Cannot use methods in XAML.
|
Scripting |
object.Begin()
|
Remarks
This method is generally used to initiate storyboards that are not associated with a trigger, or at least that are intended to be used again after an initial triggered run. See Interactive Animations Overview.
If your Storyboard has an animation type that does not match the targeted property type, this will be indicated as a method failure of the call to Begin. This can be differentiated from a nonresolving Storyboard.TargetName because a nonresolving name will raise a SetValue error on the Storyboard.TargetName 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
See Also
Seek, Stop
Animation Overview
Interactive Animations Overview