How to manage colors of Vista's Aero style

The control can assume the appearance of a Vista's Aero style button by setting its Surface property to SURFACE_VISTA_AERO.

The Vista' Aero style has several dedicated colors which replace the default colors set through the BackColor property (with the exception of the outer border drawn when the SpecialEffect property is set to a value different from SPECIAL_EFFECT_NONE); these colors can be summarized in 3 main categories:

Borders colors

The Aero style has 3 borders as seen on the image below:

The color of these borders can be set through the VistaColorOuterBorder, VistaColorMiddleBorder and VistaColorInnerBorder properties: the inner border can have a different color when the button is in pressed state through the use of the VistaColorInnerBorderPressed property.

The width in pixels of each border can be defined using the VistaOuterBorderWidth, VistaMiddleBorderWidth and VistaInnerBorderWidth properties.

Glossy effect colors

The glossy effect is applied on the Northern half of the button as seen on the image below:

The glossy effect is rendered through a linear gradient made up of 2 colors, one defining the upper portion of the effect and one defining the lower portion of the effect, Depending upon the state of the button, these colors can be emphasized through the use of a further overlapping color having a varying opacity; below a summary of the various button states with the involved properties

Normal

VistaColorGlossyEffectUpper and VistaOpacityGlossyEffectUpper

VistaColorGlossyEffectLower and VistaOpacityGlossyEffectLower

Pressed

VistaColorGlossyEmphUpperPressed and VistaOpacityGlossyEmphUpperPressed

VistaColorGlossyEmphLowerPressed and VistaOpacityGlossyEmphLowerPressed

Mouse over

VistaColorGlossyEmphUpper and VistaOpacityGlossyEmphUpper

VistaColorGlossyEmphLower and VistaOpacityGlossyEmphLower

Glow effect colors

The glow effect is applied on the Southern half of the button as seen on the image below:

The glow effect is rendered through the combination of a background color, a linear gradient positioned on the bottom of the button and a radial gradient having its center positioned on the center-bottom of the button. Usually the glow effect is only visible when the mouse hovers the button's surface.

Properties involved in this rendering are the following:

VistaColorGlowBack property represents the color used to render the background of the glow effect.

VistaColorGlowBottom property represents the color used to render the linear gradient.

VistaColorGlow property represents the color used to render the radial gradient when the mouse hovers the button surface

VistaColorGlowChecked property represents the color used to render the radial gradient when the button is in checked state (for example for checkboxes and radio buttons)

VistaColorGlowCheckedMouseOver property represents the color used to render the radial gradient when the mouse hovers the button surface and the button is in checked state (for example for checkboxes and radio buttons)

For checkboxes and radio buttons in checked state there are still 2 color elements used to define an overall background color of the button's surface: the VistaColorBackgroundChecked property and the VistaColorBackgroundCheckedMouseOver property.

As you have seen, coloring of the button surface depends upon the button's status: you can change this behaviour through the VistaLook property.

The shape of the Glossy effect can be modified through the VistaGlossyShape property and the transition to the Glow effect can be kept smooth through the VistaGlossySmoothFactor property; a button like this:

could be transformed acting on the VistaGlossyShape property

and on the VistaGlossySmoothFactor property

just for curiosity, by simply adding a white spotlight we would finally obtain a good looking lucid effect: