23 Pixel Shader Effects In Silverligth 3.0

The purpose of this Blog is to show all 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 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 -

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 NameSnapshot of the Effect
1Banded Swirl Effect BandedSwirl.jpg
2Bloom Effect Bloom.jpg
3Bright Extract Effect BrightExtract.jpg
4Color Key Alpha Effect ColorKeyAlpha.jpg
5Color Tone EffectColorToneEffect.jpg 
6Contrast Adjust EffectContrastAdjust.png 
7Directional Blur Effect DirectionalBlur.jpg
8Embossed Effect EmbossedEffect.png
9Gloom Effect GloomEffect.jpg
10Growable Poisson Disk Effect GrowablePoissonEffect.jpg
11Invert Color Effect InvertColor.jpg
12Light Streak EffectLightStreakEffect.jpg 
13Magnify Effect MagnifyEffect.jpg
14Monochrome Effect MonochromEffect.jpg
15Pinch Effect PinchEffect.jpg
16Pixelate EffectPixelateEffect.jpg 
17Ripple Effect RippleEffect.jpg
18Sharpen Effect sharpenEffect.jpg
19Smooth Magnify Effect SmoothMagnify.jpg
20Swirl Effect SwirlEffect.jpg
21Tone Mapping Effect ToneMappingEffect.jpg
22Toon Shader Effect ToonShaderEffect.jpg
23Zoom 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