IconPackager Sample

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 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

Download Files

Binary (235 Kb) Source Code (243 Kb)