23 Pixel Shader Effects in Silverlight 3.0

 

Hi All,

Yesterday, I was just going through the Pixel Shader Effects in Silverlight 3.0. and found one interesting video on Channel 9 about WPF Effects library on CodePlex. This library is modified for “Silverlight 3” and contains 23 effects for Silverlight 3 as well. Below is a link for the same-

Video Link- http://channel9.msdn.com/shows/Continuum/WPFFXDemo/

Library Link - http://codeplex.com/wpffx

So, Download this library. It’s a .ZIP file. Extract it as per your preferred location and you will see a Folder SL, which contains a Library -

1) SLShaderEffectLibrary.

To see these effects Live, below is a table which I made with all “23 Pixel Shader Effects” -

List of 23 Pixel Shader Effects-

SR.NO.	Pixel Shader Effect Name	Snapshot of the Effect
1	Banded Swirl Effect
2	Bloom Effect
3	Bright Extract Effect
4	Color Key Alpha Effect
5	Color Tone Effect
6	Contrast Adjust Effect
7	Directional Blur Effect
8	Embossed Effect
9	Gloom Effect
10	Growable Poisson Disk Effect
11	Invert Color Effect
12	Light Streak Effect
13	Magnify Effect
14	Monochrome Effect
15	Pinch Effect
16	Pixelate Effect
17	Ripple Effect
18	Sharpen Effect
19	Smooth Magnify Effect
20	Swirl Effect
21	Tone Mapping Effect
22	Toon Shader Effect
23	Zoom Blur Effect

To apply these effects, here is a step-by-step lab manual -

1) Create a Silverlight 3 project using Microsoft Expression Blend 3. Here I took a Sketch Flow project of Silverlight 3.0.

2) Once you are done with this, Add the project “SLShaderEffectLibrary” from the location where you have extracted the .ZIP file. My path where the “SLShaderEffectLibrary” is as below-

C:\WPFSLFx\WPFSLFx\SL\SLShaderEffectLibrary

3) Now compile the project “SLShaderEffectLibrary” and add the reference of this library into our Silverlight project as shown below-

4) Now add a Image control in our Silverlight control. Set your favorite picture to the image. Once you are done with this, now let’s add a effect on this image.

5) Find the “Effect” property of the Image under Appearance section, and click the “New” button as shown below-

6) Now, You will see a “Select Object” Dialog box. Within this dialog box drill-down the “SLShaderEffectLibrary” and you will see all the shader classes which you can apply to your Image-

7) Now change the properties as per your requirement and see the effect on your image.

Note-: I have created a StoryBoard for each effect and applied it to different images. If you want to try out the same create a story board and change the properties of each effect.

8) So, what are you waiting for !! Try out all the effects by downloading the Library.

Enjoy!!

Pravinkumar