Friday, July 24, 2009

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-

AddReference

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-

TransitionEffects

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-

OldImage

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.

 

No comments:

Post a Comment