Microsoft guidelines for creating WPF "gel" buttons

Question

Anyone know where I can find the Microsoft guidelines for creating WPF gel-type buttons? I'm not sure if "gel" is the correct name for this effect but I have heard many people use the term. If MS doesn't have a guideline, do you have some other standards or guidelines for creating these buttons?

Answer 1

Have a look at the glass button.

There are a number of XAML elements which go into making up the button. They are clearly commented in the XAML but the list is as follows:

• Drop-shadow: an ellipse with a radial gradient of black fading to tranparent
• Button surround: a white ellipse slightly bigger than the green one
• Black button background: only visible round the edges of the green when the button is pressed
• Main button colour: the green (or whatever color you want) of the button. This ellipse is clipped to its initial outline, thus allowing us to move the ellipse slightly for the button press without it overlapping the button surround
• Top glow: an ellipse with a linear gradient background of white (at the top) fading to transparent. Smaller than the main button colour and positioned so that the tops are the same
• Bottom glow: an ellipse the same size as the main button colour but with a linear gradient background of white (at the bottom) fading to transparent. This is also clipped as per the main button colour.
• Hover-over glow: an ellipse the same size as the main button colour with a radial gradient background of white (at the centre of the ellipse) fading to transparent. This is initially transparent.
• Transparent element for catching mouse events: on top of all of this is a transparent ellipse the same size as the white button surround for catching MouseEnter, MouseLeave, MouseLeftButtonDown and MouseLeftButtonUp events. This element also contains the Storyboard for the pulsating hover-over effect (although this could be in any XAML element).