Recently I have been updating, or rather upgrading may be a better word, a few web sites that I have been looking after for years.

I have been using some Javascript to blend images in a sort of slide show and decided that if I was going to change the web sites over to Silverlight 3.0 that it was as good as time as any to replace the decade old Javascript as well.

I would like to say that I am so well versed in XAML that all I had to do was manually type in the required XAML to the Silverlight project that I started in Visual Studio, but alas such is not the case so I had to use the very handy Expression Blend as the tool to create the effect I wanted for the images.

The effect I was after was to have a set of five images that would be displayed one at a time then after a set time dissolve to display the next image in an endless loop.

To accomplish this I knew that I would need to create a Storyboard and use DoubleAnnimationUsingKeyFrames to get the job done.

I placed all five images in one cell of a Grid,

setting the Height property of all the images to be the same as well as setting the Opacity of four of the images to 0 and the Opacity of the last to 1 so that only one image was visible at the start.
So my starting XAML is:

The next step was to create the Storyboard.  To create a Storyboard you need to click the New button located on the Objects and Timelines panel.

After clicking the New button you are prompted to either accept the default name for the Storyboard or enter your own name for the Storyboard.  For my example I have renamed the Storyboard “BlendingImages”.

Once you have accepted the name for the Storyboard, Timeline recording is turned on and a Storyline is added to the Objects and Timeline panel.

Next a KeyFrame for the Element to be changed, in my case the first image, needs to be added.  To add a KeyFrame you need to do two things.

1)  In the Objects and Timeline panel select the Element you want to add the KeyFrame for. (Number 1 in the image below.)

2)  Click on the Record KeyFrame Button above the Timeline. (Number 2 in the image below.)

A KeyFrame will then be added to the Timeline of the Element that has been selected. (Number 3 in the image below.)

Now that the KeyFrame has been added the Properties for the Element can be changed to what I want in the Properties Panel of the Element.  In my case I don’t actually want to make any changes to the Element just yet.

The effect that I am going for is to have the image show for six seconds then fade away over the next three seconds.  When the image that is showing starts to fade, I want the next image to start to appear over the same three seconds that the current image is fading.

Adding a second KeyFrame is the same as adding the first one.  Move the Timeline but using the small ScrollBar under the actual Timeline until the six second line is visible then click the Record KeyFrame button again.  A second KeyFrame for the Element will be inserted on the timeline for the Element.

The second image is selected and a KeyFrame is added to the Timeline for the second image.

Once again I don’t want to make any changes to the Properties of either image, but if you wanted to all you need to do is select the Element and then set whatever Properties you want in the Properties panel for the Element.

Another KeyFrame needs to be added for each image at nine seconds.

Now I am ready to make some changes to the Properties of my two images.

For the first image I set the Opacity to 0 which will make it invisible and the second image I set the Opacity to 100 so that is will now be seen.

You will also notice that it shows in the Objects and Timeline panel that there has been changes to the Elements.

One other point you may be curious about is why I added the KeyFrame to image1 at six seconds.  The reason for this is the change in an Elements Property is done over the entire time between KeyFrames.  As a result the image would be wholly visible for about half the time, four and a half seconds, before starting to fade prior to the second image started to appear which is not the effect I was after.  By adding the second KeyFrame at six seconds I ensured that the first image was still wholly visible at the time the second image started to fade in.

You can click on the Play button in the Objects and Timeline panel to test the Effect to make sure that it is working the way you want.

The starting animation worked so I set about adding KeyFrames and setting Properties for the rest of my images to complete the blending effect.

I should mentions that since I wanted this effect to repeat, the last three second of the effect I set the original image to start to become visible again and the last image fade out.

To get the effect to repeat you need to set the RepeatBehaviour property of the Storyboard.  You can do this by either adding the XAML yourself or by clicking once on the name of the Storyboard in the Objects and Timelines panel then selecting the value for the RepeatBehaviour.

I wanted to effect to continually repeat so I set the property to Forever.

Testing the effect showed it worked so I was able to now insert the XAML for the Storyboard into the Silverlight project in Visual Studio.

Below is the complete XAML for the Storyboard.

 To get the effect running there was a couple of tweaks that were required in the Silverlight project.

The first was I needed to give the UserControl a Name so that I could access the Events for the UserControl from the .vb code behind page.

Opening the code behind page I went to the Loaded Event of the UserControl and added the code that would find the Storyboard as a Resource of the UserControl and start the effect when the page was loaded into the user browser.

The code is relatively simple at three lines.

The first line declares a Variable as a Storyboard.

The second line sets the value of the Variable to be the Storyboard that I created in Blend and copied into my Silverlight project.

The third line of code starts the Storyboard to begin the effect.

 Now I have the same effect, which can be seen here as I had before with a couple of benefits.

The first benefit is that I am not limited to needing all the images to be exactly the same size and shape and the markup for the XAML Storyboard is less than the Javascript function.