Tuesday, February 19, 2013

Aero Glass: Not Dead Yet!

Those already using Windows 8 know that the Aero Glass theme first introduced in Windows Vista is now no more.  In a quest to combine the look/feel of a tablet and desktop, Microsoft has gone with a more "Metro" aesthetic look, i.e. flat and dull.  Does this mean you should ignore supporting an Aero Glass UI?  Perhaps. There are still a lot of Vista/Windows 7 users out there and the Aero Glass UI still works well on those older versions of Windows, especially considering the apparent slow adoption rate of Windows 8. It will take time before Aero Glass is truly dead.

In light of all this, what exactly is an Aero Glass UI?  When you look at a typical Windows app most don't actually utilize a full Aero Glass UI because it is actually a bit of a pain to support since certain conditions need to be met and some things do not work as you'd expect.  Here are some examples showing apps that don't support the Aero Glass UI, partially support it, or fully support it:

No Aero Glass support
Partial Aero Glass UI

Full Aero Glass UI

Supporting the Aero Glass UI in Real Studio is fairly easy, but as I mentioned there are some caveats.  Take the example AeroText.rbp found in the Real Studio folder under Example Projects\Platform-Specific\Windows\

This example creates a partial Aero Glass window using declares.  With some minor adjustments in AeroWindow.Open (note the highlighted changes in blue):

m.cxLeftWidth = 0
m.cxRightWidth = 0
m.cyBottomHeight = 0
m.cyTopHeight = -1

And AeroWindow.Paint:

g.FillRect( 0, 0, Self.Width, Self.Height )

This partial Aero Glass window can become a full Aero Glass UI like this:

Now, the caveats.  Sadly not all Win32 controls render properly on an Aero Glass UI. There are mainly issues with controls that draw text due to how GDI renders text (see how the text of that PushButton isn't opaque).  The only solution here is to draw your own with GDI+ or what most apps do, create a partial Aero Glass UI and put controls on the non-translucent areas.  You'll find that Menus have the same issue, so you'll have to find other solutions for that as well.  Here's an example of what Paint.NET does to handle menus:

In conclusion, supporting Aero Glass may be more trouble than it's worth, considering it is also not supported on Windows 8 (or Windows XP).  However, if you are targeting a vesion of WIndows that supports it, you might find the extra effort needed to create these visual effects to be worth it.


KSA++ said...

first thankyou for this blog
sorry for my english bad

No AeroText.rbp yor are mean AeroTest.rbp

AeroTest its difficult
i use this lines
Declare Function ApplyGlass Lib "dwmapi.dll" Alias "DwmExtendFrameIntoClientArea" ( hWnd As Integer, ByRef rect As RECT ) As Integer

Dim Glass As Integer
Dim mRect As RECT
' Add Structures Named mRect
'Declaration - Offset - Size
'left As Integer 0 4
'top As Integer 4 4
'right As Integer 8 4
'bottom As Integer 12 4
mRect.Left = - 1
mRect.Top = - 1
mRect.Right = - 1
mRect.Bottom = - 1
Window1.HasBackColor = True
Window1.BackColor = RGB ( 0 , 0 , 0 )
Window1.MenuBar = Nil
Glass =ApplyGlass ( Window1.Handle , mRect )
Should be work Aero but Controls Do not appear properly ( PushButton , Textfield ...etc )

This code solves the problem --- not all

Const GWL_EXSTYLE = -20
Const WS_EX_LAYERED = &H80000
' Chang BackColor To Green
Window1.BackColor = RGB ( 0 , 255 , 0 )' Green

Declare Function SetWindowLong Lib "user32" Alias "SetWindowLongA" ( hWnd As Integer, nIndex As Integer, dwNewLong As Integer ) As Integer
Declare Function GetWindowLong Lib "user32" Alias "GetWindowLongA" ( hWnd As Integer, nIndex As Integer ) As Integer
Declare Function SetLayeredWindowAttributes Lib "user32" ( hWnd As Integer, crKey As Color, bAlpha As Byte, dwFlags As Integer ) As Integer

Call SetWindowLong (Window1.Handle, GWL_EXSTYLE, GetWindowLong( Window1.Handle, GWL_EXSTYLE ) or WS_EX_LAYERED )
Call SetLayeredWindowAttributes ( Window1.Handle, Window1.BackColor , 0, LWA_COLORKEY )

'PushButton , Textfield work fine
thank you to google Translation

William@Real said...

Thanks for sharing your code, perhaps we'll see more Aero Glass UI made with Real Studio in the future :)