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
application. But the company has always been at the forefront when it comes to using
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 codeThe 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 the
DrawThemeParentBackgroundAPI. 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
WM_DRAWITEM notification for buttons), but I'm not going to attempt
it at this time.
Source Code DependenciesWindows XP
Microsoft Visual Studio.NET 2008
Microsoft WTL 8.0 Library
|Binary (235 Kb)|
Source Code (243 Kb)