Using Blur Behind on Windows

Posted by Jens Bache-Wiig on September 15, 2009 · 12 comments

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! :)

QShare(this)

Possibly related posts:

  1. Toplevel Windows and Menus with Qt Quick
  2. Multiple screens in the lighthouse

12 comments

1 Ariya Hidayat September 15, 2009 at 8:41 pm
 

Extremely cool! :)

2 Lawand September 15, 2009 at 8:58 pm
 

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

3 Jens September 15, 2009 at 9:02 pm
 

lawand: haha, good point. I think we could call it a bug :)

4 Lawand September 15, 2009 at 9:31 pm
 

Well, it’s more of a note than of a complaint :)

5 Enrico Ros September 16, 2009 at 1:25 am
 

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

6 girish September 16, 2009 at 5:10 am
 

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

7 archdave September 16, 2009 at 7:29 am
 

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

8 Andreas September 16, 2009 at 8:33 am
 

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

No, just kidding ;-) .

9 holoooh September 16, 2009 at 9:16 am
 

will use that in my project! THANKS!!

10 Thiago Macieira September 16, 2009 at 1:02 pm
 

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

11 Xophos September 17, 2009 at 10:25 am
 

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

12 Jens September 19, 2009 at 12:18 pm
 

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 :)

Comments on this entry are closed.

Previous post:

Next post: