30 Transition Effects In Silverlight 3.0

This purpose of this blog is to show all 30 Transition Effects in Silverlight 3.0 !!

Hi All,

The purpose of writing this blog is to show you that now you can apply “30 Transition Effect in Silverlight 3.0”. In my last blog, I have shown “23 Pixel Shader Effects in Silverlight 3.0”. If you have not seen it yet, please have a look at it and then proceed to apply these Transition Effects in your application.
For this demo, you must see the video which is available on “Channel 9”. Below is the link for the Video -

http://channel9.msdn.com/shows/Continuum/WPFFXDemo

To Apply these effects you will have to now download the library called “WPFSLFx” from “CodePlex.com”. It’s a .ZIP file. Below is a link for the same -
http://codeplex.com/wpffx

Unzip the downloaded file at your preferred location. You will see a folder called “WPFSLFx”. If you drill down the folder you will see “SL” folder. Within that folder you will get a library called -

1) SLTransitionEffects.

It contains 30 different Transition effects which you can try out online. Below is a Demo for the same -




The below table shows all the names of the transitions which you can apply in your Silverlight 3 application.

SR.NO.	Transition Name
1	Banded Swirl Transition Effect
2	Blinds Transition Effect
3	Blood Transition Effect
4	Circle Reveal Transition Effect
5	Circle Stretch Transition Effect
6	Circular Blur Transition Effect
7	Cloud Reveal Transition Effect
8	Crumble Transition Effect
9	Disolve Transition Effect
10	Drop Fade Transition Effect
11	Fade Transition Effect
12	Least Bright Transition Effect
13	Line Reveal Transition Effect
14	Most Bright Transition Effect
15	Pixelate In Transition Effect
16	Pixelate Out Transition Effect
17	Pixelate Transition Effect
18	Radial Blur Transition Effect
19	Radial Wiggle Transition Effect
20	Random Circle Reveal Transition Effect
21	Ripple Transition Effect
22	Rotate Crumble Transition Effect
23	Saturate Transition Effect
24	Shrink Transition Effect
25	Slide In Transition Effect
26	Smooth Swirl Grid Transition Effect
27	Swirl Grid Transition Effect
28	Swirl Transition Effect
29	Water Transition Effect
30	Wave Transition Effect

Now, to apply above transitions let’s see the step-by-step guide lines-

1) Create a Silverlight 3.0 application using Microsoft Expression Blend 3.0.

2) Once you are done, add a project “SLTransitionEffects” from the location where you have unzipped the “WPSLEfx” zip file. My location is -
C:\WPFSLFx\WPFSLFx\SL\SLTransitionEffects

3) Then compile the SLTransitionEffects Library and add a reference of the same into your Silverlight project as shown below-



4) Now, Add at least two images in the Silverlight project and add a “Image Control” on MainPage.xaml file with height and width as per you specifications. Set one image as a source to image control.

5) Now the most important thing, add one “ImageBrush” as a user control resource as shown below-

<ImageBrush ImageSource="Tulips.jpg" x:Key="ImBrush"/>

6) Now, Select a Image control which you have on MainPage.xaml and go to property window.

7) Now, go to “Appearance section” and you will see the “Effect” property and a “New” button. Click that button and then you will see out Transition effect library in a “Select Object” dialog box. And you will see 30 different classes under the “SLTransitionEffects” library. Each class presents a Transition Effect as shown below-



8) For this demonstration I will use “DropFadeTransitionEffect” class. So, make a choice of  “DropFadeTransitionEffect class and click “OK” button.

9) Now, you will see three properties-

I) OldImage- This is the property to which we will set the “ImageBrush” we have created in our earlier steps as shown below-




II) Progress – This property is the most common property which you will find in almost all the transition classes. Now, Create a “StoryBoard” (Animation) for five seconds. and change the “Progress” property from 0 – 1.

III) RandomSeed – Let it be zero.

So, you are done!! Start the animation on some button click event of the MainPage.xaml file and see the Transition effect applied on your Image. Very Simple !!!

Now you can try applying the Transition Effects on the Silverlight Controls as per your preference.

So, what are you waiting for!! Download the Library and Try all the “30 Transition Effects in Silverlight 3.0 Applications”.

Enjoy!!!

Pravinkumar.