GlassButton

class.NET 6 / 8 / 10.NET Framework 4.8Binarymission.WPF.Controls.CommandVisuals

A round, glossy button drawn as a glass bead: a dark body with a bright reflection across its top and a glow rising from its foot that brighten under the pointer and change again when pressed.

public class GlassButton : Button

Inherits from / implements: Button

Remarks

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:

Layer	Properties
Body	`OnNormalBackgroundFillPart1` (the glass itself) and `OnNormalBackgroundFillPart2` (a softer bloom over it). These do not change with the button's state.
Glow from the foot	`OnNormalFillColorPart1` and `OnNormalFillColorPart2` at rest; `OnHoverBottomFillColorPart1` and `OnHoverBottomFillColorPart2` under the pointer; `OnPressedBottomFillColorPart1` and `OnPressedBottomFillColorPart2` while pressed.
Reflection across the top	`OnNormalReflectionColorPart1` to `OnNormalReflectionColorPart3` at rest; `OnHoverTopFillColorPart1` to `OnHoverTopFillColorPart3` under the pointer; `OnPressedTopFillColorPart1` to `OnPressedTopFillColorPart3` while pressed.
Content	The button's `ContentControl.Content`, centred, drawn with its `Control.Foreground`.

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.

Examples

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.");

Members at a glance

Properties
`OnHoverBottomFillColorPart1`	Gets or sets the colour at the outer edge of the glow that rises from the foot of the button while the pointer is over it.
`OnHoverBottomFillColorPart2`	Gets or sets the colour towards the centre of the glow that rises from the foot of the button while the pointer is over it.
`OnHoverTopFillColorPart1`	Gets or sets the colour at the outer edge of the reflection across the top half of the button while the pointer is over it.
`OnHoverTopFillColorPart2`	Gets or sets the colour just inside the edge of the reflection across the top half of the button while the pointer is over it.
`OnHoverTopFillColorPart3`	Gets or sets the colour at the centre of the reflection across the top half of the button while the pointer is over it.
`OnNormalBackgroundFillPart1`	Gets or sets the brush that fills the body of the glass – the bead itself, under every highlight.
`OnNormalBackgroundFillPart2`	Gets or sets the brush for a soft, blurred bloom drawn over the body of the glass.
`OnNormalFillColorPart1`	Gets or sets the colour at the outer edge of the glow that rises from the foot of the button at rest.
`OnNormalFillColorPart2`	Gets or sets the colour towards the centre of the glow that rises from the foot of the button at rest.
`OnNormalReflectionColorPart1`	Gets or sets the colour at the outer edge of the reflection across the top half of the button at rest.
`OnNormalReflectionColorPart2`	Gets or sets the colour just inside the edge of the reflection across the top half of the button at rest.
`OnNormalReflectionColorPart3`	Gets or sets the colour at the centre of the reflection across the top half of the button at rest.
`OnPressedBottomFillColorPart1`	Gets or sets the colour at the outer edge of the glow that rises from the foot of the button while it is pressed.
`OnPressedBottomFillColorPart2`	Gets or sets the colour towards the centre of the glow that rises from the foot of the button while it is pressed.
`OnPressedTopFillColorPart1`	Gets or sets the colour at the outer edge of the reflection across the top half of the button while it is pressed.
`OnPressedTopFillColorPart2`	Gets or sets the colour just inside the edge of the reflection across the top half of the button while it is pressed.
`OnPressedTopFillColorPart3`	Gets or sets the colour at the centre of the reflection across the top half of the button while it is pressed.
Fields
`OnHoverBottomFillColorPart1Property`	Identifies the `OnHoverBottomFillColorPart1` dependency property.
`OnHoverBottomFillColorPart2Property`	Identifies the `OnHoverBottomFillColorPart2` dependency property.
`OnHoverTopFillColorPart1Property`	Identifies the `OnHoverTopFillColorPart1` dependency property.
`OnHoverTopFillColorPart2Property`	Identifies the `OnHoverTopFillColorPart2` dependency property.
`OnHoverTopFillColorPart3Property`	Identifies the `OnHoverTopFillColorPart3` dependency property.
`OnNormalBackgroundFillPart1Property`	Identifies the `OnNormalBackgroundFillPart1` dependency property.
`OnNormalBackgroundFillPart2Property`	Identifies the `OnNormalBackgroundFillPart2` dependency property.
`OnNormalFillColorPart1Property`	Identifies the `OnNormalFillColorPart1` dependency property.
`OnNormalFillColorPart2Property`	Identifies the `OnNormalFillColorPart2` dependency property.
`OnNormalReflectionColorPart1Property`	Identifies the `OnNormalReflectionColorPart1` dependency property.
`OnNormalReflectionColorPart2Property`	Identifies the `OnNormalReflectionColorPart2` dependency property.
`OnNormalReflectionColorPart3Property`	Identifies the `OnNormalReflectionColorPart3` dependency property.
`OnPressedBottomFillColorPart1Property`	Identifies the `OnPressedBottomFillColorPart1` dependency property.
`OnPressedBottomFillColorPart2Property`	Identifies the `OnPressedBottomFillColorPart2` dependency property.
`OnPressedTopFillColorPart1Property`	Identifies the `OnPressedTopFillColorPart1` dependency property.
`OnPressedTopFillColorPart2Property`	Identifies the `OnPressedTopFillColorPart2` dependency property.
`OnPressedTopFillColorPart3Property`	Identifies the `OnPressedTopFillColorPart3` dependency property.

