IanG on Tap

Avalon can apply a variety of effects to images before displaying them. They support a useful range of common bitmap effects such as blur, sharpen, tinting, and conversion to greyscale. One I particularly like is ImageEffectGlow - this applies a glowing halo to the bitmap of your choice. This provides you with a subtle way of drawing attention to a UI feature: you can make it light up, rather than having to do something as crass and obvious as changing its colour or making it blink.

Robert Wlodarczyk, has written a couple of blog entries on Avalon image effects recently. The first shows the standard image processing type effects, and the second shows the ImageEffectGlow. (It uses a slightly strange combination of colours though, so it doesn't look like the image is 'glowing' as such. But that's hard to achieve when the background is already white - how do you make something look like it's lighting up when it has been drawn on a background that is already as bright as possible? Fortunately he has generously provided the source, so you can mess about with it. It will look a little more glow-like on a dark background.)

Much as I like these examples, there is a potential use for image effects which these articles don't address.

When I discovered the ImageEffectGlow class, the very first thing I tried to do was apply it to a fragment of XAML to see what it would look like. Unfortunately, it turns out you can't do that in the PDC Longhorn build... All of Robert's examples show the effects being applied to bitmaps rather than markup. (His example programs are written in XAML, but the only things he applies the effects to are bitmaps.) And that's all the current build supports.

Now you might leap to the conclusion that I simply don't understand the distinction between vector graphics and bitmaps, because if I did, I wouldn't be trying to apply image processing effects to vector-based markup. However, it's not really such an unreasonable thing to want to do - vector graphics have to be rasterized at some point in order to make them appear on screen. (I'm fairly sure that Windows doesn't support vector graphics displays...) So it's technically entirely possible to apply a bitmap effect to a chunk of vector-based markup. The markup rendering system simply has to apply the effect after it has rasterized graphics but before it puts it on the screen.

SVG lets you do this with its filter effects support, so I thought it was likely to be possible in XAML too. But after much experimentation, I couldn't find a way of doing it. Not only can you not apply a filter to a block of markup, there doesn't even seem to be a way of telling Avalon to render your markup into a bitmap so you can mess with it.

At the PDC, there was a talk on the Avalon rendering pipeline. (I think it was one of Greg Schechter's talks, but I could be wrong.) The talk also discussed one of the features that will be added in later versions. In a future build, Microsoft are planning to add a facility that lets you take animated XAML and generate streams of images at the frame rate of your choosing. (You would then most likely feed these into a video codec of some kind to generate a compressed video stream.) This seemed to be a solution to my "How do I convert markup into a bitmap so I can start applying effects to it?" problem, albeit a slightly over engineered one: I only want one frame, not an entire video sequence! So in the Q&A session, I asked if this was the way to apply an ImageEffect to a piece of XAML.

I was delighted by the answer. I was told that although this would certainly work, the plan is to support the application of image effects to markup directly. So in some future build, Avalon will happily do the work for us - we won't need to render stuff into some bitmap and then apply the ImageEffect(s) of our choosing. We will just be able to apply effects to markup like you can today in SVG.

Yay!