Creating a dynamically translucent dialog

Download source code - 180 KB

Introduction

On a Vista machine where Aero UI is enabled, one thing is bound to jump out of the screen: dialogs are translucent. This semi see-through UI is refreshing to say the least. Someone may be mistaken to believe that such a dazzling UI is only available on high end Vista machines. The truth is that with minor efforts, you can duplicate such a fancy effect on XP, using not-so well-known, yet simple APIs. To take a step further, we can even dynamically dim down or brighten up how much transparent the dialog should be.

Background

(Optional) Need to have a basic understanding of MFC.

Using the code

The project is self-contained, built from MS VC8. Or, you can copy the .cpp and .h file into your own project and use them directly.

Points of interest

Building a translucent dialog is pleasantly trivial using two Win32 APIs:

SetWindowLongPtr - sets a layered window, in preparation for the next step. Similar to SetWindowLongPtr, there used to be another version, SetWindowLong, which is now replaced by SetWindowLongPtr, according to the latest MSDN update.
SetLayeredWindowAttributes - pay attention to its third parameter (with a value range from 0 to 255) that determines the level of opacity of the dialog. 0 makes the dialog completely transparent, and 255 displays a solid dialog.

To make the dialog more interactive, the sample allows a user to adjust the level of opacity. It does this by overriding the PreTranslateMessage. In an MFC application, PreTranslateMessage is generally the right place to capture or alter the default behavior for key combinations. What is customized inside this call is two sets of key combinations:

SHIFT+D: have the dialog dim out, meaning make it less transparent.
SHIFT+B: brighten up the dialog; in other words, make the dialog more and more transparent.

When you put these small steps together, you will see a very smooth dialog which is gently "plotted" on the screen. And, you can press key combinations to switch the dialog's transparency level. Quite a fun to see it in motion. Give it a try, and enjoy!