Glass Button

Use it where an ordinary rectangular button would look out of place – a media player's play and pause controls, a kiosk's large touch targets, the main call to action on a landing screen. It is a Button in every other respect: it raises Click, runs its Command, and shows any content – text, an icon or both – centred on the glass.

Size and shape

The glass is an ellipse that fills the button's FrameworkElement.Width and FrameworkElement.Height, so give it both: equal values make a circle, unequal ones an oval pill. Without them the glass shrinks to the size of the caption.

How the glass is coloured

The button is painted in four layers, each with properties of its own, and the default style sets every one of them to a deep blue bead with white highlights:

To recolour the bead, it is usually enough to change the two body brushes; the highlights are white at varying opacity and suit a body of any dark or mid-tone colour. The glow and reflection colours are radial gradients, numbered from the outer edge (Part1) inwards.

Each default given on these properties is the one the default style sets. Without that style every colour is transparent and every brush null, and the button draws only its content.

A pair of 64-pixel media buttons, one in the default blue and one recoloured green.

<Window x:Class="Player.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:cv="clr-namespace:Binarymission.WPF.Controls.CommandVisuals;assembly=Binarymission.WPF.Controls.GlassButton"
        Title="Player" Width="300" Height="160">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center">
        <cv:GlassButton Width="64" Height="64" Margin="8"
                        Content="Play" Foreground="White" FontWeight="SemiBold"
                        Click="OnPlayClick" />

        <cv:GlassButton Width="64" Height="64" Margin="8"
                        Content="Save" Foreground="White" FontWeight="SemiBold"
                        Command="ApplicationCommands.Save">
            <cv:GlassButton.OnNormalBackgroundFillPart1>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0"     Color="#FFD3F2D6" />
                    <GradientStop Offset="0.34"  Color="#FF8FD19A" />
                    <GradientStop Offset="0.375" Color="#FF2E7D3A" />
                    <GradientStop Offset="1"     Color="#FF17451F" />
                </LinearGradientBrush>
            </cv:GlassButton.OnNormalBackgroundFillPart1>
        </cv:GlassButton>
    </StackPanel>
</Window>

The same button created in code.

using System.Windows;
using System.Windows.Media;
using Binarymission.WPF.Controls.CommandVisuals;

GlassButton record = new GlassButton
{
    Width = 72,
    Height = 72,
    Content = "Rec",
    Foreground = Brushes.White,
    OnNormalBackgroundFillPart1 = new LinearGradientBrush(
        Color.FromRgb(0xF2, 0x9A, 0x9A), Color.FromRgb(0x7A, 0x12, 0x12), 90)
};
record.Click += (sender, e) => MessageBox.Show("Recording started.");