You can do really neat things with Bitmap Effects in WPF. Shadow, Bevel, Outer Glow can all have a great impact on how your application looks. But you should be aware that they don’t come cheap. They are rendered in software, which yields very poor performance. Also, ClearType is turned off on elements that have them applied, so your text becomes blurry.

So, what to do?

  • Abstinence. Now, I’m not really a prude, but in this case, minimizing the use of bitmap effects can significantly improve performance.
  • Apply only on simple Visuals. Probably the most important advice here. If you want to apply an effect on a complex Visual, use layers! Apply the BitmapEffect on a simple Shape (e.g. Rectangle, Path), and use a Grid, for example, to position it below your complex Visual. Do not apply the effect on a Decorator (such as a Border) that contains your Visual, since that will cause the entire visual tree to suffer from the effect.
  • Avoid Animations. Especially on large Visuals, avoid animating the BitmapEffect’s properties, and animating elements that have effects applied on them. TextBoxes, for example, animate the cursor frequently when they are focused, so if an element that has an effect contains a TextBox, it is forced to render itself entirely every blink.
  • Use Bitmaps. Yes, it’s true bitmaps don’t scale like vectors, but in some places they are a very viable alternative.

  • How nine-grid images work

    Use Nine-Grid Images. Have you ever wondered how the themes on XP and Vista work? You can stretch a button as much as you like and it still looks good. They use nine grid images. The idea is very simple: divide the image to nine areas and stretch it as shown in the illustration. The effect is that the proportions of the corners and borders are always maintained. I’ve attached a project with a NineGridBorder class that can be used to draw these images. After I wrote it, I discovered another implementation, so I took the best of both of them. 

  • Vectorize. When exporting from Expression Design to XAML, you have the option to either rasterize (i.e. create a bitmap) or vectorize some of the effects. For example, when applying soft edges to a vector drawing, ED exporter will create a Canvas that contains a few layers with different opacities, which will simulate the effect.
  • Use WpfPerf. This is a great tool that comes with the Windows SDK. You can use Perforator to detect whether your careless colleagues used BitmapEffects or other ill-advised features that may hinder your application’s performance. Check “Draw software rendering with purple tint” to immediately view what causes problems. Try to resize the window or run animations while this is checked.

Attachment: BitmapEffectBegone.rar

Tagged with:

6 Responses to BitmapEffect Begone

  1. So basically why use WPF if you can’t use many of the "cool" features is provides?

    And this begs the question, why did Microsoft even release it like this?  Another experiment that has no future?

  2. aelij says:

    Hardly. Bitmap Effects are a very small part of WPF, and you can get along just fine without them. They may become hardware accelerated in V2, which will make them more usable.

    WPF is a very innovative UI platform. It enables you to deal with immensely complex scenarios with great ease. It feel more "right", since it was designed almost "tabula rasa" with regards to Win32. Give it try, you’ll quickly see what I mean.

  3. I have been trying it for some time now.  It has some pretty significant "gotchas" that really should have been resolved BEFORE releasing:

    1.  Data Binding is worky

    2.  Single-threaded apartment

    3.  No MDI

    4.  No support for compressed images/icons

    5.  No native hooks into Vista

    WPF can do what can already be done with a host of 3rd party controls.  If you look at considerably lesser funded tools on other platforms like OS X, WPF has much work to do to catch up with Apple Quartz API.

    Is there going to be a version 2 of WPF?  Or is this just another technology to be faded out for something completely different with once again NO migration path?

    Currently WPF’s performance in both development mode under VS 2008 IDE and in deployed mode, leave MUCH to be desired — actually not really acceptable from a client perspective.

  4. aelij says:

    I agree some things are missing, but in my opinion the advantages far outweigh the disadvantages. More specifically:

    – Data binding works great, in my opinion. It allows you to truly separate data from UI.

    – STA is bad, I agree.

    – MDI is becoming a thing of the past. It is far less convenient than other options (such as tabs). However, there are 3rd party controls that implemented MDI for WPF.

    You can’t compare Quartz, which is a low(er) level API, to WPF. WPF is a UI library, not a graphics library. (Quartz is comparable to MILCORE, which WPF uses internally, though.) I’m not familiar with any 3rd party tools (on Windows) that can really do what WPF can, in the same amount of development time. Yes, performance can be better, and I believe it will be.

    As for the future, there have already been some improvements to WPF in .NET 3.5, and the next release will continue to improve. WPF is the first non-Win32-based UI platform MS has released, and they’re investing heavily in it.  So don’t give up on it too soon 🙂

  5. Josh Usovsky says:

    Regarding Mr. Cranky’s post:

    1.  "Data Binding is worky"

     I don’t see anything wonky about it.  It’s easy to use, easy to implement in custom objects, and makes a lot of sense.

    2.  "Single-threaded apartment"

     Big deal.  Most of the UI "work" is already done on the GPU anyway, so we won’t see much of a performance boost in rendering.  Free-threading would result in the headaches sometimes encountered in Winforms, and in most situations, there’s no compelling reason for it.  You’re still able to thread to your heart’s content in your own app.

    3.  "No MDI"

      Maybe it’s time to leave 1995 behind.  Just let it go, man.

    4.  "No support for compressed images/icons"

      I think what you mean is compressed PNG.  Yes, that’s a shame, but in most cases it’s not a hardship to use uncompressed ones.

    5.  "No native hooks into Vista"

      The API is available for Windows XP, too.  It’s certainly less convenient, but you can hook all you want with pinvoke.

  6. TrackBack says:

    In my previous post I mentioned the new Zune 3.0 visualizations. I really liked them, so I decided to

Set your Twitter account name in your settings to use the TwitterBar Section.