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 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 XPMicrosoft Visual C++ 6.0
Microsoft WTL 8.0 Library
Microsoft GDI+
Download Files
 | Binary (227 Kb) Source Code (298 Kb) |
