Glow Behavior

by andy@andybeaulieu.com via Andy's Blog on 9/18/2009 8:38:00 PM

Some weeks ago, Adam Kinney wrote about a nice workaround for creating a Glow Effect in Silverlight using a DropShadowEffect. Since Glow is a common effect, I thought it would be nice to wrap this into a Behavior. Please note, you wouldn’t want to use this behavior in any kind of animation – because the DropShadowEffect is currently rendered in software and will quickly bring a CPU to its knees.

DOWNLOAD SOURCE

Creating the Glow Effect in Code

To mimic a Glow effect in XAML, we use a DropShadow Effect with ShadowDepth and Direction equal to zero:

<TextBlock Text="Glowing Text" Foreground="White" FontSize="16" FontWeight="Bold">
   <TextBlock.Effect>
        <DropShadowEffect Color="#FFFFFEBB" ShadowDepth="0" Direction="0" BlurRadius="100"/>
    TextBlock.Effect>
TextBlock>

We can do the equivalent in code like so:

DropShadowEffect dsEffect = new DropShadowEffect();
dsEffect.Color = _glowColor;
dsEffect.Direction = 0;
dsEffect.ShadowDepth = 0;
dsEffect.BlurRadius = _glowSize;
txtBlock.Effect = dsEffect;

When we apply the Glow Behavior to, say a Rectangle and TextBlock, we get something like this:

Creating the Glow Behavior

1. Create a new Silverlight application (or Silverlight Class Library)

2. Add a Reference to System.Windows.Interactivity. This is part of the Blend 3 SDK, which is installed with Blend 3 or available as a separate download here.

3. Add a new Class file, which inherits from Behavior, and implement like so. Behaviors like this are really simple to create. The AssociatedObject property is the element that the Behavior is dropped on, and you simply handle the Loaded event to tie in the behavior you want. Note that the Category and Description attributes add support in Blend for Tooltips and Categories in the Properties Panel.

public class GlowBehavior: Behavior<FrameworkElement>
{
    protected override void OnAttached()
    {
        base.OnAttached();
        this.AssociatedObject.Loaded += new RoutedEventHandler(AssociatedObject_Loaded);
    }

    private void AssociatedObject_Loaded(object sender, RoutedEventArgs e)
    {
        // add in the DropShadow Effect
        DropShadowEffect deffect = new DropShadowEffect();
        deffect.Color = _glowColor;
        deffect.Direction = 0;
        deffect.ShadowDepth = 0;
        deffect.BlurRadius = _glowSize;
        this.AssociatedObject.Effect = deffect;
    }

    private Color _glowColor = Color.FromArgb(255, 255, 250, 190);
    [Category("Glow Effect"), Description("The color of the Glow.")]
    public Color GlowColor
    {
        get
        {
            return _glowColor;
        }
        set
        {
            _glowColor = value;
        }
    }

    private int _glowSize = 20;
    [Category("Glow Effect"), Description("The size of the Glow.")]
    public int GlowSize
    {
        get
        {
            return _glowSize;
        }
        set
        {
            _glowSize = value;
        }
    }
}