Click here to Skip to main content
11,804,574 members (75,938 online)
Click here to Skip to main content

Creating a dynamically translucent dialog

, 1 Aug 2008 CPOL 29.3K 951 24
Rate this:
Please Sign up or sign in to vote.
Using two common techniques to create an uncommon UI.


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.


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

  1. SHIFT+D: have the dialog dim out, meaning make it less transparent.
  2. 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!


  • First check-in on August 1, 2008.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

GeneralMy vote of 2 Pin
DoubleGhost29-Dec-08 22:13
memberDoubleGhost29-Dec-08 22:13 
GeneralRe: My vote of 2 Pin
CheerJeer28-Mar-09 11:19
memberCheerJeer28-Mar-09 11:19 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.151002.1 | Last Updated 2 Aug 2008
Article Copyright 2008 by CheerJeer
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid