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 and ColorSurfaceNormal properties (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:
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.
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 vertical 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
VistaColorGlossyEffectUpper and VistaOpacityGlossyEffectUpper VistaColorGlossyEffectLower and VistaOpacityGlossyEffectLower
VistaColorGlossyEmphUpperPressed and VistaOpacityGlossyEmphUpperPressed VistaColorGlossyEmphLowerPressed and VistaOpacityGlossyEmphLowerPressed
VistaColorGlossyEmphUpper and VistaOpacityGlossyEmphUpper VistaColorGlossyEmphLower and VistaOpacityGlossyEmphLower
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 (see the How to manage surface lighting tutorial for details):
The simplest way to change colors and options applied to the Vista's Aero style is to use, inside 3D Button Visual Editor, the Vista's Aero style tab. At run-time each of these properties can be referenced by name. Note: The images below have hot links to take you to explanations of the various button settings.
|