Using Blur Behind on Windows

Published Tuesday September 15th, 2009
12 Comments on Using Blur Behind on Windows
Posted in Qt, Styles, Uncategorized, Windows

We added transparency support in Qt 4.5 through the Qt::WA_TranslucentBackground attribute. Unfortunately, as documented, it will only work on Windows if you explicitly remove window decorations.

With Windows Vista, Microsoft introduced the DWM (Desktop Window Manager) api, where you can enable a blur effect behind your application window. Unfortunately Qt does not have API to cover this yet, but by using the aforementioned translucent attribute in combination with a few native API calls you can already get this effect with Qt 4.5.

blurbehind2.png

To make it simple, I created a convenience API to handle it so you can
plug it into your existing code. Note that the code should compile fine on other
platforms as well:


bool QtWin::isCompositionEnabled()
bool QtWin::enableBlurBehindWindow(QWidget *widget, bool enable)
bool QtWin::extendFrameIntoClientArea(QWidget *widget, int left, int top, int right, int bottom)
QColor QtWin::colorizationColor()

You can make a widget blurry by calling enableBlurBehindWindow or extendFrameIntoClientArea with the preferred margins. In both cases you are simply modifying the background of the widget. The colorizationColor is the color Windows tints the window with.

To show of the effect I made (yet another!) 200-line Qt browser. It has a custom style sheet with semi-transparent widgets. You will also see how you can make segmented arrow buttons using nothing but a pair of style sheets.

You can get the code and executables here.

blurbehind.png

Happy coding! πŸ™‚

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Qt, Styles, Uncategorized, Windows

12 comments

Ariya Hidayat says:

Extremely cool! πŸ™‚

Lawand says:

Good work, BTW why does the search use google.no instead of google.com ?

Jens says:

lawand: haha, good point. I think we could call it a bug πŸ™‚

Lawand says:

Well, it’s more of a note than of a complaint πŸ™‚

Enrico Ros says:

Thanks a lot for this C00Lness… I’ve just merged it into my pet project and so far it looks good:
http://www.enricoros.com/opensource/fotowall/assets/screenshots/0.8-vista-blur-1.jpg

And here is the commit with the ‘stolen’ code πŸ˜‰
http://github.com/enricoros/fotowall/commit/b106c16509343d9ce331eb74f6b58021c5dcd5b8

girish says:

Jens, still not liking git :;-) Very very cool, btw.

archdave says:

First we get transparency, then we get blur, can we just go all the way back to solid, please?

Andreas says:

archdave: We are planning to add opacity support in Qt 4.7.

No, just kidding ;-).

holoooh says:

will use that in my project! THANKS!!

Thiago Macieira says:

Andreas: opacity? As in not being able to see any pixels from the background? Cool! I want that feature!

Xophos says:

It would be nice to have such functionality on X too.

Jens says:

enrico: looks very nice indeed!
girish: well I did not want to make it seem like I was launching a new browser project on github πŸ™‚
xophos: actually it I already added the code to make it work on X11 but left it in as a hidden feature if anyone tried to compile it. It will not blur but if you have a composite window manager it should work fine with transparency on X11 πŸ™‚

Commenting closed.

Get started today with Qt Download now