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)

Simulating Drop Shadows in Silverlight using Expression Design

Pete Brown - 26 January 2008

Silverlight lacks the bitmap effects that are commonly used in WPF applications. Most can be simulated using pngs, but some can also be simulated using xaml. The example below shows a passable (but not perfect) drop shadow effect that relies only on vector content exported from Expression design.

First, open expression design and create a shape that duplicates the extents of the object you want the shadow behind. In this case, a simple rectangle with rounded corners.

pmb_drop_shadow_shadow_shape

Next, change the stroke to be one of the airbrush pens. You can also fiddle with the thickness to see what looks best to you. Something between 12 and 20 is typically plenty. The color used here will be the color of your drop shadow. Feel free to play around with some of the other strokes for other interesting or bizarre effects.

pmb_drop_shadow_stroke

You'll end up with a shape that looks like this:

pmb_drop_shadow_stroke_full

Note that I later changed the width to be 20 instead of the 13.33 seen in this screenshot.

Now, either unhide or add in the remainder of your UI elements and look to see if all is the way you want it. I like to also change the zoom to "actual pixels" when I'm checking my work.

pmb_drop_shadow_complete

Once you're good, export the xaml to Silverlight. The key here is to ensure that you vectorize the brush strokes. Play with the level of detail here until you get something that both looks good, and minimizes the amount of xaml generated. You can certainly go lower than the settings I chose for this example.

pmb_drop_shadow_export_dialog

The resulting xaml will contain a number of paths with varying opacities, simulating a drop-shadow that fades off to the edges.

pmb_drop_shadow_xaml

There are other approaches you could take, such as rasterizing live effects, but this example is a 100% vector approach and no additional asset downloads. You can also get clever with this approach and clipping regions to handle inner glows and other effects.

You can download all the source files from here. You can run it from here.

         
posted by Pete Brown on Saturday, January 26, 2008
filed under:          

2 comments for “Simulating Drop Shadows in Silverlight using Expression Design”

  1. Cleon26says:
    AHA! I hacked around in your solution and came up with an alternative that worked for my needs. Thanks for the inspiration.

    <Grid>
    <Grid.RowDefinitions>
    <RowDefinition Height="1*" />
    <RowDefinition Height="1" />
    <RowDefinition Height="1" />
    <RowDefinition Height="1" />
    <RowDefinition Height="1" />
    <RowDefinition Height="1" />
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
    <ColumnDefinition Width="1*" />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="1" />
    <ColumnDefinition Width="1" />
    </Grid.ColumnDefinitions>

    <Rectangle Grid.Row="0" Grid.RowSpan="6" Grid.Column="0" Grid.ColumnSpan="6" Fill="#FF000000" Opacity="0.1" RadiusX="4" RadiusY="4" Margin="5,5,0,0" />
    <Rectangle Grid.Row="0" Grid.RowSpan="5" Grid.Column="0" Grid.ColumnSpan="5" Fill="#FF000000" Opacity="0.1" RadiusX="4" RadiusY="4" Margin="5,5,0,0" />
    <Rectangle Grid.Row="0" Grid.RowSpan="4" Grid.Column="0" Grid.ColumnSpan="4" Fill="#FF000000" Opacity="0.1" RadiusX="4" RadiusY="4" Margin="5,5,0,0" />
    <Rectangle Grid.Row="0" Grid.RowSpan="3" Grid.Column="0" Grid.ColumnSpan="3" Fill="#FF000000" Opacity="0.1" RadiusX="4" RadiusY="4" Margin="5,5,0,0" />
    <Rectangle Grid.Row="0" Grid.RowSpan="2" Grid.Column="0" Grid.ColumnSpan="2" Fill="#FF000000" Opacity="0.1" RadiusX="4" RadiusY="4" Margin="5,5,0,0" />


    <Border Grid.Row="0" Grid.RowSpan="1" Grid.Column="0" Grid.ColumnSpan="1" BorderBrush="#FF787878" BorderThickness="1" CornerRadius="4" Background="Red" />

    </Grid>

Comment on this Post

Remember me

5 trackbacks for “Simulating Drop Shadows in Silverlight using Expression Design”

  1. Christopher Steensays:
    MSBuild MSBuildContrib January Release [Via: Scott Dorman ] Sharepoint SharePoint Lists as DataTables...
  2. Community Blogssays:
    Pete Brown shows a way to add drop shadows to objects in Expression Design and staying 100% vector, and
  3. Community Blogssays:
    Guess it's late enough that I can't say it's Monday *somewhere*, huh? ... so 'Silverlight
  4. POKE 53280,0: Pete Brown's Blogsays:
    A while back, I showed how to vectorize "drop shadows" in Expression Design. It wasn't perfect