Thursday, July 23, 2009

Using a Border for a Glow Effect in Silverlight 3

by Adam Kinney via Adam Kinney on 7/23/2009 8:24:00 PM

One of the greatest new graphic features in Silverlight 3 is support for Pixel Shaders. The framework includes two common shaders DropShadow and Blur, but you can also build your own custom shaders. For a custom shader walkthrough, check out Andy Beaulieu’s GrayScale Shader tutorial.

Now the trick here is that although you can write your own, you can’t yet write custom multi-pass shaders, like DropShadow and Blur. And this need comes up when people are looking for other common effects like Glow.

Luckily, you can workaround this using the following two methods.

In the below sample, I’ve demonstrated a workaround using a Border behind the element you wish to make Glow.  This works by manipulating a Linear Gradient Brush to have transparent endpoints and then applying an Opacity Mask with transparent endpoints on the opposite axis of the Brush.

This works just fine for rectangular shapes and provides a lot of flexibility in designing the Glow effect.

For irregular shapes and simplicity, you can also use the DropShadow effect by setting the Direction and ShadowDepth to 0, BlurRadius to 100 and changing the color to one that contrasts appropriately with the background.

While I was working on the sample, I was reminded of those kooky forest spirits from Princess Mononoke, so I whipped one of those out as the irregular shape test. Enjoy the Shake and rattle!

See the GlowEffect sample in action

Download Source – (completely written in Blend using Behaviors)