[SDK] 12 - XP AERO GLASS is alive!

[Patrice Terrier]

COMPLETE AERO GLASS EMULATION for XP

I put a huge amount of work into this project, and it is much more than just another "Eye candy".
It is based on advanced concepts, tied close to an intimate knowledge of the core low level SDK API, that tooks me years to learn and master.

As far as I am aware of it, this is the only true AERO GLASS effect available for XP.




I have added many new properties to the Skin UIS as you can see there:

Code Select Expand


'WARNING: DO NOT CHANGE THE ORDER OF THE PROPERTIES!

'AUTHOR section -------------------------------------------------------------
"AUTHOR,Moonraker|Skin design: <Patrice Terrier> E-mail: pterrier@zapsolution.com"

'SIZE & COORDINATES section -------------------------------------------------

"CXSYSBUT,            02"          ' Sys buttons X offset from right side.
"CYSYSBUT,            02"          ' Sys buttons Y offset from top side.

"CXSYSICON,           04"          ' Icon X offset from left side.
"CYSYSICON,           02"          ' Icon Y offset from top side.

"CXCAPTEXT,           42"          ' Caption text X offset from left side.
"CYCAPTEXT,           28"          ' Caption text Y offset from top side.

"CXSYSLED,            328"         ' Led X offset from right side.
"CYSYSLED,            08"          ' Led Y offset from top side.
                                   
"BTN_FIX_X,           07"          ' Horizontal non stretched button border
"BTN_FIX_Y,           05"          ' Vertical non stretched button border

'BITMAP section -------------------------------------------------------------

"CENTER,              @PATH@Moonraker\FORM_Center.jpg"
"TOP_LEFT,            @PATH@Moonraker\FORM_TopLeft.png"
"TOP_MID,             @PATH@Moonraker\FORM_TopMid.png"
"TOP_RIGHT,           @PATH@Moonraker\FORM_TopRight.png"
"SIDE_LEFT,           @PATH@Moonraker\FORM_SideLeft.png"
"SIDE_RIGHT,          @PATH@Moonraker\FORM_SideRight.png"
"BOTTOM_LEFT,         @PATH@Moonraker\FORM_BottomLeft.png"
"BOTTOM_MID,          @PATH@Moonraker\FORM_BottomMid.png"
"BOTTOM_RIGHT,        @PATH@Moonraker\FORM_BottomRight.png"
"LED,                 @PATH@Moonraker\BTN_Led.png"

"PUSHBUT,             @PATH@Moonraker\BTN_Crystal.png"
"CHECKBUT,            @PATH@Moonraker\BTN_Check.png"
                                   
'COLOR section --------------------------------------------------------------

"ACTIVECAPTION,       255,250,250,255" ' Active caption text color.
"INACTIVECAPTION,     255,170,174,181" ' Inactive caption text color.
"TEXTCOLOR,           255,255,255,255" ' Default ARGB color.
"BTNTEXTCOLOR,        200,255,255,255" ' Push button ARGB text color.

"POPMENUTEXT,         255,16,16,16"    ' PopMenu and Status text ARGB color.
"POPMENUHILITE,       255,196,196,196" ' PopMenu hilite ARGB color.
"ACTIVEMENUBAR,       255,16,16,16"    ' Active menu bar ARGB text color.
"INACTIVEMENUBAR,     255,133,138,133" ' Inactive menu bar ARGB text color.

"CAPTION_FONT,        Trebuchet MS"    ' Caption font Trebuchet MS
"CAPTION_FONT_HEIGHT, 20"              ' Caption font size
"PUSHBUT_FONT_SIZE,   12"              ' Push button font size
"ICON_SIZE,           24"              ' Icon size
"TRACK_HICOLOR,       255,190,195,200" ' Track bar hilight color
"PAINT_BORDER,        1"               ' 0 = %PAINT_TILING_MODE, 1 = %PAINT_STRETCH_MODE
"PAINT_BACKGROUND,    1"               ' 0 = %PAINT_TILING_MODE, 1 = %PAINT_STRETCH_MODE
"DRAG_BACKGROUND,     0"               ' 0 = Caption drag only, 1 = Background full drag mode
"TEXT_FONT,           Trebuchet MS"    ' Text font Trebuchet MS
"SHADOW_COLOR,        128,64,64,64"    ' Shadow color

'AERO section ---------------------------------------------------------------

"AEROEMULATE,         0"               ' TRUE / FALSE condition
"AEROBLURLEVEL,       6"               ' Blur level in the range 0-20 when EMULATEAERO is ON
"AEROCOLOR,           32,92,64,255"    ' AERO color overlay
"AEROTIMERDELAY,      500"             ' Timer's refresh delay in the range 0-1000 (milli-second)

'COLOR picker section -------------------------------------------------------

"AliceBlue,&HF0F8FF," _                ' COLORLABEL
"AntiqueWhite,&HFAEBD7," _             '
"Aqua,&H00FFFF," _                     '
"Aquamarine,&H7FFFD4," _               '
"Azure,&HF0FFFF," _                    '
"Beige,&HF5F5DC," _                    '
"Bisque,&HFFE4C4," _                   '
"Black,&H000000," _                    '
"BlanchedAlmond,&HFFEBCD," _           '
"Blue,&H0000FF," _                     '
"BlueViolet,&H8A2BE2," _               '
"Brown,&HA52A2A," _                    '
"BurlyWood,&HDEB887," _                '
"CadetBlue,&H5F9EA0," _                '
"Chartreuse,&H7FFF00," _               '
"Chocolate,&HD2691E," _                '
"Coral,&HFF7F50," _                    '
"CornflowerBlue,&H6495ED," _           '
"Cornsilk,&HFFF8DC," _                 '
"Crimson,&HDC143C," _                  '
"Cyan,&H00FFFF," _                     '
"DarkBlue,&H00008B," _                 '
"DarkCyan,&H008B8B," _                 '
"DarkGoldenrod,&HB8860B," _            '
"DarkGray,&HA9A9A9," _                 '
"DarkGreen,&H006400," _                '
"DarkKhaki,&HBDB76B," _                '
"DarkMagenta,&H8B008B," _              '
"DarkOliveGreen,&H556B2F," _           '
"DarkOrange,&HFF8C00," _               '
"DarkOrchid,&H9932CC," _               '
"DarkRed,&H8B0000," _                  '
"DarkSalmon,&HE9967A," _               '
"DarkSeaGreen,&H8FBC8B," _             '
"DarkSlateBlue,&H483D8B," _            '
"DarkSlateGray,&H2F4F4F," _            '
"DarkTurquoise,&H00CED1," _            '
"DarkViolet,&H9400D3," _               '
"DeepPink,&HFF1493," _                 '
"DeepSkyBlue,&H00BFFF," _              '
"DimGray,&H696969," _                  '
"DodgerBlue,&H1E90FF," _               '
"Firebrick,&HB22222," _                '
"FloralWhite,&HFFFAF0," _              '
"ForestGreen,&H228B22," _              '
"Fuchsia,&HFF00FF," _                  '
"Gainsboro,&HDCDCDC," _                '
"GhostWhite,&HF8F8FF," _               '
"Gold,&HFFD700," _                     '
"Goldenrod,&HDAA520," _                '
"Gray,&H808080," _                     '
"Green,&H008000," _                    '
"GreenYellow,&HADFF2F," _              '
"Honeydew,&HF0FFF0," _                 '
"HotPink,&HFF69B4," _                  '
"IndianRed,&HCD5C5C," _                '
"Indigo,&H4B0082," _                   '
"Ivory,&HFFFFF0," _                    '
"Khaki,&HF0E68C," _                    '
"Lavender,&HE6E6FA," _                 '
"LavenderBlush,&HFFF0F5," _            '
"LawnGreen,&H7CFC00," _                '
"LemonChiffon,&HFFFACD," _             '
"LightBlue,&HADD8E6," _                '
"LightCoral,&HF08080," _               '
"LightCyan,&HE0FFFF," _                '
"LightGoldenrodYellow,&HFAFAD2," _     '
"LightGray,&HD3D3D3," _                '
"LightGreen,&H90EE90," _               '
"LightPink,&HFFB6C1," _                '
"LightSalmon,&HFFA07A," _              '
"LightSeaGreen,&H20B2AA," _            '
"LightSkyBlue,&H87CEFA," _             '
"LightSlateGray,&H778899," _           '
"LightSteelBlue,&HB0C4DE," _           '
"LightYellow,&HFFFFE0," _              '
"Lime,&H00FF00," _                     '
"LimeGreen,&H32CD32," _                '
"Linen,&HFAF0E6," _                    '
"Magenta,&HFF00FF," _                  '
"Maroon,&H800000," _                   '
"MediumAquamarine,&H66CDAA," _         '
"MediumBlue,&H0000CD," _               '
"MediumOrchid,&HBA55D3," _             '
"MediumPurple,&H9370DB," _             '
"MediumSeaGreen,&H3CB371," _           '
"MediumSlateBlue,&H7B68EE," _          '
"MediumSpringGreen,&H00FA9A," _        '
"MediumTurquoise,&H48D1CC," _          '
"MediumVioletRed,&HC71585," _          '
"MidnightBlue,&H191970," _             '
"MintCream,&HF5FFFA," _                '
"MistyRose,&HFFE4E1," _                '
"Moccasin,&HFFE4B5," _                 '
"NavajoWhite,&HFFDEAD," _              '
"Navy,&H000080," _                     '
"OldLace,&HFDF5E6," _                  '
"Olive,&H808000," _                    '
"OliveDrab,&H6B8E23," _                '
"Orange,&HFFA500," _                   '
"OrangeRed,&HFF4500," _                '
"Orchid,&HDA70D6," _                   '
"PaleGoldenrod,&HEEE8AA," _            '
"PaleGreen,&H98FB98," _                '
"PaleTurquoise,&HAFEEEE," _            '
"PaleVioletRed,&HDB7093," _            '
"PapayaWhip,&HFFEFD5," _               '
"PeachPuff,&HFFDAB9," _                '
"Peru,&HCD853F," _                     '
"Pink,&HFFC0CB," _                     '
"Plum,&HDDA0DD," _                     '
"PowderBlue,&HB0E0E6," _               '
"Purple,&H800080," _                   '
"Red,&HFF0000," _                      '
"RosyBrown,&HBC8F8F," _                '
"RoyalBlue,&H4169E1," _                '
"SaddleBrown,&H8B4513," _              '
"Salmon,&HFA8072," _                   '
"SandyBrown,&HF4A460," _               '
"SeaGreen,&H2E8B57," _                 '
"SeaShell,&HFFF5EE," _                 '
"Sienna,&HA0522D," _                   '
"Silver,&HC0C0C0," _                   '
"SkyBlue,&H87CEEB," _                  '
"SlateBlue,&H6A5ACD," _                '
"SlateGray,&H708090," _                '
"Snow,&HFFFAFA," _                     '
"SpringGreen,&H00FF7F," _              '
"SteelBlue,&H4682B4," _                '
"Tan,&HD2B48C," _                      '
"Teal,&H008080," _                     '
"Thistle,&HD8BFD8," _                  '
"Tomato,&HFF6347," _                   '
"Turquoise,&H40E0D0," _                '
"Violet,&HEE82EE," _                   '
"Wheat,&HF5DEB3," _                    '
"White,&HFFFFFF," _                    '
"WhiteSmoke,&HF5F5F5," _               '
"Yellow,&HFFFF00," _                   '
"YellowGreen,&H9ACD32"                 '