Properties

OnHoverBottomFillColorPart1

public Color OnHoverBottomFillColorPart1

Gets or sets the colour at the outer edge of the glow that rises from the foot of the button while the pointer is over it.

Value: The default is white at about 73% opacity (#BBFFFFFF), noticeably brighter than at rest.

Remarks

Replaces OnNormalFillColorPart1 while the pointer is over the button.

OnHoverBottomFillColorPart2

public Color OnHoverBottomFillColorPart2

Gets or sets the colour towards the centre of the glow that rises from the foot of the button while the pointer is over it.

Value: The default is fully transparent (#00000000).

Remarks

Replaces OnNormalFillColorPart2 while the pointer is over the button.

OnHoverTopFillColorPart1

public Color OnHoverTopFillColorPart1

Gets or sets the colour at the outer edge of the reflection across the top half of the button while the pointer is over it.

Value: The default is fully transparent (#00000000).

Remarks

Replaces OnNormalReflectionColorPart1 while the pointer is over the button; together with OnHoverTopFillColorPart2 and OnHoverTopFillColorPart3 it makes the highlight move inwards, which reads as the glass lighting up.

OnHoverTopFillColorPart2

public Color OnHoverTopFillColorPart2

Gets or sets the colour just inside the edge of the reflection across the top half of the button while the pointer is over it.

Value: The default is white at about 57% opacity (#92FFFFFF).

Remarks

Replaces OnNormalReflectionColorPart2 while the pointer is over the button.

OnHoverTopFillColorPart3

public Color OnHoverTopFillColorPart3

Gets or sets the colour at the centre of the reflection across the top half of the button while the pointer is over it.

Value: The default is fully transparent (#00000000).

Remarks

Replaces OnNormalReflectionColorPart3 while the pointer is over the button.

OnNormalBackgroundFillPart1

public Brush OnNormalBackgroundFillPart1

Gets or sets the brush that fills the body of the glass – the bead itself, under every highlight.

Value: The default is a vertical gradient from pale blue at the top, through a sharp "water line" a third of the way down, to deep navy at the foot.

Remarks

This is the brush to change to recolour the button. It is drawn slightly blurred, and is the same in every state; a vertical gradient with a sudden step above the middle reads best as glass. Set it to null and the body is not drawn, leaving only the highlights over whatever is behind the button.

OnNormalBackgroundFillPart2

public Brush OnNormalBackgroundFillPart2

Gets or sets the brush for a soft, blurred bloom drawn over the body of the glass.

Value: The default is transparent above and a faint pale-blue glow towards the foot.

Remarks

It is drawn with a heavier blur than OnNormalBackgroundFillPart1, so it softens the edge of the bead and lifts its lower half. It does not change with the button's state.

OnNormalFillColorPart1

public Color OnNormalFillColorPart1

Gets or sets the colour at the outer edge of the glow that rises from the foot of the button at rest.

Value: The default is white at about 35% opacity (#59FFFFFF).

Remarks

The glow is a radial gradient from OnNormalFillColorPart2 at its centre to this colour at its edge, centred below the button. Under the pointer it is replaced by OnHoverBottomFillColorPart1, and while pressed by OnPressedBottomFillColorPart1.

OnNormalFillColorPart2

public Color OnNormalFillColorPart2

Gets or sets the colour towards the centre of the glow that rises from the foot of the button at rest.

Value: The default is fully transparent (#00000000).

Remarks

Paired with OnNormalFillColorPart1. Under the pointer it is replaced by OnHoverBottomFillColorPart2, and while pressed by OnPressedBottomFillColorPart2.

OnNormalReflectionColorPart1

public Color OnNormalReflectionColorPart1

Gets or sets the colour at the outer edge of the reflection across the top half of the button at rest.

Value: The default is opaque white (#FFFFFFFF).

Remarks

The reflection is a radial gradient over the upper half of the glass: this colour at its edge, OnNormalReflectionColorPart2 just inside it and OnNormalReflectionColorPart3 at its centre. Under the pointer the three are replaced by OnHoverTopFillColorPart1 to OnHoverTopFillColorPart3.

OnNormalReflectionColorPart2

public Color OnNormalReflectionColorPart2

Gets or sets the colour just inside the edge of the reflection across the top half of the button at rest.

Value: The default is white at about 57% opacity (#92FFFFFF).

Remarks

The middle of the three reflection colours; see OnNormalReflectionColorPart1.

OnNormalReflectionColorPart3

public Color OnNormalReflectionColorPart3

Gets or sets the colour at the centre of the reflection across the top half of the button at rest.

Value: The default is fully transparent (#00000000), so the reflection fades out towards the middle of the button.

Remarks

The innermost of the three reflection colours; see OnNormalReflectionColorPart1.

OnPressedBottomFillColorPart1

public Color OnPressedBottomFillColorPart1

Gets or sets the colour at the outer edge of the glow that rises from the foot of the button while it is pressed.

Value: The default is white at 40% opacity (#66FFFFFF), dimmer than under the pointer, so the button appears to sink.

Remarks

Replaces the glow colours of the hover and normal states for as long as IsPressed is true.

OnPressedBottomFillColorPart2

public Color OnPressedBottomFillColorPart2

Gets or sets the colour towards the centre of the glow that rises from the foot of the button while it is pressed.

Value: The default is fully transparent (#00000000).

Remarks

Paired with OnPressedBottomFillColorPart1.

OnPressedTopFillColorPart1

public Color OnPressedTopFillColorPart1

Gets or sets the colour at the outer edge of the reflection across the top half of the button while it is pressed.

Value: The default is fully transparent (#00000000).

Remarks

Replaces the reflection colours of the hover and normal states for as long as IsPressed is true, together with OnPressedTopFillColorPart2 and OnPressedTopFillColorPart3.

OnPressedTopFillColorPart2

public Color OnPressedTopFillColorPart2

Gets or sets the colour just inside the edge of the reflection across the top half of the button while it is pressed.

Value: The default is fully transparent (#00000000).

Remarks

See OnPressedTopFillColorPart1.

OnPressedTopFillColorPart3

public Color OnPressedTopFillColorPart3

Gets or sets the colour at the centre of the reflection across the top half of the button while it is pressed.

Value: The default is opaque white (#FFFFFFFF): the highlight gathers into the middle of the glass, as if pressed into it.

Remarks

See OnPressedTopFillColorPart1.

Fields

OnHoverBottomFillColorPart1Property static

public static readonly DependencyProperty OnHoverBottomFillColorPart1Property

Identifies the OnHoverBottomFillColorPart1 dependency property.

OnHoverBottomFillColorPart2Property static

public static readonly DependencyProperty OnHoverBottomFillColorPart2Property

Identifies the OnHoverBottomFillColorPart2 dependency property.

OnHoverTopFillColorPart1Property static

public static readonly DependencyProperty OnHoverTopFillColorPart1Property

Identifies the OnHoverTopFillColorPart1 dependency property.

OnHoverTopFillColorPart2Property static

public static readonly DependencyProperty OnHoverTopFillColorPart2Property

Identifies the OnHoverTopFillColorPart2 dependency property.

OnHoverTopFillColorPart3Property static

public static readonly DependencyProperty OnHoverTopFillColorPart3Property

Identifies the OnHoverTopFillColorPart3 dependency property.

OnNormalBackgroundFillPart1Property static

public static readonly DependencyProperty OnNormalBackgroundFillPart1Property

Identifies the OnNormalBackgroundFillPart1 dependency property.

OnNormalBackgroundFillPart2Property static

public static readonly DependencyProperty OnNormalBackgroundFillPart2Property

Identifies the OnNormalBackgroundFillPart2 dependency property.

OnNormalFillColorPart1Property static

public static readonly DependencyProperty OnNormalFillColorPart1Property

Identifies the OnNormalFillColorPart1 dependency property.

OnNormalFillColorPart2Property static

public static readonly DependencyProperty OnNormalFillColorPart2Property

Identifies the OnNormalFillColorPart2 dependency property.

OnNormalReflectionColorPart1Property static

public static readonly DependencyProperty OnNormalReflectionColorPart1Property

Identifies the OnNormalReflectionColorPart1 dependency property.

OnNormalReflectionColorPart2Property static

public static readonly DependencyProperty OnNormalReflectionColorPart2Property

Identifies the OnNormalReflectionColorPart2 dependency property.

OnNormalReflectionColorPart3Property static

public static readonly DependencyProperty OnNormalReflectionColorPart3Property

Identifies the OnNormalReflectionColorPart3 dependency property.

OnPressedBottomFillColorPart1Property static

public static readonly DependencyProperty OnPressedBottomFillColorPart1Property

Identifies the OnPressedBottomFillColorPart1 dependency property.

OnPressedBottomFillColorPart2Property static

public static readonly DependencyProperty OnPressedBottomFillColorPart2Property

Identifies the OnPressedBottomFillColorPart2 dependency property.

OnPressedTopFillColorPart1Property static

public static readonly DependencyProperty OnPressedTopFillColorPart1Property

Identifies the OnPressedTopFillColorPart1 dependency property.

OnPressedTopFillColorPart2Property static

public static readonly DependencyProperty OnPressedTopFillColorPart2Property

Identifies the OnPressedTopFillColorPart2 dependency property.

OnPressedTopFillColorPart3Property static

public static readonly DependencyProperty OnPressedTopFillColorPart3Property

Identifies the OnPressedTopFillColorPart3 dependency property.