POKE 53280,0: Pete Brown's Blog

Simple Xaml Drop Shadows in Silverlight 2

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.

I 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

<Canvas>
    <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"/>
</Canvas>

I 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

<Canvas>
    <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" />
</Canvas>

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 :)