Re: How exactly do you create such "transparent" controls?
No. I doubt that an owner drawn control will let you grab the background and use it to render your PNG. I did some digging on my end and it looks like they were able to somehow lower transparency of the regular common controls. The same is done by the way since Vista in the Windows Explorer when the "glass" theme is enabled. It must by some themes manipulation....
Re: How exactly do you create such "transparent" controls?
It's most likely WPF - which uses a whole other approach to rendering (the "retained mode graphic system").
First, if you think about the retained mode graphic system, this is really moving away from an imperative DrawLine/DrawLine type model, to a data oriented model – new Line()/new Line(). This move to data driven rendering allows complex operations on the drawing instructions to be expressed using properties. [src]
You basically define a visual tree structure (more or less implicitly, by defining the logical tree via the IDE), that represents all the data that is to be drawn, and the rendering system (provided by the OS) does the actual drawing (not the app).
Re: How exactly do you create such "transparent" controls?
This could be easily done even without using WPF
Just extend the non-client area into the client area (using DwmExtendFrameIntoClientArea) and drop a few owner-drawn or custom controls in the new 'frame' area. To draw the controls you'll need GDI+ because you can use semitransparent colors (ARGB) and alpha-blended images (PNG or 32-bit BMP).
GDI+ is a must because everything that is drawn black (0x000000) with plain old GDI (DrawText, FillRect, Ellipse, etc.) becomes transparent on the Aero Glass sheet. To draw text for example, you must use Color::Black from GDI+ because it has an extra alpha byte (0xFF000000 or so, i don't remember if it's 0xAARRGGBB or 0xBBGGRRAA).
The desktop compositing engine does the rest, just fill the background of the control with a black brush (GDI) or Color::Transparent (GDI+) and draw whatever you want over it, it will have a translucent background and if you have glass blur enabled it will be blurry also.
Here's an example I've made with MFC a few weeks ago:
Notice how the cancel button doesn't look good because it uses old GDI, but the other control (actually an owner-drawn CButton) blends with the background with per-pixel translucency (thanks to GDI+).
"A program is never less than 90% complete, and never more than 95% complete."
Re: How exactly do you create such "transparent" controls?
First off, Igor, thanks. It's a nice article.
And yes, Martin, I brought up a similar subject before.
Also thanks to bioHzrdmX. You seem to have gotten really close to what I'm looking for. If the situation with drawing semi-translucent common controls is simply subclassing and overriding the erase-background method then it's a piece of cake. What is not quite so clear for me is how do you fill the GDI background that doesn't support alpha channel with something from GDI+?
In any case, can you post the source for the project you made a screenshot of? That would really help.
PS. My main goal is to make the following full and half-transparent:
A. Buttons (with and without owner drawn images)
B. Plain text (I kinda found a DWM api for that)
C. Combo box
D. Status bar
Re: How exactly do you create such "transparent" controls?
Here's the code.
It was very hard for me to find out how to do this, there is a lot of information for C# and WPF but not so much for VC... I've also found a couple of interesting tutorials:
Hope it helps you, 'cause Aero gives a lot of new and interesting alternatives for user interface design but sometimes is hard to find the right explanation on how some things do work.
The rar has all the required cpp/h files, a vs2008 solution, the png image and an extra header afxgdiplus.h: this file is required to solve a problem with GDI+ and _DEBUG new/delete operators so you will require it to avoid issues when debugging.
You must change the path to the png file, do it in CAeroButton::OnPaint().
Also, this is a very limited example, as you can see, there aren't any hover/pushed states for the custom button, to implement these features you'll have to intercept OnLButtonUp/Down, etc... but this should give you a general idea on how to combine GDI, GDI+ and Aero.
The main idea is to create a GDI+ Graphics object attached to the CPaintDC that is used on the OnPaint() procedure, so the image is drawn every time the control needs to be repainted, but you can always create a double buffered control with a GDI+ Bitmap or a Dib section....
Also, there are some handy functions like DrawThemeTextEx that will allow you to draw 'glowing' text directly on the glass, just like in the title bar of any window.
But the reality is that you're not gonna have a good time with common controls.... they weren't designed for glass and it requires a lot of coding to get them ready for it. I suggest custom controls: yes, they may be hard to code, but you'll have COMPLETE control over its painting (this mostly because GDI+ can be a bit slow sometimes, so you must make sure the control doesn't repaint unless it's strictly neccesary) and its behaviour.
Read the both tutorials, you'll find what you need there... and don't forget CodeGuru!!
"A program is never less than 90% complete, and never more than 95% complete."
Re: How exactly do you create such "transparent" controls?
Hey, that's pretty cool. Thanks.
I see what you're doing -- that button is basically an owner drawn control and you use newer GDI+ to render a transparent PNG. I agree with you about making your own controls and about all the benefits except one major issue with them. See, you may create really nice looking custom drawn controls to work with Windows 7 but when Microsoft changes design of their windows in the future it means your program will look old and outdated so you'll have to keep up with whatever OS looks like. And that is the major issue for me.
It'd be really nice to coax those common controls to be painted along with GDI+ and transparency. I did some digging into IE 9 (see screenshots attached) and as you can see most of those controls are "common controls". Here's an interesting find:
1. As you can see from the WndProc of those controls all of them are subclassed.
2. They didn't use combo box control and instead made it out of a toolbar and edit control. Pretty clever I must add.
So what I'm now trying to find out is how did they make those common controls to be half-transparent?
If I find an answer I'll post it here. So since you seem to be interested to do the same, I'd appreciate your input too...
* The Best Reasons to Target Windows 8
Learn some of the best reasons why you should seriously consider bringing your Android mobile development expertise to bear on the Windows 8 platform.
Reply With Quote
Originally Posted by hypheni
