Click here to Skip to main content
15,358,528 members
Articles / Programming Languages / C++
Posted 1 Aug 2008


25 bookmarked

Creating a dynamically translucent dialog

Rate me:
Please Sign up or sign in to vote.
4.07/5 (12 votes)
1 Aug 2008CPOL2 min read
Using two common techniques to create an uncommon UI.

Image 1


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

Comments and Discussions

QuestionThank you! Pin
Member 568844312-Oct-15 4:39
MemberMember 568844312-Oct-15 4:39 
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 
QuestionAnything new here? Pin
Leo Davidson6-Aug-08 5:55
MemberLeo Davidson6-Aug-08 5:55 
AnswerRe: Anything new here? Pin
CheerJeer6-Aug-08 11:29
MemberCheerJeer6-Aug-08 11:29 
GeneralRe: Anything new here? Pin
Leo Davidson6-Aug-08 15:50
MemberLeo Davidson6-Aug-08 15:50 
GeneralAny article about look and feel Pin
Jerry Evans5-Aug-08 0:23
MemberJerry Evans5-Aug-08 0:23 
AnswerRe: Any article about look and feel Pin
CheerJeer5-Aug-08 4:01
MemberCheerJeer5-Aug-08 4:01 
I tried to post a screen, as one of the upload (.gif), per your comment. To my dismay, the screen shot did not show up.

If you download the whole zip, which contains a subfolder: Release. Inside that folder, you can find the sample executable.

Once again, thanks for your interest.
GeneralRe: Any article about look and feel Pin
Chris Maunder5-Aug-08 5:23
cofounderChris Maunder5-Aug-08 5:23 
QuestionWhat if a child dialog? Pin
sudhir_Kumar4-Aug-08 3:35
Membersudhir_Kumar4-Aug-08 3:35 
AnswerRe: What if a child dialog? Pin
CheerJeer4-Aug-08 13:52
MemberCheerJeer4-Aug-08 13:52 

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

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