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
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
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
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
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.
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.