Click here to Skip to main content
15,116,277 members
Articles / Programming Languages / C++
Article
Posted 1 Aug 2008

Stats

45.3K views
1.2K downloads
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

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:

  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!

History

  • First check-in on August 1, 2008.

License

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

Share

About the Author

CheerJeer
Engineer
United States United States
No Biography provided

Comments and Discussions

 
QuestionThank you! Pin
Member 568844312-Oct-15 5:39
MemberMember 568844312-Oct-15 5:39 
GeneralMy vote of 2 Pin
DoubleGhost29-Dec-08 23:13
MemberDoubleGhost29-Dec-08 23:13 
GeneralRe: My vote of 2 Pin
CheerJeer28-Mar-09 12:19
MemberCheerJeer28-Mar-09 12:19 
QuestionAnything new here? Pin
Leo Davidson6-Aug-08 6:55
MemberLeo Davidson6-Aug-08 6:55 
AnswerRe: Anything new here? Pin
CheerJeer6-Aug-08 12:29
MemberCheerJeer6-Aug-08 12:29 
GeneralRe: Anything new here? Pin
Leo Davidson6-Aug-08 16:50
MemberLeo Davidson6-Aug-08 16:50 
Agreed, using SetWindowLongPtr is better & more modern. (It doesn't technically matter with GWL_EXSTYLE but it's a good habit to always use it, for sure. It means one less line of code to look over when porting to 64-bit.)

FWIW, some of the other articles mention how to use GetProcAddress to avoid requiring layered-window support while using it if the OS supports it. Maybe that would be worth including? Or maybe not. It's only of interest to people who want to support Win95/Win98/NT4 (and below) and those people probably already know the technique as they will almost certainly have run into other nice-to-have APIs that aren't supported on Win95/98/NT4. Maybe it's better to the code/article clean, as it is. I thought I'd mention it in case you felt differently, though.

All the best,
Leo
GeneralAny article about look and feel Pin
Jerry Evans5-Aug-08 1:23
MemberJerry Evans5-Aug-08 1:23 
AnswerRe: Any article about look and feel Pin
CheerJeer5-Aug-08 5:01
MemberCheerJeer5-Aug-08 5:01 
GeneralRe: Any article about look and feel Pin
Chris Maunder5-Aug-08 6:23
cofounderChris Maunder5-Aug-08 6:23 
QuestionWhat if a child dialog? Pin
sudhir_Kumar4-Aug-08 4:35
Membersudhir_Kumar4-Aug-08 4:35 
AnswerRe: What if a child dialog? Pin
CheerJeer4-Aug-08 14:52
MemberCheerJeer4-Aug-08 14: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.