viksoe.dk

Vista Photo Gallery

Vista Photo Gallery


This article was submitted .


This is a recreation of the Windows Vista Photo Gallery application's user-interface. It is not a functional Photo application, but merely an attempt to see what UI elements exactly lie behind this tool supplied with Windows Vista Ultimate.

There are a few additional applications packed on your Vista Ultimate DVD. The taskbar presents you with Photo Gallery, Movie Maker; and DVD Maker. At first sight they look like they use a common theme, with a black/grey-shaded ToolBar, moderate use of glass-effect, and WMP-styled navigation knobs. So I imagined that this would be a common theme for native Vista applications (or tools, at least). I am probably wrong.
If you compare them closely you'll find that their UI aren't exactly very consistent: First of all they are written on top of different frameworks: ATL, WTL and pure C++ (no, none of them are .NET), and there seems to be no general library or use of theme (msstyle:taskbar) for pushing the visual effects. If we have to nitpick, none of them manage get the rendering of the Rebar/Toolbar to match. Having the Help button on the Toolbar's right side seems to be at debate. And obviously the Photo Gallery goes out of its way to provide flashy buttons that fades between button states - but in turn looks Vista non-standard themed in several places.
It is perhaps unfair to compare the tools if they were in fact not intended to have a common theme - even if from a casual user's perspective it would have been expected.

A closer look

The Photo Gallery does however use a number of interesting visual ornaments, so I decided to have a closer look at creating an application with a similar look. There is little functionality working in the sample, but it does load a couple of images from your My Pictures folder.

The Photo Gallery sports a navigation bar with Vista Aero glass-look. Glass on Vista is indeed pleasant to work with. The DWM Composition APIs are few in numbers but powerful in effects.
I would hesitate to actually add glass to a production application, as I don't think the glass-look will last many generations in Windows. Microsoft will have to up the ante on 3D effects in the desktop, especially if they're going to continue the "Wow. It looks nice, but doesn't really have much new functionality"-strategy of selling Windows. And glass simply doesn't play very well with 3D effects.

Photo Gallery samples Photo Gallery uses a rather large array of custom rendered buttons. Most of them look quite nice, while a few look misplaced, e.g. the Options button next to the Search field has a curious Windows XP appearance.

Photo Gallery doesn't manage to break free of the Windows window hierarchy limitations. There are some delicate effects in the Info Panel when you hover above a label, the background impressively shines through the alpha-blended animation. It's very nicely done, and a complex scheme of WS_EX_LAYERED code or windowless painting of everything could be conceived for such an effect. But actually the Photo Gallery uses a traditional child/window layered architecture. This was a little surprising as it means fighting the problem of child windows not capable of being transparent. The Photo Gallery seems to handle this by cleverly copying the background image of the parent windows before it does any rendering.

Besides that, Photo Gallery lets you set the thumbnail size by using the Zoom button and a popup slider to show off that it's efficient code. It also makes excessive use of cross-fading between button states and even internal view states. Just try to switch the list to tile mode and back to thumbnail mode. Bling.

Lastly, it's probably worth mentioning that the real Photo Gallery needs to consider how to deal with hundreds of images on the canvas - and my sample doesn't even make an attempt to handle any of that. The sample would grow much in complexity I'd imagine, to have that kind of support.

The Controls

There are a number of controls in Photo Gallery that appears to be standard Windows controls, but apparently are not.

One of them is the ListView control, which at first inspection looks like a regular ListView, displaying a number of image thumbnails sorted in groups. However, the Group functionality seems to be extended. It allows you to open/close the groups with rebar-style animation, and the Group header has a grey color. None of this is supported by the native Vista ListView control (LVGROUPMETRICS is still defunct in Vista).

Photo Gallery also has the standard Vista Search filter. It sits there in most of the tools supplied with Vista.
The Search field in Vista gets all of its glitter from a special subclass in the Theme API. It's not like Microsoft goes to any great length to document how it works, but you can find some completely useless documentation on MSDN in the Using Theme Subclasses article.

