Silverlight 3 and Animation

In this post i will show how simple it is to use animation in silverlight 3 by animating a button width and height. When working with Animation in silverlight, we need an animation object to perform our animation on and a storyboard to handle your animation. Once the storyboard and animation is setup we need a way to trigger the storyboard to start. You have a couple of options for starting a storyboard: using code, using xaml, or (gotostate for silverlight 4) . We will be working in Expression Blend 4 for this example. 

1. Open up blend and create a silverlight application project.
2. Drag a button onto the grid.

    3. In blend, click on the button to show the xaml. Once in xaml view, we can create a resource collection to  store our storyboard.

  
4. Inside the resource collection create a storyboard and give it a key value. In between the storyboard tags we need to create two DoubleAnimation, one for the width property and one for the height property of the button control.

   5. For each DoubleAnimation we need to set the storyboard.targetname to the control we want to animate which is the button with the name set to btnClick. Storyboard.targetpoperty will be the property name we want to change for the button (in our case the height and width). The From and To properties will change the values for the height and width during the animation. Finally we set how long we want the animation to run with the Duration property. Here the animation will run for 10 seconds. 

  6. Open the code behind file and create a loaded event handler in the constructor. Inside the Loaded event we will grab our storyboard from the resource collection and start our storyboard when the page load.

That's it, press F5 to run it.

Go Silverlight!