'Skin end definition --------------------------------------------------------


Starting with this version all the code of the SKIN ENGINE has been moved to a distinct include file, named: zSkin.inc

There is also another include file: zcolorpick.inc for the purpose of easy color change in Moonraker.

Most of the Moonraker skin uses translucency to let you test the AERO GLASS crystal and blur mode.

Indeed this XP AERO GLASS version gives to the programmer more control on the whole GUI than VISTA's version.

PROPERTIES HELPER FUNCTIONS:

They are all prefixed with the letter "SK_"

Code Select Expand


DECLARE FUNCTION SK_AUTHOR() AS STRING            '// Return the SKIN Author's name
DECLARE FUNCTION SK_ACTIVECAPTION() AS LONG       '// COLOR ACTIVE CAPTION
DECLARE FUNCTION SK_INACTIVECAPTION() AS LONG     '// COLOR INACTIVE CAPTION
DECLARE FUNCTION SK_TEXTCOLOR() AS LONG           '// COLOR TEXT
DECLARE FUNCTION SK_BTNTEXTCOLOR() AS LONG        '// COLOR BUTTON TEXT
DECLARE FUNCTION SK_POPMENUTEXT() AS LONG         '// COLOR POPUP MENU TEXT
DECLARE FUNCTION SK_POPMENUHILITE() AS LONG       '// COLOR POPUP MENU HILIGHTED TEXT
DECLARE FUNCTION SK_ACTIVEMENUBAR() AS LONG       '// COLOR MENU BAR HILIGHTED ITEM
DECLARE FUNCTION SK_INACTIVEMENUBAR() AS LONG     '// COLOR MENU BAR DEFAULT COLOR
DECLARE FUNCTION SK_CAPTIONFONT() AS STRING       '// CAPTION FONT TO USE
DECLARE FUNCTION SK_CAPTIONFONTHEIGHT() AS LONG   '// CAPTION FONT SIZE
DECLARE FUNCTION SK_PUSHBUTFONTSIZE() AS LONG     '// PUSH BUTTON FONT SIZE
DECLARE FUNCTION SK_TRACKHICOLOR() AS LONG        '// TRACK BAR HIGHLIGHTED VALUE
DECLARE FUNCTION SK_TEXTFONT() AS STRING          '// TEXT FONT TO USE
DECLARE FUNCTION SK_AEROEMULATE() AS LONG         '// CHECK IF AERO EMULATION IS ON
DECLARE FUNCTION SK_AEROBLURLEVEL() AS LONG       '// AERO BLURING LEVEL
DECLARE FUNCTION SK_AEROCOLOR() AS LONG           '// AERO GLASS COLOR
DECLARE FUNCTION SK_AEROTIMERDELAY() AS LONG      '// AERO TIMER REFRESH DELAY
DECLARE FUNCTION SK_COLORLABEL() AS STRING        '// GDIPLUS COLOR LIST FOR COLORPICKER COMBO



This code won't work on any Windows version prior to XP, because it requires the use of the WS_EX_COMPOSITED extended style.

Note: To run it on VISTA, you must turn off compositing mode.

I have plans to use the dwmapi.dll to enhance my code for VISTA.


Patrice Terrier
www.zapsolution.com

[Theo Gottwald]

I
-> downloaded your zip-file,
-> hit "compile" -
-> it says "compile successfull".

I started the created "zSkin11.exe" (96 kb) and this is the most amazing GUI surface i have ever seen on XP.

You are really state-of-the-art with this Patrice.
Maybe you should team up with Dominic, Paul, Chris or Edwin to make a Visual Designer for PB which would allow to make
REALLY MODERN looking Applications.

What we actually create with standard PB and Designers is just the opposite from what I see here.
This "zSkin11.exe" is amazing modern.

[Eros Olmi]

 
Never seen anything like that under XP !
Attention: Microsoft man are searching for you but not to hire you but to ... eliminate you.
You are the evidence that XP is a great OS. You are killing M$ marketing people and they are searching for you.

[Petr Schreiber]

Patrice,

I'm sorry to post so late but my eyes fell from the eyeholes and I had to seek them - this is what your techdemos do to me !
Really superb look !


Bye,
Petr

[Kent Sarikaya]

All of the above sentiments X 10, WOW!!

[Patrice Terrier]

The ZIP file has been updated because of a small bug in zSetTrackValue

Code Select Expand


