Welcome to Pete Brown's 10rem.net

First time here? If you are a developer or are interested in Microsoft tools and technology, please consider subscribing to the latest posts.

You may also be interested in my blog archives, the articles section, or some of my lab projects such as the C64 emulator written in Silverlight.

(hide this)

Simple Xaml Drop Shadows in Silverlight 2

Pete Brown - 03 April 2008

A while back, I showed how to vectorize "drop shadows" in Expression Design. It wasn't perfect (especially at the start and stop points of the line), but it was quick, easy, and didn't require any additional png files.

Since then, Expression Design 2 has been released in Beta form, and the Expression Design team dropped the ability to vectorize the brush strokes. From speaking with them, I understand and agree with their prioritization of other features, but it is still a bummer to see a potentially useful feature go away.

imageI need basic rectangular shadows on a project I'm working on. I didn't want to resort to using 8 png files to cover the whole rectangle so I decided to work up a quick way to handle shadows in xaml.

First, I put together a simple linear shadow, which you can see to the left. I have included the xaml for that below.

The approach is really simple: draw a bunch of adjacent lines with diminishing opacity. You can play with the colors and the opacity to get the effect you are looking for.

Xaml for a Simple Line Shadow

    <Line Canvas.Left="0" Canvas.Top="0"  
          X1="250" X2="250" Y1="10" Y2="200" 
          Stroke="Black" Opacity="0.50" StrokeThickness="1"/>
    <Line Canvas.Left="0" Canvas.Top="0"  
          X1="251" X2="251" Y1="10" Y2="200" 
          Stroke="Black" Opacity="0.40" StrokeThickness="1"/>
    <Line Canvas.Left="0" Canvas.Top="0"  
          X1="252" X2="252" Y1="10" Y2="200" 
          Stroke="Black" Opacity="0.20" StrokeThickness="1"/>
    <Line Canvas.Left="0" Canvas.Top="0"  
          X1="253" X2="253" Y1="10" Y2="200" 
          Stroke="Black" Opacity="0.10" StrokeThickness="1"/>

imageI was reasonably pleased with the result with the single line test, given the minimal effort it took, so I took a stab at rectangular shadows. You can see the result of that to the left.

I happened to use borders. You could easily use a Rectangle, border just happened to be what I was messing around with at the time. In many cases, a Rectangle or other shape will be more appropriate.

The result here looks fine too, as long as you don't scaletransform it. When you apply a transform, you will start to see banding due to the lines. In those cases, you might actually get better results just by biting the bullet and going with the png method, allowing Silverlight to scale and blur the pixels.

Note that you'll need to change the radius for each, as well as decreasing the x and y positions by 1 and increasing the width and height by 2.

Xaml for the Rectangle Shadow

    <Border CornerRadius="10.0" Canvas.Left="4" Canvas.Top="4"  
            Width="100" Height="150" BorderThickness="1" 
            BorderBrush="Black" Opacity="0.50" />
    <Border CornerRadius="11" Canvas.Left="3" Canvas.Top="3"  
            Width="102" Height="152" BorderThickness="1" 
            BorderBrush="Black" Opacity="0.40" />
    <Border CornerRadius="12" Canvas.Left="2" Canvas.Top="2"  
            Width="104" Height="154" BorderThickness="1" 
            BorderBrush="Black" Opacity="0.20" />
    <Border CornerRadius="13" Canvas.Left="1" Canvas.Top="1"  
            Width="106" Height="156" BorderThickness="1" 
            BorderBrush="Black" Opacity="0.10" />

If you have an arbitrary shape, defined by a path, it will be more challenging to create a workable drop shadow.

You can take the concepts here and get even better results by playing with the thickness and positions (fractional positions and additional lines should give a smoother line when transformed).

Ideally Silverlight will gain the effects capability of WPF and/or Flash in the future. Until then, we'll just have to fake it :)

posted by Pete Brown on Thursday, April 3, 2008
filed under:      

4 comments for “Simple Xaml Drop Shadows in Silverlight 2”

  1. Jamiesays:
    Thanks for the guide, Pete!

    For anyone interested, I took what Pete did and modified it slightly to allow the borders to be nested within one another. This way you don't need to set the width or height on any of the border objects.

    The code can be found <a href="http://rdaarchitecture.blogspot.com/2008/10/creating-drop-shadows-in-silverlight.html">here</a>
  2. Douglassays:
    Does the BitmapEffect exists in Silverlight ?

    I'm using it for dropdown shadow in my WPF Windows applications like this :

    <DropShadowBitmapEffect Color="Black"

Comment on this Post

Remember me

2 trackbacks for “Simple Xaml Drop Shadows in Silverlight 2”

  1. Simple Xaml Drop Shadows in Silverlight 2says:
    A while back, I <a href="http://community.irrit
  2. Christopher Steensays:
    ASP.NET Client Side Templating with jQuery [Via: Rick Strahl ] WPF Unwanted Multiple ClientBin Sub...