Simple Animation in Expression Blend Silverlight

Introduction

Developing Animations in Silverlight is fully based on key-frames. The Silverlight framework calculates the transitions to apply in scene and at run time it looks like animation. Let’s develop our very first animation using Expression Blend.

Follow the Steps:-

Step 1

Create a new Silverlight Application + Website in Expression Blend.

Step 2

Navigate to ‘Objects and Timeline’ window and select the ‘LayoutRoot’ element.

Step 3

Draw a new ‘Rectangle’. When you draw a rectangle it will appear inside the ‘LayoutRoot’ hierarchy. Look at image.

Step 4

Select the Rectangle from ‘Object and Timeline’ category and navigate to Object > Path > Convert to Path. When you click this it will convert the ‘Rectangle’ to Path. Look at image below.

Step 5

Now, select the ‘Path’ from ‘Object and Timeline’ category and click to select pen toolbar. Using pen tool click on rectangle (path) outline to draw anchor points, look in image.

Step 6

When you finish, select the ‘Direct Selection’ tool and drag all center points so create a shape as given below in image.

Step 7

Let’s fill some color now, for this, select the ‘Path’ from ‘Object and Timeline’ category and navigate to property window.

Step 8

In property window, select Fill Color > Gradient Brush > Radial Gradient. Now put a new gradient stop on slider and change the color by selecting different gradient stops. Look in image below:

Step 9

Now we have a colorful scene (art) and only one thing is left, Animation. Let’s do it.

Step 10

Select the ‘Path’ from ‘Object and Timeline’ category and click on + icon above (New…) to create the ‘Path’ as Storyboard. When you click on + icon will prompt you to enter Storyboard name, keep the default name. When you click on OK button, it will add red line around scene. And a new time line will appear.

Step 11

In the timeline (I’ve circled out using red color), drag the yellow line to 2. Now what you want to change during this time (2 sec), let’s rotate the shape (path) on 360 degree. Everything is completed now.

Step 12

Now click on timeline’s play button to see the animation. At this stage, when you run the application in browser, will not animate because we have to setup some event handler here. Let’s do this also.

Step 13

Navigate to event list window and add a new event for ‘Mouse Left Button Down’ using event name as ‘RunMyAnimation’ and when you done, press Tab key to come with event handler in code window. Look at image given below:

Step 14

Now, in the code window type the code Storyboard1.Begin(). This will start the animation when user click left mouse button on scene in browser. Find the code below:

Step 15

Now to run, navigate to Project > Run Project. In browser, click on art to run.

Step 16

This animation will stop after one round. To keep this animation continue, select Storyboard1 and navigate to Property window and change its ‘AutoReverse’ and ‘RepeatBehavior’ properties. Test the application once more, it will now stop now. Look in image given below.

That's all about the basic animation in Expression Blend.