'// Update track value
SUB zSetTrackValue(BYVAL hWnd AS LONG, BYVAL tVal AS LONG)
    LOCAL tMin, tMax AS LONG
    tMin = zGetProperty(hWnd, %TRACK_MINVAL)
    tMax = zGetProperty(hWnd, %TRACK_MAXVAL)
    IF tMin > tMax THEN SWAP tMin, tMax ' <--- Must check this first
    tVal = MIN&(MAX&(tMin, tVAL), tMax)
    IF tVal <> zGetTrackValue(hWnd) THEN
       CALL zUpdateWindow(hWnd, 1)
       CALL zSetProperty(hWnd, %TRACK_VALUE, tVal)
       CALL zSetProperty(hWnd, %TRACK_WAS_VALUE, tVal)
    END IF
END SUB


IF tMin > TMax THEN SWAP tMin, tMax ' <--- Must check this first
has been added before the MIN&(MAX&()) test.

Patrice Terrier
www.zapsolution.com

[Theo Gottwald]

>Never seen anything like that under XP !

Who is talking from XP?
It works right now under my W2k!

Ok, the buttons seem to have problems.

But the Glas-Effect and the Transparency works - even under W2k!

[Patrice Terrier]

Theo

The problem with W2K is that is doesn't support the WS_EX_COMPOSITING extended style, thus causing flickering while resizing the window, because the WM_PAINT message is not sent in good order for the child controls, I mean painting from bottom to top.

There is a workaround using SetWindowPos to force the child controls z-order at the time you create them.

Patrice Terrier
www.zapsolution.com

[Patrice Terrier]

Because of a few minor fix, the zip file has been upated
the link is still the same, you will find it at the bottom of the first post of this thread.

Now the program display a warning message if run on older Windows OS version (prior to XP),
and all controls in AddChildControls are created with respect to the z-order using the zSetZorder API.


Patrice Terrier
www.zapsolution.com

[Patrice Terrier]

Working on the VISTA version...
with native DWM support (dwmapi.dll)

[Theo Gottwald]

After your changes, I had to uncomment these lines to make it run under W2k   .

Code Select Expand


'   // Check first for a valid OS version (at least XP)
'    IF zOsVersion < 501 THEN
'       MsgBox zSysErrorMessage(197),,MyTitle$
'       EXIT FUNCTION
'    END IF   

Because I just wanted to show the world that your code made W2k look like Vista.

Screenshot:


No reason to buy Vista ... W2k is alive :-).

[MikeTrader]

Patrice,
This is amazing!

I am not clear how you implemented this, is it possible to use regular windows controls in the AERO CRYSTAL mode or do they each need to be coded for this skin technique to appear transparent?

[Patrice Terrier]

Mike,

Standard controls (I would say old controls) are not well behaved to work with VISTA in full AERO GLASS mode, because they are written with GDI that doesn't support the alpha channel. The native VISTA AERO GLASS mode (understand dwmapi.dll) use GDIPLUS 32-bit ARGB colors only. This means for example if you are using a GDI color RGB(0,0,0) it will be transparent, instead of black, because the alpha channel will also have a 0 (null) value, that would be interpreted as full transparency!

Indeed to get a black opaque color you should use my function zColorARGB(255, RGB(0,0,0)) that will create a full 32-bit ARGB color with the correct alpha channel

I have rewritten my colorpicker to let it work with both XP and VISTA in native AERO mode, and I shall post it there when the VISTA version will be ready.

When working with VISTA with compositing being turned on, all drawing are redirected to a hidden GDIPLUS 32-bit surface (double buffer technic) where ALL the windows are drawn first with respect to their z-order, from bottom to top (including their child controls), thus as to perform the full transparency effects using the alpha channel. And this couldn't be done with controls based on the obsolete GDI API...

This is the same reason while WPF (Window Presentation Fundation) offers a whole set of new graphic's control using the alpha channel to work on DirectX surface.

And this is also the reason why all my graphic's components are using PNG files exclusively, because it is the only graphic format that does use variable opacity.

[Elias Montoya]

Amazing!!!!! 

[Patrice Terrier]

Because most people are reading this thread instead of [SDK] 13 - XP AERO GLASS is alive! (version 12) i have changed zskin11.zip to zskin12.zip because it is the latest current version to download.

Patrice Terrier
www.zapsolution.com