Easy Drop Shadows on Text in Silverlight 3

Before Silverlight 3, you had to do perform some less-than-ideal tricks to achieve a drop shadow effect on your text.  In fact, the most decent trick I could find had to rely on the TextBox control and not the TextBlock control since you cannot re-template a TextBlock control.  But even that technique was not optimal since you couldn’t get a truly smooth shadow.

Well, that was then an this is now!  In Silverlight 3, you can do the following:

<TextBlock 
     Foreground="White" 
     Text="Lorem ipsum dolor sit amet" 
     FontSize="50" 
     FontWeight="Bold">
     <TextBlock.Effect>
          <DropShadowEffect Color="Black" BlurRadius="5" />
     </TextBlock.Effect>
</TextBlock>

And Presto!

DropShadowEffect

Just look how much easier it is to read the first line over the second line!  Also notice that there are a few other properties that you can specify if you desire:

  • BlurRadius – Controls the radius of the blur.  A larger number would indicate a softer shadow.
  • Color – The color of the shadow (or glow if the color is appropriate).
  • Direction – The angle of the drop shadow (315 degrees is the default).  The angle increases in a counter-clockwise direction.
  • Opacity – A double value indicating the percentage of opaqueness.
  • ShadowDepth – Indicates how far the shadow should appear below the text.  This property is used to control how far away the object appears from it’s backing surface.

Of course, you can apply effects to any UIElement, it just so happens that drop shadows on text is really, really, useful!


Feedback

# re: Easy Drop Shadows on Text in Silverlight 3

Gravatar Is it hardware accelerated or slow as a snail? 3/31/2009 10:23 AM | Blurry

# re: Easy Drop Shadows on Text in Silverlight 3

Gravatar Awesome tip. Lifesaver for a newbie. 3/31/2009 10:32 AM | g

# re: Easy Drop Shadows on Text in Silverlight 3

Gravatar My money is on the snail... 3/31/2009 2:37 PM | Tom

# re: Easy Drop Shadows on Text in Silverlight 3

Gravatar I'm pretty sure pixel shaders are rendered by the CPU. 3/31/2009 8:50 PM | pbrooks

# re: Easy Drop Shadows on Text in Silverlight 3

Gravatar You and your fancy Silverlight 3 tricks ;)

BTW Pixel shaders are software rendered currently (as is the case in Flash as well). From what I understand it is a bit tricky to enable GPU support for shaders.

4/15/2009 11:54 AM | bcunningham

Comments have been closed on this topic.