Adding a glow in Silverlight with the DropShadowEffects class

I wanted to have a mouse-over effect for my Path – I mean, who doesn’t? Ladies love guys that can dynamically add Silverlight glow effects as much as they like guys that can use the ternary operator. So I’m going to tell you how to improve your love life.

First, the XAML. Notice the use of MouseEnter and MouseLeave events on my Path object:

    <Grid x:Name=”LayoutRoot” Background=”White”>
        <Path x:Name=”ScottPath” Stroke=”Black” Data=”M 20,100 C 10,300 300,-200 300,100″ MouseEnter=”Path_MouseEnter” MouseLeave=”Path_MouseLeave” />
    </Grid>

Oh yeah, that’s right – I’m using a Bezier curve. This keeps getting better.

Now into the code behind we go. Before you enter the wonderful world of DropShadowEffects, you’ll need to add a reference to the right library:

using System.Windows.Media.Effects;

And away we go:

        private void Path_MouseEnter(object sender, MouseEventArgs e)
        {
            DropShadowEffect dropShadow = new DropShadowEffect();
            dropShadow.BlurRadius = 10;
            dropShadow.Color = Colors.Purple;
            dropShadow.Direction = 0;
            dropShadow.Opacity = 1.0;
            dropShadow.ShadowDepth = 0;

            ((Path)sender).Effect = dropShadow;
        }

        private void Path_MouseLeave(object sender, MouseEventArgs e)
        {
            ((Path)sender).Effect = null;
        }

What I have going on is that when the mouse hovers over the Path object, I create an instance of the magical DropShadowEffect class, set all the variables that make me feel happy and wonderful, and add the DropShadowEffect  to the Effect property of the Path object. And when the mouse leaves the path, I set the Path.Effect to null to get rid of the effect.

No worries, no fuss, just an awesome purple glow on your line.

Advertisements
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: