Home > Uncategorized > WPF Effects and Transitions Library Applied

WPF Effects and Transitions Library Applied

October 9, 2008

Last week we posted the WPF Effects Library on Codeplex along with an David Teitlebaum interview and a demo video showing the library in action.

The library includes 23 Effects using the new PixelShader class ShaderEffect available in WPF 3.5 SP1.  Effects range from BandedSwirl, ZoomBlur, InvertColor and my favorite to say, GrowablePoissonDisk.

I have a few Effects screenshots on Flickr, if you’d like to see them.  Greg Schechter has a great blog post talking about Effects in WPF.

The library also includes 33 Transitions in addition to the Effects.   Transitions range from familiar concepts like BandedSwirl, Pixelate and Slide to more exotic types like Crumble, MostBright and Water.

All of the Transitions are based on the abstract TransitionEffect class, which builds on the framework ShaderEffect class adding the concept of two inputs and a progress animation.  This now allows you to use an Effect in a very applicable way.  The Effect is not only applied to an element but you can use the Effect as a way to animate between two elements.  And the animation itself is handled by a WPF Storyboard demonstrating the tight integration between the WPF Framework and Pixel Shaders.  The more you dig into this architecture the more you find out how much work has been done by the WPF team to make using Shaders simple.

Using the WPF Effects Library

In order to start using the WPF Effects Library for your WPF Applications, there are a few simple steps involved listed below:

  1. Ensure you have VS2008 and .NET Framework 3.5 SP1 installed
  2. Install the Shader Effects BuildTask and Templates available on Codeplex.  Grab the .ZIP file and follow the steps in the readme.txt
  3. Download the WPF Effects Library and open the ShaderDemoApp.
  4. You will see "custombuild" warnings when opening the projects. This is due to the Shader Effects Build Task being hooked up.  No worries here, click Load Normally.
  5. Now try to run the ShaderDemoApp and if it looks like it did in the demo video, you’re all set.

Now that you’re up and running you can start using the Effects.  One thing about the ShaderDemoApp that comes with the library is that its great to demo with, but as a starter application it can be a little complex.

Let’s walkthrough a very simple application called TransitioningImages that makes use of a TransitionEffect to navigate images in a folder.

TransitioningImages Screenshot

This is a very simple application where all of the action happens within the Window1 class.

  • Choose a Folder – After the user selects a folder using the OpenFileDialog, the code retrieves all of the .jpg images from the folder and instantiates a new collection of BitmapSources for the custom PhotoSlideShow class.  The initial image is then loaded into an Image element.
  • Navigating the Images – Hitting the Next or Previous buttons then cycle through the PhotoSlideShow image collection and cue a Transition to move from one image to the next.
  • Transition Applied – A new Transition Effect is instantiated (the default is a RadialWiggle (pictured above)) along with a DoubleAnimation that animates the Progress of the Transition until completion.

One of the very cool things to point out here is that we are Transitioning between images which is an obvious choice.  But as the ShaderDemoApp shows the multiple inputs for the Transition are Brushes and in WPF we have an array of Brushes to choose from.  One of those Brushes is the VisualBrush which allows you to take any Visual element including Buttons, MediaElements and the like allowing you to create some really interesting applications using these Effects.

Below is a link to the source code for the TransitioningImages application.  The executable will run with WPF 3.5 SP1 installed, but in order to modify and build the application you’ll need to follow the installation steps above.

If you use the Effects Library in your own application, let us know.  We’d love to hear about how well they worked for you and see what kind of applications you’ve come up with.

%d bloggers like this: