Shadow and glow effects in Silverlight

I was looking around for how to create a shadow effect for a Border object in Silverlight. I found Pete Brown’s blog, which made my job very easy. Since I had dark backgrounds, I wanted a white shadow. Simply adding a DropShadowEffect to the Border did the trick:

 <Border>
            <Border.Effect>
               <DropShadowEffect BlurRadius="10" Color="White"  Opacity="0.75" Direction="300" />
           </Border.Effect>
</Border>

 If you are looking for a glow effect, where the entire border is surrounding by the shadow effect inside of just having it in one area, set the Direction property to 0:

 <DropShadowEffect x:Key="BorderShadowStyle" BlurRadius="30" Color="White" Opacity="1" Direction="0" ShadowDepth="0" />

 But what if you have lots of Borders that you want to add this effect to? Then you put it into the App.xaml page, of course:

 <Application xmlns=http://schemas.microsoft.com/winfx/2006/xaml/presentation
             xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml
            x:Class="Testing.App">
    <Application.Resources>
        <DropShadowEffect x:Key="BorderShadowStyle" BlurRadius="10" Color="White"  Opacity="0.75" Direction="300" />
    </Application.Resources>
</Application>

 Then, when creating new Border objects, you simply set the Effect property to the name you defined in the App.xaml file.

 <Border Effect="{StaticResource BorderShadowStyle}"></Border>

 But watch the performance! I added a glow effect to a dozen different Borders with no problems, but added it to one more and the system slowed down significantly when displaying that particular Border and the controls within. Removing that particular glow effect brought the performance back to normal.

References:

  http://10rem.net/blog/2009/03/18/silverlight-3-%E2%80%93-drop-shadows-and-glows-with-pixel-shaders

 http://msdn.microsoft.com/en-us/library/system.windows.media.effects.dropshadoweffect(VS.95).aspx

Advertisements
  1. Tweets that mention Shadow and glow effects in Silverlight « Scott Stoecker's Blog -- Topsy.com

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: