SpriteHand
Module Border
  Glow Behavior
Module Border
Location: BlogsAndy's Blog    
Posted by: host 9/18/2009 3:38 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;
        }
    }
}

For more fun with Behaviors in Blend, check out the Physics Helper Library on Codeplex.

Permalink |  Trackback

Comments (3)   Add Comment
Re: Glow Behavior    By Anonymous on 5/2/2013 3:28 AM
Hi everyone! While inspecting laptop repair customer service multinational's profile over the internet I happen to came across the andybeaulieu; And for me it's among the best blog post I have gone through so far.

Re: Glow Behavior    By Anonymous on 9/20/2009 10:50 PM
Physics Hellper is Wonderful and it's simple to use.thanks, andy.

Re: Glow Behavior    By Anonymous on 12/27/2009 11:23 AM
Merci pour l'article intéressant! Votre blog est devenu pour moi une sorte de manuel!
jeux de casino en ligne


Title:
Comment:
Add Comment   Cancel 
Module Border Module Border
Module Border
  Subscribe
Module Border
RSS   Twitter
Module Border Module Border
Module Border
  Diversions
Module Border

TALKING RAGDOLL
This Windows Phone 7 App was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine. It gets interesting when you import your friends photos and have your way with them!

MORE INFO



DROPPYPOP
This Windows Phone 7 game was created using Silverlight, the  Physics Helper Library,  and the Farseer Physics Engine.
DEMO

MORE INFO



BOSS LAUNCH
This physics game won first place in the Server Quest Contest. Created using Silverlight 2, the Physics Helper Library,  and the Farseer Physics Engine.
PLAY IT

MORE INFO



DESTROY ALL INVADERS
A scrolling shooter game where the objective is to destroy the invading UFO's flying over a neighborhood of your choosing. Imagery provided by Microsoft Virtual Earth. Created using Silverlight 2.
PLAY IT

INFO AND CODE



PHYSICS HELPER DEMOS
These demos were created for the Physics Helper Library, which makes it easy to create physics games and simulations using Expression Blend, Silverlight, and the Farseer Physics Engine.
PLAY IT

INFO AND CODE



HOOK SHOT
This little basketball game took first place in the TeamZoneSports Silverlight Contest. Created using Silverlight 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



SORT THE FOOBARS
A game where you need to sort the good foobars from the bad ones. Created using Silverlight 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



POLYGON PHYSICS DEMO
A demo showing polygon physics where the user draws physics objects with the mouse. Created using Silverlight 2 and the Farseer Physics engine.
PLAY IT

MORE INFO



SILVERLIGHT ROCKS!
Destroy the asteroids before they destroy your ship! Created using Silverlight 2.
PLAY IT

INFO AND CODE



FISH GAME
A simple game of harpoon-the-fish. Written using the AJAX Sprite Toolkit.
PLAY IT

INFO AND CODE

Module Border Module Border
Module Border
  Search_Blog
Module Border
Module Border Module Border
Module Border
  Blog_Archive
Module Border
Module Border Module Border
Copyright (c) 2013 andy.beaulieu.com - Login