From time to time I take on the task to reconstruct the user-interface of an application that I stumble upon while scouring the internet. I redo them mostly because I want to demonstrate how the WTL programming library can help you to realize even the most complex UI, but often also because I find the product's design and visual appearance interesting, user-friendly or just compelling.
And this is a recreation of a utility recently released by StarDock: IconPackager.
StarDock is probably best known for their Windows skinning effort, such as the
WindowBlinds
application. But the company has always been at the forefront when it comes to using
bitmapped widgets.
Recall how boring buttons looked in Windows 2000; all drawn with rectangles and solid
fill. Along came StarDock and paved the way, and Microsoft eventually produced the
Windows XP Style engine.
With the IconPackager tool, StarDock once again demonstrates that they know
how to create a really nice user-interface.
It contains a ribbon-like Command Bar, list controls with shadows, a gradient Sidebar
and bitmapped buttons.
There is also a slew of list controls that display various stock system icons,
and a couple of cross-fade animations that have become so popular on the Windows Vista.
Source code
The main problem with having an application with a custom background (shaded in this case) is that traditional child controls in Windows do not handle transparency well at all. To approach this problem, I'm using the same trick as in the Photo Gallery sample: the child control captures the background of the parent window, and when it needs to paint itself, it starts out by filling the client area with the captured background image. This is much the same how the Windows Style engine now does things with theDrawThemeParentBackground API.
Obviously there are a few quirks, such as the need to re-capture the background whenever
the control moves or is resized, or even when the parent window is resized.
The StarDock's IconPackager gradient fill in both the window background and
the Sidebar blue shade, is actually done with a PNG bitmap rather that using APIs
such as the native GradientFill. Using a bitmap instead of a computed
fill allows you to make more interesting backgrounds, but incurs substantial scaling
issues when the window is resized out of its desired dimensions.
To minimize this resize tear, the bitmap is often split into several parts so
that the corners of the bitmap is blitted directly to the screen without being
stretched and only the middle of the target rectangle (and in some cases the
sides too) are stretched. For both the Sidebar and the buttons, this allow them
to swell in size to fit the embedded text while preserving the nice rounded
corners of the source image.
Another nasty problem is prevention of flicker. The original StarDock utility doesn't allow
the window to resize, so that usually solves a major source of flicker but with the smooth
fading animations occuring several places on the window, it becomes noticeable.
The solution is simple: just add the WS_EX_COMPOSITED window style flag to the
dialogs that make the various forms of the application.
The special ribbon Command Bar also enables the flag because it's doing some subtle
cross-fade animations when the selection changes.
The most prominent control in the sample is probably the Command Bar. It has a touch of
the MS Office 2007 Ribbon UI look, but functions as a regular menu bar with one level
of menuitems. That makes it sufficiently simple for even less-than-savvy users to operate.
And while the control is implemented as a container of windowless buttons, it's not anything
near as complex as the real Ribbon UI. The control simply manages two arrays of rectangles
that it paints as buttons using stretched PNG bitmaps as explained above.
This sample was designed to run on Windows XP or better. It appears to load on Windows 2000
but looks pretty ugly. That can be fixed by messing with the custom draw code (ie. supporting
the WM_DRAWITEM notification for buttons), but I'm not going to attempt
it at this time.
Source Code Dependencies
Windows XPMicrosoft Visual Studio.NET 2008
Microsoft WTL 8.0 Library
Microsoft GDI+
Download Files
 | Binary (235 Kb) Source Code (243 Kb) |
