Skinned UI sample

Skinned UI sample

This article was submitted .

When searching the internet for a good sample with an alternate "skinned" user interface, I found this nice sample. It's a commercial application called ButtonFly. Compare it with this screenshot.

I decided to remake its entry window completely in a WTL sample to demonstrate how it could be done in WTL. There is absolutely no functionality behind the buttons or other controls. It's a simple mock-up project.

I should say that creating a user interface this different from the standard Windows look is really hard work. Everything you see is custom drawn. Even the panel shadows are shaded manually! The dialog contains some 40 custom drawn controls. It swallows several Mb of memory upon start-up and the entire bootup calculation time is around 2 seconds on a 400Mhz Pentium. So there is definitely room for optimizations.
Also, note that I didn't reverse engineer anything. The original ButtonFly application seems to be written in some form of Pascal (probably Delphi). At most, I screen-grabbed a bit of the graphics and colors.

I used a dialog rather than a resizable window because I didn't want to fight resize/rescale problems. I would presumably have been better off to have a pre-rendered background instead of trying to calculate all the controls (especially the shaded panels). Had I been trying to incorporate window resizing, then a rescaled pre-rendered background just wouldn't have looked very good though!
In addition, each control creates and caches its own brushes, fonts and bitmaps. In a resource demanding application like this, it should really share the brushes instead of recreating them repeatedly.

Source Code Dependencies

Microsoft WTL 3.1 Library

Download Files

DownloadSource Code (55 Kb)

To the top