Aero Glass Effects

While there was a little fanfare regarding transparent forms when they first came out, it was a far cry from the excitement regarding the Aero Glass effects provided by Windows Vista. In my opinion, Aero Glass effects truly are the defining presentation element that marks an application as an application being run on Window’s Vista. So it is no great surprise that many developers are finding ways to reproduce similar look-and-feel for their applications. Bernard Bout has some really good examples of this on his blog. With a good eye for design, a little help from Cesar Chalom and GDI+, and Windows Vista’s Aero Glass as a guide, Bernard has impressed me (and subsequently been added to my Blogroll). Please see the following blog entries on his blog to see what I’m talking about.

What about Visual FoxPro on Vista

Creating a Visual FoxPro application that has some Aero Glass effects is easy enough. Top-level forms (ShowWindow = 2) are automatically edged (title bar, control box and borders) in Aero Glass. It’s always a good thing when Visual FoxPro developers don’t have to jump through hoops to get some of the latest and greatest eye candy that Microsoft provides in an OS (remember when theme support was added to VFP?). This is especially true in this case because the alternative isn’t very pretty (see image below of a VFP form with ShowWindow = 0 or 1).

Heard all of this before

I know what many of you reading this are thinking right now, “Craig, you and others have already shown Aero Glass effects for Visual FoxPro forms running on Windows Vista. Nothing new here!”. However, what you probably haven’t seen (I’m not sure it’s ever been done before) is Aero Glass effects in the client-area (surface area) of a VFP form, and THAT is what I’m about to show how to do. See the image below for an example of what I’m talking about.

How was it done?

In order to accomplish this I took advantage of the DwmExtendFrameIntoClientArea function from the Desktop Window Manager API (dwmapi.dll) in Windows Vista. The function’s signature is declared as follows in the MSDN:

HRESULT DwmExtendFrameIntoClientArea(
HWND hWnd,
const MARGINS *pMarInset

And, the MARGINS structure (see pMarInset parameter in above code) is defined as follows:

typedef struct _MARGINS{
int cxLeftWidth;
int cxRightWidth;
int cyTopHeight;
int cyBottomHeight;

Which I translated into the following declare and code that I added to the Init() of a top-level form in Visual FoxPro 9.0 running in Windows Vista:

DECLARE LONG DwmExtendFrameIntoClientArea IN dwmapi.dll Long hwnd, string @ pMarInset

LOCAL lnHwnd, lcMargin, lnGlassLeft, lnGlassRight, lnGlassTop, lnGlassBottom

m.lnHwnd = this.HWnd
m.lnGlassLeft = 50
m.lnGlassRight = 50
m.lnGlassTop = 50
m.lnGlassBottom = 50
m.lcMargin = BINTOC(m.lnGlassLeft, ‘4RS’) ;
            + BINTOC(m.lnGlassRight, ‘4RS’) ;
            + BINTOC(m.lnGlassTop, ‘4RS’) ;
            + BINTOC(m.lnGlassBottom, ‘4RS’)

DwmExtendFrameIntoClientArea(m.lnHwnd, @m.lcMargin)

That code unfortunately had no effect on my top-level, so I knew I was still missing a piece of the puzzle. The answer came from an article out on Code Project. It appears for the DwmExtendFrameIntoClientArea function to work its magic the pixels that are to be turned shown as part of the Aero Glass frame must have their Alpha channel set to 0. And, as the article points out the easiest way to do this is to paint those pixels black.

So, what I did rather than hook window’s messages and use GDI+ to do this (I certainly could of) was to use some VFP shapes with their backcolor set to RGB(0,0,0). I placed four of these shapes around the sides of the form and made their heights and widths (depending on where they were placed) match the values I had assigned to m.lnGlassLeft, m.lnGlassRight, m.lnGlassTop, and m.lnGlassBottom (see the code above where I fake a MARGINS structure). Once I was through doing that the form looked like the image below in the VFP form designer. And, when I ran it voila’ – I had an Aero Glass effect in the client-area of the VFP form!

What’s this good for?

There are plenty of great examples of UI’s that have been designed using this technique. You saw some of them if you looked at the Code Project article I linked to earlier in this blog entry. In short it is good for creating stunning UIs for Visual FoxPro applications.

One good use would be creating status bar areas on VFP top-level forms that include a progress bar and other controls. The image below is just a simple example of how this jazzes up a VFP form.  It uses the same code as I posted above except that I only set m.lnGlassBottom to 50 (all the rest were 0) and only used the bottom shape with its backcolor set to black.

More work to be done

This proof-of-concept doesn’t complete what we need since any VFP classes/controls put into the client-area that is rendered with an Aero Glass background will have some problems. This is because, as you can imagine, anything that is black (such as forecolors and backcolors) will be rendered translucent. A couple of ways around this are to use ActiveX controls/Windows Classes as I did with the Microsoft ProgressBar Control, version 5.0 (SP2) in the form above. The other way would be to render the graphical elements and text using GDI+ and in this respect _gdiplus.vcx that comes with Visual FoxPro 9.0 and the GDIPlusX project out on VFPX will definitely come in handy. In any event, it is nice to know that this type of Aero Glass effect is easily doable in Visual FoxPro 9.0. I was pleasantly surprised to find it so simple to implement.

Until next time… Visual FoxPro Rocks!