A Storyboard is the container that you put animation objects in. You can use
storyboard for any control of the silverlight
as well as WPF. The controls are like the image, rectangle, button, hyperlink
button etc.
You have to make the Storyboard a resource that is available to the object that
you want to animate. There are diff type of animation like double animation ,
key frame animation, easing animation etc. You can use the interactive methods
of the Storyboard object to start, pause, resume, and stop an animation. By
using above methods u can operate the animation as per requirement. So to
animate any control you need to use storyboard.
The story board has many different properties in between them some are
TargetName, TargetProperty etc.
The target name can gets or sets the name of the object or control to animate.
Suppose you want to use storyboard for image or you want to animate the image
then you need to set the TargetName="image1". image1 is the name of image that u
want to animate. And TargetProperty can gets or sets the name of the property
that should be animated. There is also another property name as
-
Name-
The name of the storyboard.
-
AutoReverse- Whether the timeline plays in reverse after it complete.
-
BeginTime-
The time when you start the timeline or storyboard.
-
Duration
- sets the length of time for which this timeline plays.
-
RepeatBehavior- Set the repeat behavior of the storyboard.
These all
properties are important for writing storyboard.
e.g. Suppose u want to move image from left to write. The storyboard for this is
as like below
-
Start the
silverlight application.
-
In the
usercontrol or page take one image control name as "image1". Give source
image.
-
Take one
button name as start animation.
-
In the <UserControl.Resources>......
</UserControl.Resources> add your storyboard.
-
Set the
target name as like this TargetName="image1".
-
So your code
is like this
<UserControl.Resources>
<Storyboard x:Name="myStoryboard">
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="image1"
Storyboard.TargetProperty="X" Duration="0:0:10">
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:2" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
In the above example storyboard is applied for image control name as image1.
Duration is the 0:0:10 sec.
-
In the .cs
on click the button event start the storyboard as like below.
private void StartAnimation_Click(object sender, RoutedEventArgs e)
{
myStoryboard.Begin();
}
-
Run the
project and see the output.