23 Pixel Shader Effects in Silverligth 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 it 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 named as "WPFSLFx". Extract it as per your preferred location.  If you drill down the folder you will see “SL” folder. Within that folder you will get a library called -
1) SLShaderEffectLibrary.
To see these effects, 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  BandedSwirl.jpg
2 Bloom Effect  Bloom.jpg
3 Bright Extract Effect  BrightExtract.jpg
4 Color Key Alpha Effect  ColorKeyAlpha.jpg
5 Color Tone Effect ColorToneEffect.jpg 
6 Contrast Adjust Effect ContrastAdjust.png 
7 Directional Blur Effect  DirectionalBlur.jpg
8 Embossed Effect  EmbossedEffect.png
9 Gloom Effect  GloomEffect.jpg
10 Growable Poisson Disk Effect  GrowablePoissonEffect.jpg
11 Invert Color Effect  InvertColor.jpg
12 Light Streak Effect LightStreakEffect.jpg 
13 Magnify Effect  MagnifyEffect.jpg
14 Monochrome Effect  MonochromEffect.jpg
15 Pinch Effect  PinchEffect.jpg
16 Pixelate Effect PixelateEffect.jpg 
17 Ripple Effect  RippleEffect.jpg
18 Sharpen Effect  sharpenEffect.jpg
19 Smooth Magnify Effect  SmoothMagnify.jpg
20 Swirl Effect  SwirlEffect.jpg
21 Tone Mapping Effect  ToneMappingEffect.jpg
22 Toon Shader Effect  ToonShaderEffect.jpg
23 Zoom Blur Effect  ZoomBlurEffect.jpg

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-

AddRef.jpg


4) Now add a Image control into our Silverlight Page "MainPage.xaml". 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-

NewEffect.jpg

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-

SelectObjectDialogBox.jpg


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
Ebook Download
View all
Learn
View all