SystemDropShadowChrome

During a training session this week, someone asked about creating a dropshadow. That reminded me of a useful, but somewhat hidden way of creating decent looking dropshadows in WPF without paying the price of using BitmapEffects.

As you know, the most straightforward way to add a dropshadow to any content in WPF is to apply the DropShadowBitmapEffect. That’s a very cool way to do it and it makes a pretty nice dropshadow (and offfers a fair amount of customization). Unfortunately, though, there are some pretty serious performance tradeoffs to using BitmapEffects and because of that, we almost never use them.

We ran into this perf issue when we were creating the dropshadow for a lot of the system controls. Most of the popup controls (Menu, ToolTip, ComboBox, etc.) need a dropshadow and (much to my dismay) BitmapEffect just wasn’t cutting it. That’s where SystemDropShadowChrome enters the story.

We created it to emulate the system drop shadow but in a performant way. It’s a decorator (like Border) that takes one child. It basically draws a fuzzy-edged rectangle and then places the content on top it (with an offset). If your content happens to be a rectangle things look pretty good. Even if your content is rectangle with rounded corners, you can pull off a pretty good effect. If your content is, say, an ellipse, well, you’re out of luck. Here are some examples:

SystemDropShadowChrome

You only get two properties: a Color property (which actually is a Color, not a Brush) that let’s you change the color of the shadow, and a CornerRadius property that you can use to round off the corners on the dropshadow.

The good news is that this thing has pretty good perf. It’s just a bunch of drawing commands and gradients and all of it gets rendered in code in the OnRender override of the control.

SystemDropShadowChrome is in the Microsoft.Windows.Themes namespace. We tucked a lot of little gems away in this namespace. Basically anything that we needed to pull off a visual effect in the system themes, but which didn’t make sense as a first-class element in the platform, got tucked away in there. Everything is available for your tinkering pleasure. You’ll have to import the namespace though (and add a reference to one of the theme assemblies).

If you want to experience SystemDropShadowChrome in person, you can download a project here.


Published

Discussion

Previous