If you look at the Photo Gallery with the SPY++ tool, you'll notice that most of the buttons in the application are really of the same class. All the buttons that nicely fade between states have the Photos_ButtonEx Window class. In fact most of the buttons are drawn with pre-rendered bitmaps for the 4 state (disabled, enabled, hot, pressed).
Vista does provide a new native API for doing this kind of state animation. I'm not using it for button rendering at this point in my sample because I want to have some support for WinXP too - and you can easily emulate the new cross-fade with the regular APIs (just have a look at my FadeButton control from 2002 or the more recent AlphaBlend API samples).
There are two versions af all the graphics embedded in Photo Gallery's resource. I'm guessing that one version is for high DPI/resolutions - something we'll all have to deal with in the years to come.

All images are stored as PNG files. BMP files do support 32bit with alpha channel, but no tool I have found will properly save or work with them (no, even the MSPaint hack stopped working on Vista). Perhaps this is why Microsoft also chose the PNG format internally for the Photo Application.
To load PNG files, we'll have to use GDI+. I use GDI+ in a number of cases in this sample as it also helps generating anti-aliased thumbnails and is very handy when working with image Exif properties and alpha-rendering.
It's important to note that using GDI+ for all your rendering (at WM_PAINT) is just a very bad idea as GDI+ will quickly slow your application down to a crawl. Intelligently caching bitmaps for use with GDI or in regular ImageList controls will yield the best performance as things are now.

The TreeView in Vista is now multi-item selectable. If you want to see how to do this in other versions of Windows, have a look at my old MultiSelect Tree View control sample.

Incidentally this sample compiles with the Platform SDK for Windows XP, so except for the multiselect tree and extended glass (if enabled) Photo Gallery is not using anything that limits it to Vista.
The sample is best viewed on Windows Vista though, as I didn't bother to import my old controls with extended support for multi-select trees, etc. Painting of the Tree and ListView is assigned to the Explorer theme style, giving the selection area a hot blueish tint. On Windows XP it is not so hot.

One important feature Windows XP introduced was a number of flags and Window styles to reduce flickering in repainting. Flickering can be best reduced by a combination of WS_CLIPCHILDREN and double-buffering techniques. In Windows XP we now have WS_EX_COMPOSITED for regular windows, and LVS_EX_DOUBLEBUFFER and TVS_EX_DOUBLEBUFFER for other common controls to do that automatically.
In previous versions of Windows it was always a bit of a struggle to get flicker-free screen updates. This sample just adds the needed styles selectively to make a system that has support for them work. For old Windows versions it will probably flicker a bit. To provide proper support for legacy Windows you can override painting message handlers and use the Memory Bitmap support classes from the WTL library.

At the heart of this sample is the CFadeStateButtonCtrl button control. Just like the real Photo Gallery application, a single button class renders most of the cross-fade buttons. This is true even for the buttons in the ToolBar. It takes a bitmap containing the 4 states, and then uses the AlphaBlend API to render the active state, or to slowly blend between two bitmap parts when the state changes.
The control has 3 features: COMPOSITE for when the button is rendered over an Aero glass area. Basically this means that the background color needs to be black. CAPTUREBKG allows the control to capture the background image before it does its own rendering, thus allowing the background to bleed through. Finally, DOUBLEBUFFER turns to the WTL double buffering classes when the native WS_EX_COMPOSITED isn't active. This feature makes the button more resilient to flicker while rendering the cross-fade animation.

Anyway, enjoy the sample. It might inspire you to create your own flashy bitmap buttons...

Source Code Dependencies

Windows XP
Microsoft Visual C++ 6.0
Microsoft WTL 8.0 Library
Microsoft GDI+

Download Files

DownloadBinary (227 Kb)
Source Code (298 Kb)

To the top