Begin
Microsoft Silverlight will reach end of support after October 2021. Learn more.
Initiates the set of animations associated with a Storyboard object.
object.Begin()
Remarks
You will generally use this method to initiate storyboards that are not associated with a trigger or that are intended to be used again after an initial triggered run.
If your Storyboard object has an animation type that does not match the targeted property type, this will be indicated as a method failure (E_RUNTIME_METHOD) of the call to the Begin method. You can differentiate this failure from a nonresolving Storyboard.TargetName property, because a nonresolving name will raise a SetValue error on the Storyboard.TargetName property.
Example
The following example associates the Begin, Pause, Resume, and Stop methods, with which you can control a Storyboard object, with a series of buttons that enable the user 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>
<!-- Create the button that begins the 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>
<!-- Create the button that pauses the 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>
<!-- Create the button that resumes the 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>
<!-- Create the button that stops the 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();
}