Glossy shiny square button in WPF - XAML

Question

I am trying to find rectangle buttons with gloss effect. all examples are relevant for round buttons. (and when editing the code, the gloss effect is not suit the rectangle.

Do anyone know about xaml examples for button like in the images below?

Answer 1

It is possible to do this with XAML. There is a great XAML resource page for such things called xamalot.com. I have taken one button as a reference: http://xamalot.com/asset/0fc669c8-35f8-49c0-bceb-0d07f1d63691 :

The whole thing to draw with XAML is not that easy, but there are tools out there which allow you to draw and export like Microsoft's Expression Design.

Answer 2

The best way to accomplish this is with an image as content for the button.

<Button BorderThickness="0">
    <Image Source="http://i.stack.imgur.com/XAgzU.jpg"/>
</Button>

You can use shading to get the effect in the second image or reflection to get the effect in the first image

Answer 3

You can create these kind of graphics with Illustrator easily, and Expression Blend has a feature to convert Illustrator vector files to XAML.

This option is the best in terms of quality, of course, since your graphics.

As an alternative, Expression Blend can do this too, maybe even faster.
I did do this type of thing once and I just drew the basic shape with a color, then drew another shape there, changed the scale + converted the shape to a path in Blend so I could move the points, then just applied a white color with lower alpha, and that's it.

I didn't provide much details in this answer so for any further information just leave me a comment.

Important tip: put your XAML graphics in a Viewbox!