Creating an animation in Expression Blend and edit in Visual Studio 2010

Creating animations in Expression Blend\Silverlight is made quite easier with the introduction of XAML but the animation created in Silverlight could be enhanced or enlivened when the animation is provided additional functionality through coding and this job is well accomplished through Visual Studio 2010\C#. In Visual Studio 2010\C# we can edit the Silverlight animation and add behavior to it. This not only brings life to the animation but also enlightens it with excellent look and feel.

First create a simple animation in Expression Blend. Add a Storyboard Workspaces.

In this animation, what we do is add a button and name it as Click me!! on the art board. The aim is to create an animation such that the artboard changes color on pressing the button.

Lets Start, the design part looks like this.

Working with Expression Blend the animation would result in change of the background but it would change just once and to bring continuity to this application we would edit and add functionality to this application in C#.

In Blend, select the "ChangeColor" storyboard from the Storyboard picker in the Objects and Timeline panel.

Selecting the storyboard we are provided with the Timeline part where the recording of the events start. Now to begin the animation lets shift the timeline to 1 second ahead.

Setting the timeline to 1 sec. Opens the brush property where we can select the colors that we would like to add to our animation.

Now we have to add respective gradient to the animation, for this in the storyboard select the LayoutRoot and expand it as far as possible. This is done to add animation to the application than selecting the color property:

Now after expanding the select the property whose gradient has to be changed, this is basically selecting the color node, be sure that the timeline remains at the 1sec mark. This modification in the property looks like the figure given below:

After the color property has been selected the the property panel shows new window of gradient, here you can name the gradient and save this property as one of the animated effect to the application. The gradient window appears as the figure below: 

Naming the gradient window makes it easier to access them.

Similarly Name the other gradient windows that you would intend to include in your application. i.e. by selecting the color property and then naming the gradient window. 

 

Now the Important part of the project is editing this application in Visual studio/C#. This is necessary because when the application above is run it changes color only once after clicking the button but we would like to maintain the continuity that after every button click the background changes color. Hence to add this functionality we edit this application in C#. Its pretty much easier after naming the gradients Goto Project-->right click on the tab written Solution "......". This Opens the project in visual studio.

In visual studio go to the solution Explorer select Page.xaml.cs which results in opening a coding part on the left side of the solution explorer. By default the coding of  Page.xaml.cs is as follows:

This code tells that when the button is clicked it changes the color of the background but this occurs only once since the RandomizeColors method is called only once and thus only once the background color changes. In order to make the application work as expected edit the code as shown below :

Now run this application in visual studio by hitting F5 and you'll find that the application produces the desired output. Every time you press the button the color of the background changes. This is what we wanted to do with our application. Thus it is clear from this work that XAML provides better flexibility to combine it with C# and produce a desired output. Doing this project alone with either Expression Blend or C# would be hectic task but combining both makes it time saving and much easier.

Output :

Note : The project is run only in either Expression Blend or in Visual Studio 2010 as the result is reflected in the other by itself.

Hope it had been fun playing with colors in Expression Blend.