viksoe.dk

IconPackager Sample

IconPackager Sample


This article was submitted .


This is a recreation of StarDock's IconPackager user-interface.

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 the DrawThemeParentBackground 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.

Ribbon Menu Bar
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 XP
Microsoft Visual Studio.NET 2008
Microsoft WTL 8.0 Library
Microsoft GDI+

Download Files

DownloadBinary (235 Kb)
Source Code (243 Kb)

To the top