3 Easy Steps to WPF Pixel Shaders. Template Project and Five Shader Samples (Twirl UI, Light, Blobs, Grayscale and Wave reflection)

In This Tutorial:

·         Template project and simple 3-step instructions to kick start WPF pixel shaders

·         Introduction to Pixel Shaders in WPF

·         Source Code for 3 pixel shaders

·         Links to 2 pixel shader sources on the web

Using Shaders in WPF: The Easy Way

Pixel shaders are a great way to enhance your WPF program in many ways. I show just few of the possibilities here and provide a good framework to start developing your own effects.

3 steps to kick start you with WPF pixel shaders:

1.      Install DirectX SDK

2.      Download and open the Shader template project from Nikola’s site: http://www.nokola.com/sources/ShaderEffectTemplate.zip

3.      Start coding your effect in MyEffect.fx

Next: Read the Beginner’s Presentation to WPF Pixel Shaders


Prerequisites: DirectX SDK from Microsoft.com

View the Beginner’s Presentation to WPF Pixel Shaders here: http://blogs.msdn.com/nikola/attachment/8924657.ashx

Download the template project here: http://www.nokola.com/sources/ShaderEffectTemplate.zip

Download these Pixel Shader samples: Twirl UI, Blobs and Lights: http://www.nokola.com/sources/ShaderEffects.zip Note that you have to enable each effect by itself for best view J Just comment out the other 2 effects when playing at the sample.

Check out these 2 cool pixel shader tutorials:

Grayscale effect: http://bursjootech.blogspot.com/2008/06/grayscale-effect-pixel-shader-effect-in.html

Wave reflection effect: http://rakeshravuri.blogspot.com/2008/07/wave-reflection-shader-effect-in-wpf.html


 Hope you like it!

Beginner’s WPF Pixel Shaders.pptx

Comments (15)

  1. uditha says:


    cant we add pixel sheders using xna libraries?

    if so that would be realy grate…

  2. nikola says:

    Hi uditha, I found a response for your question on http://channel9.msdn.com/shows/Continuum/PixelShaderParts/ :

    "XNA is not compatible with WPF just yet.  Via

    reflection you can make it work, but with Vista requiring a 9Ex device for performance, you have a hard time getting 100% out of your hardware.  I have documented it on my blog. link: http://jmorrill.hjtcentral.com/Home/tabid/428/EntryID/259/Default.aspx "

  3. Nikola Mihaylov explains what a WPF Pixel Shader really is and the code involved and making one. …

  4. I’ve been quite content up until today to say "I can’t write Pixel Shaders" and "I don’t know what High…

  5. We just published a codeplex project with source for > 25 Pixel Shader effects and ~35 Transition

  6. a says:

    Hey… FYI your TEMPLATE PROJECT link is dead (404 error)


    I cant wait to get it. My shaders get an Instantate error…

  7. nikola says:

    Thanks for the note – I fixed the template project link!

  8. Hi,

    Thanks for this useful post.

    What’s important about deploying a wpf project which used pixel shader? I mean we should have DirectX on the client? Are we supposed to compile the .fx file on each client too or just we can use the generated .ps file?

  9. nikola says:

    Hi Ali,

    For deployment you just need DirectX on the client and you can use the generated .ps file without having to recompile it.


  10. Hi again,

    I want to create a Line Art effect but as I got vertex shader is not supported by WPF now. Is there a way to create Line Art effect by Pixel Shader? Any idea?


  11. nikola says:

    Hi Ali,

    I think you might be able to do something with edge detect filters in pixel shader only.

    Check this out for the filters:



    I haven’t done it before, so I don’t know if it would work – seems like it should though.

    Sorry for the late response! I just realized I haven’t been receiving blog notification for quite a while…

  12. Dear Nikola,

    Thanks for your response. I actually find a way to create the Line Art effect by the help of http://brooknovak.wordpress.com/2008/09/16/simple-image-filters-written-as-hlsl-pixel-shaders/

    post and I just placed this link here for others if they have a same issue.



  13. nikola says:

    oh my! this is so coooll!! thanks a lot Ali!

    I really like the shader effects

  14. Alex Roo says:

    Thank you very much, Nikola.

    This really works

    (however I had some troubles with russian letters in project directory name – DirectX SDK didnt recompile the shaders).

    One more question iam interested in:

    can i use shaders to render into a bitmap (better – to a texture)?

    I want to use it after as ImageSource.