Simple storyboard in silverlight

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

1. Start the silverlight application.
    
2. In the usercontrol or page take one image control name as "image1". Give source image.
    
3. Take one button name as start animation.
    
4. In the  <UserControl.Resources>...... </UserControl.Resources> add your storyboard.
    
5. Set the target name as like this TargetName="image1".
    
6. 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.
    
7. In the .cs on click the button event start the storyboard as like below.
           private void StartAnimation_Click(object sender, RoutedEventArgs e)
           {          
              myStoryboard.Begin();          
           }
    
8. Run the project and see the output.