Matthias Shapiro

developer/integrator with IdentityMine, infovis enthusiast

WPF Drop-Shadows on The Cheap

One of the questions I get most often from designers and almost never from developers is:

How can I get drop shadows into my application without killing my performance?

 It is, of course, easy as punch and pie to get drop shadows into your application. You can just use the Bitmaps Effects panel in the Appearance section:

 OrdinaryDropShadowing

For the love of God, please do not use the Bitmap Effects in the Appearance section!

If any developers found out that I told you to use BitmapEffects, they would hunt me down and cut off my fingers. This is because, while the Bitmap Effects in WPF are all sorts of cool, they make your computer break down into uncontrollable sobbing. Bitmap Effects hog system resources by requiring software rendering for render-heavy effects. There is no better way to slow down a perfectly good application than to give every other element a drop shadow.

But, what if you really really want to?

That is why there is this handy little thing called a “SystemDropShadowChrome”. The way to use it is to put the following namespace into your Window tag:

xmlns:dropShadow=”clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero
 
And then take the thing you want to have a drop shadow and wrap it in a SystemDropShadowChrome like so:

<dropShadow:SystemDropShadowChrome>
      <Grid x:Name=”MyElement/>
</dropShadow:SystemDropShadowChrome>

So what are we losing when we do this?

Normal bitmap dropshadows give you the following options:

OrdinaryDropShadowOptions

And they conform to the item to which they are attached. It could be bannana-shaped… you would get a banana-shaped drop shadow.

But with SystemDropShadowChrome, you get a rectangle and the ability to choose the color of your drop-shadow and the corner-radius. That’s it. But that gives you a decent amount of room to work with. Consider what Robby Ingebretsen did in his example on SystemDropShadowChrome (magnified 2X):

EasyDropShadowExamples

We’ve got darker drop shadows, lighter drop shadows, colored drop shadows and a drop shadow with an irregular corner radius. This is flexible enough for pretty much any standard application control. Used in templates, you could even use this to give drop shadow to just one part of the control. In fact, my attention was first drawn to the use of the drop shadow in the Popup part of the ComboBox control.

ComboBoxDropShadowExample

You can change the drop shadow color using a standard color picker in the “Miscellaneous” section of the SystemDropShadowChrome properties in Blend:

DropShadowColorPickerExample

This is also where you can find the “CornerRadius” property. In the XAML, they will look like this:

<dropShadow:SystemDropShadowChrome CornerRadius=”3,13,3,13Color=”#71000000>
      <Grid x:Name=”MyElement/>
</dropShadow:SystemDropShadowChrome>

With some creative styling, we can actually change the direction of the drop shadow. It’s easy enough to do if you’re just hacking away, but if you plan on using it seriously in an application, it requires some forethought and organization, so I’ll go into that in detail in a full post on changing the SystemDropShadowChrome direction. (coming soon)

This entry was posted in Blend, WPF, XAML and tagged , , , . Bookmark the permalink.

0 Responses to WPF Drop-Shadows on The Cheap

  1. Deavon Barlow

    Honestly, is Microsoft planning on implementing any hardware accelerated bitmap effects? I don’t understand why hardware accelerated drop shadows couldn’t be feasible. I’ve been working on an application which will ship on 100 million PCs worldwide, and am looking for expert solutions to common WPF problems.

    Thanks.

  2. Deavon… http://weblogs.asp.net/scottgu/archive/2008/02/19/net-3-5-client-product-roadmap.aspx

    DropShadow and Blur will be hw accelarated soon – hopefully soon enough for you… Choices must be made during releases, certainly with such a large audience you have been in the same position.

  3. Matthias Shapiro

    Thank God for that news release. I now feel like there is little point in completing the second part of this post.

  4. Derek

    I’m having trouble getting this to work in our application. We have a floating panel to do searches, from which we had to remove the bitmapeffect dropshadow for the usual perf reasons. But using the solution above, the shadow draws on top of another panel, and in general doesn’t behave per the example.

    In summary, we have a MainWindow.xaml, which is a container for various other user controls for application content. One of these is a canvas holding a search control. When I put the simpledropshadow around the Canvas, in the same row and column and with the same z-order, I don’t get anything. If I don’t specify the row and column, it draws over the entire left side of MainWindow; if I move the z-order for the shadow lower than the canvas, it doesn’t draw. Any suggestions?

    Also, you forgot to mention in your example that you must include a reference to Presentation.Luna in your project to find the simple dropshadow.

  5. Derek

    Never mind, I’m a dunce. (Well, I’m the IA who helps with coding. :) ). Putting the dropshadow around a border inside the canvas works great.

    Thanks for this post–these panels would look really bad without a drop shadow, and this solution works great.

Leave a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>