July 20th, 2009

Accessing the WPF pixel shaders in Silverlight 3

All Silverlight Examples, Silverlight 3 tutorials, Silverlight Blend Tutorials, Silverlight Effects, by Gavin Wignall.

The below example shows off 6 transitional effects using the new pixel shader ability in Silverlight 3. By standard, Blend 3 currently only features 2 pixel shading effects which are Blur and Shadow.

The 6 new effects I show off above are:

  • Directional Blur Effect
  • Pixelate Effect
  • Pinch Effect
  • Ripple Effect
  • Swirl Effect
  • Zoom Blur Effect

You can however add many more effects that have been converted from WPF to Silverlight by following the steps below.

Installing Pixel Shader Effects from the WPF library

First off go to http://www.codeplex.com/wpffx and download the latest release of WPFSLFx 2.0. Un-zip the download to your desktop or a prefered location.

Open up a new Silverlight project and right click on the Solution in Solution Explorer. Select ‘Add’ and then ‘Existing Project’. Now locate the Silverlight Shader Effects project file. This should be: WPFSLFx > SL > SLShaderEffectLibrary > SLShaderEffectLibrary.csproj.user. This should add a new project to your solution.

Now we need to add this new project as a Reference to our project that holds the XAML files, to do this you right click on ‘References’ and then ‘Add Reference…’. In the popup that opens, select the ‘Projects’ tab and select the newly added project, in this case ‘SLShadreEffectLibrary’. Once added you should see the Reference appear in the list as below:

Next we need to add the reference into the C# file of any pages that we want to use the new pixel shaders. So in my example I add ‘using ShaderEffectLibrary;’ to the C# file that accompanies the page MainPage.xaml as seen below (notice I have taken off the SL from the begining of the project name):

Now you can open up Blend 3 and access a whole load of additional pixel shaders. They are located in the same place as the standard Blur and Shadow effects under there own folder.

Grab the files

As always you can grab my example files here.

Back Top

Responses to “Accessing the WPF pixel shaders in Silverlight 3”

  1. Very nice..and very fast. I am hoping to move some of the software shading to hardware with the use of shaders. The Silverlight shipping shaders shade transparent areas. I need to write some shaders to not shade transparent areas but only pixels with A > 0. Your shaders take it to an all new level.

  2. I followed the above steps and I’m still unable to find the new effects in Blend 3.0.1927.0

    Are *all* of the steps included? I’m a designer, not a developer so I’m thinking maybe I didn’t do something that a developer would instinctively know to do?

  3. Ah! Now I feel silly. I didn’t rebuild the project after doing the above steps… once I did that all is well! :)

  4. I’m not to fond of slideshow’s but this program changed my mind. AWESOME!

    paulan g stefanovic at January 11, 2010 7:31 pm
  1. Silverlight Resources Directory Update (07 Aug) (,August 7, 2009)

    [...] Original Post [...]

  2. 6 pixel shader effects | Silverlike - A Free Microsoft Silverlight 3 Directory (,September 27, 2009)

    [...] Gavin Wignal created a sample to demonstrate pixel shader feature in Silverlight 3. The effects include [...]

Leave a Reply

Back Top