Please take a look at the attached screenshot of IE9.
I'm curious, what is the strategy to create all circled controls?
1. Transparent combo box.
2. Transparent buttons.
3. Alter transparency (like they did with the page tabs).
Printable View
Please take a look at the attached screenshot of IE9.
I'm curious, what is the strategy to create all circled controls?
1. Transparent combo box.
2. Transparent buttons.
3. Alter transparency (like they did with the page tabs).
For Transparent buttons you can easily use a owner draw button with png picture which supports transparency. And to load png use GDI+.
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....
It's most likely WPF - which uses a whole other approach to rendering (the "retained mode graphic system").
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).Quote:
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]
Maybe this article will help.
Not sure if you're talking about something different, but there is this:
http://www.codeguru.com/forum/showth...ht=transparent
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:
http://img69.imageshack.us/img69/2025/clipboard01zc.png
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+).
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
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:
http://weblogs.asp.net/kennykerr/arc...w-manager.aspx
http://weblogs.asp.net/kennykerr/arc...w-Manager.aspx
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!!
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...
Oh and here's the rest of the screens...
You can try setting window transparency by SetWindowLong and WS_EX_TRANSPARENT
hypheni, if you look at the screenshots above it doesn't look like that flag was used there.Quote:
Originally Posted by hypheni
As per my view I can see that on some window some png is attached and then the window is somehow made a bit transparent.
I'm sure glad I know WPF - 2 seconds to change a property and done. :thumb: