HypernovaDesktop Components · docs
Binarymission
WPF › Extended Button › ExtendedButton

ExtendedButton

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

A rounded button with a glass sheen over its top half, a glow that pulses under the pointer, and its own colours for the caption and the glass in the normal, hover, pressed and disabled states.

public class ExtendedButton : Button

Inherits from / implements: Button

Remarks

Use it for the buttons that should stand out – the primary action of a dialog, a toolbar of large commands, a touch screen – with a look that is set in a few properties rather than a template of your own. It is a Button in every other respect: it raises Click, runs its Command, and shows any content.

How it is drawn

The caption's colour follows the state too: ForegroundOnNormalBrush, ForegroundOnHoverBrush and ForegroundOnPressedBrush.

Defaults

The default style gives a steel-blue button at least 90 by 42 logical pixels, with 9-pixel corners, 15-point white text that turns black under the pointer, a white glass sheen and the hover glow on. The defaults quoted on each property are the ones that style sets, which differ in places from the values registered on the property itself; a style of your own that does not derive from the default one (BasedOn) starts from the registered values.

Tip

Set the caption colours with the three Foreground*Brush properties, not Control.Foreground. The default style drives Control.Foreground from them, and a local Control.Foreground overrides that, so the caption then keeps one colour in every state.

Examples

A dialog's OK and Cancel buttons: a green primary button with a continuous glow, and a plain grey one with the glow off.

<Window x:Class="Orders.ConfirmWindow"
        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.ExendedButton"
        Title="Confirm order" Width="380" Height="180">

    <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" VerticalAlignment="Bottom" Margin="12">
        <cv:ExtendedButton Content="Place order" IsDefault="True" Click="OnPlaceOrder"
                           Background="#2E7D32" CornerRadius="6"
                           IsGlowAnimationContinuous="True"
                           OnHoverGlassMixPartColor="#CCFFFFFF"
                           OnHoverGlassMixExtendedPartColor="#33A5D6A7"
                           OnPressedGlassMixPartColor="#66BB6A"
                           OnPressedGlassMixExtendedPartColor="#1B5E20"
                           ForegroundOnHoverBrush="White" />

        <cv:ExtendedButton Content="Cancel" IsCancel="True"
                           Background="#5F6B7A" CornerRadius="6"
                           IsGlowAnimationEnabled="False"
                           OnPressedGlassMixPartColor="#8A96A6"
                           OnPressedGlassMixExtendedPartColor="#3A4350" />
    </StackPanel>
</Window>

The same primary button created in code.

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

ExtendedButton placeOrder = new ExtendedButton
{
    Content = "Place order",
    IsDefault = true,
    Background = new SolidColorBrush(Color.FromRgb(0x2E, 0x7D, 0x32)),
    CornerRadius = new CornerRadius(6),
    IsGlowAnimationContinuous = true,
    OnPressedGlassMixPartColor = Color.FromRgb(0x66, 0xBB, 0x6A),
    OnPressedGlassMixExtendedPartColor = Color.FromRgb(0x1B, 0x5E, 0x20),
    ForegroundOnHoverBrush = Brushes.White
};
placeOrder.Click += (sender, e) => MessageBox.Show("Order 10482 placed.");

Members at a glance

Properties
CornerRadiusGets or sets how far the corners of the button are rounded.
ForegroundOnHoverBrushGets or sets the colour of the caption while the pointer is over the button.
ForegroundOnNormalBrushGets or sets the colour of the caption while the button is at rest – neither under the pointer nor pressed.
ForegroundOnPressedBrushGets or sets the colour of the caption while the button is held down.
GlassRadiusGets or sets the rounding of the lower edge of the glass sheen, which ends half way down the button.
IsGlowAnimationContinuousGets or sets whether the glow pulses all the time the button is on screen, rather than only while the pointer is over it.
IsGlowAnimationEnabledGets or sets whether a glow fades in and out across the button while the pointer is over it.
OnDisabledModeBrushGets or sets the brush that paints the body of the button while it is disabled.
OnHoverGlassMixExtendedPartColorGets or sets the colour at the outer edge of the glass sheen and of the glow while the pointer is over the button.
OnHoverGlassMixPartColorGets or sets the colour at the centre of the glass sheen and of the glow while the pointer is over the button.
OnNormalGlassMixExtendedPartColorGets or sets the colour at the lower edge of the glass sheen, half way down the button, while the button is at rest.
OnNormalGlassMixPartColorGets or sets the colour at the top of the glass sheen while the button is at rest.
OnPressedGlassMixExtendedPartColorGets or sets the colour at the outer edge of the button's body while it is held down.
OnPressedGlassMixPartColorGets or sets the colour at the centre of the button's body while it is held down.
Fields
CornerRadiusPropertyIdentifies the CornerRadius dependency property.
ForegroundOnHoverBrushPropertyIdentifies the ForegroundOnHoverBrush dependency property.
ForegroundOnNormalBrushPropertyIdentifies the ForegroundOnNormalBrush dependency property.
ForegroundOnPressedBrushPropertyIdentifies the ForegroundOnPressedBrush dependency property.
GlassRadiusPropertyIdentifies the GlassRadius dependency property.
IsGlowAnimationContinuousPropertyIdentifies the IsGlowAnimationContinuous dependency property.
IsGlowAnimationEnabledPropertyIdentifies the IsGlowAnimationEnabled dependency property.
OnDisabledModeBrushPropertyIdentifies the OnDisabledModeBrush dependency property.
OnHoverGlassMixExtendedPartColorPropertyIdentifies the OnHoverGlassMixExtendedPartColor dependency property.
OnHoverGlassMixPartColorPropertyIdentifies the OnHoverGlassMixPartColor dependency property.
OnNormalGlassMixExtendedPartColorPropertyIdentifies the OnNormalGlassMixExtendedPartColor dependency property.
OnNormalGlassMixPartColorPropertyIdentifies the OnNormalGlassMixPartColor dependency property.
OnPressedGlassMixExtendedPartColorPropertyIdentifies the OnPressedGlassMixExtendedPartColor dependency property.
OnPressedGlassMixPartColorPropertyIdentifies the OnPressedGlassMixPartColor dependency property.

Properties

CornerRadius

public CornerRadius CornerRadius

Gets or sets how far the corners of the button are rounded.

Value
The radius of each corner in logical pixels (1/96 inch). The default style sets 9 on every corner; the value registered on the property is 5.
Remarks

The outline, the body and the glow are all rounded by this radius, and the top corners of the glass sheen follow it automatically, inset by the border, so the sheen always sits flush inside the outline. Use 0 for a square button, or half the height for a pill.

See also

ForegroundOnHoverBrush

public Brush ForegroundOnHoverBrush

Gets or sets the colour of the caption while the pointer is over the button.

Value
The default style sets Brushes.Black, which reads well on the light hover sheen; the value registered on the property is Brushes.White.
Remarks

Pressing the button switches to ForegroundOnPressedBrush, which takes precedence while the button is held down.

See also

ForegroundOnNormalBrush

public Brush ForegroundOnNormalBrush

Gets or sets the colour of the caption while the button is at rest – neither under the pointer nor pressed.

Value
The default style sets Brushes.White; the value registered on the property is Brushes.Black.
Remarks

The default style binds Control.Foreground to this brush, so text and any content that inherits Control.Foreground takes it. A local value of Control.Foreground overrides all three caption brushes.

See also

ForegroundOnPressedBrush

public Brush ForegroundOnPressedBrush

Gets or sets the colour of the caption while the button is held down.

Value
The default is Brushes.White.
Remarks

Choose a colour that reads against OnPressedGlassMixPartColor and OnPressedGlassMixExtendedPartColor, which replace the body colour while the button is pressed.

See also

GlassRadius

public CornerRadius GlassRadius

Gets or sets the rounding of the lower edge of the glass sheen, which ends half way down the button.

Value
A radius in logical pixels (1/96 inch) for each corner; only the bottom-right and bottom-left values are used. The default style sets 0,0,13,13; the value registered on the property is 7 on every corner.
Remarks

The top corners of the sheen are worked out from CornerRadius and the border thickness so that the sheen sits flush inside the outline, and are not taken from here. The bottom corners shape the sheen itself: 0 gives a straight horizon across the middle of the button, larger values a curved one.

Example
<cv:ExtendedButton Content="Export" CornerRadius="4" GlassRadius="0,0,4,4" />
See also

IsGlowAnimationContinuous

public bool IsGlowAnimationContinuous

Gets or sets whether the glow pulses all the time the button is on screen, rather than only while the pointer is over it.

Value
true for a glow that never stops. The default is false.
Remarks

A continuous glow draws the eye to the one button the user should press next – a Save with unsaved changes, a Retry after a failure. It fades in and out every few seconds for as long as the button is visible, and stops while it is hidden, so a button on a page the user cannot see does not animate.

It takes effect even when IsGlowAnimationEnabled is false. In this mode the glow does not respond to the pointer, but the glass still takes the hover colours under it.

Example
// Pulse the Save button only while there are unsaved changes.
saveButton.IsGlowAnimationContinuous = document.HasUnsavedChanges;
See also

IsGlowAnimationEnabled

public bool IsGlowAnimationEnabled

Gets or sets whether a glow fades in and out across the button while the pointer is over it.

Value
true to animate the glow. The default style sets true; the value registered on the property is false.
Remarks

The glow is painted in OnHoverGlassMixPartColor and OnHoverGlassMixExtendedPartColor. It fades in over 1.3 seconds, out again by 2.3 seconds and back in by 3.3 seconds, then holds until the pointer leaves, when it fades away in 0.3 seconds. With the property off, the button still changes its glass and caption colours under the pointer, but nothing moves.

Setting IsGlowAnimationContinuous to true runs the glow continuously whatever the value of this property.

See also

OnDisabledModeBrush

public Brush OnDisabledModeBrush

Gets or sets the brush that paints the body of the button while it is disabled.

Value
The default is SystemColors.GrayTextBrush, the system's colour for unavailable text.
Remarks

It replaces Control.Background whenever UIElement.IsEnabled is false, and the hover glow is not shown. The glass sheen is still drawn over it. The caption keeps ForegroundOnNormalBrush.

OnHoverGlassMixExtendedPartColor

public Color OnHoverGlassMixExtendedPartColor

Gets or sets the colour at the outer edge of the glass sheen and of the glow while the pointer is over the button.

Value
The default style sets white at about 32% opacity (#52FFFFFF); the value registered on the property is Colors.LightSalmon.
See also

OnHoverGlassMixPartColor

public Color OnHoverGlassMixPartColor

Gets or sets the colour at the centre of the glass sheen and of the glow while the pointer is over the button.

Value
The default style sets white at 60% opacity (#99FFFFFF); the value registered on the property is Colors.Brown.
Remarks

Under the pointer the sheen becomes a radial gradient from this colour to OnHoverGlassMixExtendedPartColor, and the glow animation (see IsGlowAnimationEnabled) uses the same pair across the whole button. Translucent white brightens any body colour; an opaque colour tints the button instead.

See also

OnNormalGlassMixExtendedPartColor

public Color OnNormalGlassMixExtendedPartColor

Gets or sets the colour at the lower edge of the glass sheen, half way down the button, while the button is at rest.

Value
The default style sets white at about 38% opacity (#60FFFFFF); the value registered on the property is white at about 46% opacity (#75FFFFFF).
See also

OnNormalGlassMixPartColor

public Color OnNormalGlassMixPartColor

Gets or sets the colour at the top of the glass sheen while the button is at rest.

Value
The default is white at 60% opacity (#99FFFFFF).
Remarks

The sheen covers the top half of the button and fades from this colour to OnNormalGlassMixExtendedPartColor at its lower edge. Use translucent white for a glassy look over any body colour, or match both colours to Control.Background for a flat button.

See also

OnPressedGlassMixExtendedPartColor

public Color OnPressedGlassMixExtendedPartColor

Gets or sets the colour at the outer edge of the button's body while it is held down.

Value
The default is Colors.Black.
See also

OnPressedGlassMixPartColor

public Color OnPressedGlassMixPartColor

Gets or sets the colour at the centre of the button's body while it is held down.

Value
The default is Colors.Red.
Remarks

While pressed, the body is painted with a radial gradient from this colour to OnPressedGlassMixExtendedPartColor in place of Control.Background, and the glass sheen fades to 30% opacity. The red-to-black default is deliberately striking; most applications set a lighter and a darker shade of their own body colour.

See also

Fields

CornerRadiusProperty static

public static readonly DependencyProperty CornerRadiusProperty

Identifies the CornerRadius dependency property.

ForegroundOnHoverBrushProperty static

public static readonly DependencyProperty ForegroundOnHoverBrushProperty

Identifies the ForegroundOnHoverBrush dependency property.

ForegroundOnNormalBrushProperty static

public static readonly DependencyProperty ForegroundOnNormalBrushProperty

Identifies the ForegroundOnNormalBrush dependency property.

ForegroundOnPressedBrushProperty static

public static readonly DependencyProperty ForegroundOnPressedBrushProperty

Identifies the ForegroundOnPressedBrush dependency property.

GlassRadiusProperty static

public static readonly DependencyProperty GlassRadiusProperty

Identifies the GlassRadius dependency property.

IsGlowAnimationContinuousProperty static

public static readonly DependencyProperty IsGlowAnimationContinuousProperty

Identifies the IsGlowAnimationContinuous dependency property.

IsGlowAnimationEnabledProperty static

public static readonly DependencyProperty IsGlowAnimationEnabledProperty

Identifies the IsGlowAnimationEnabled dependency property.

OnDisabledModeBrushProperty static

public static readonly DependencyProperty OnDisabledModeBrushProperty

Identifies the OnDisabledModeBrush dependency property.

OnHoverGlassMixExtendedPartColorProperty static

public static readonly DependencyProperty OnHoverGlassMixExtendedPartColorProperty

Identifies the OnHoverGlassMixExtendedPartColor dependency property.

OnHoverGlassMixPartColorProperty static

public static readonly DependencyProperty OnHoverGlassMixPartColorProperty

Identifies the OnHoverGlassMixPartColor dependency property.

OnNormalGlassMixExtendedPartColorProperty static

public static readonly DependencyProperty OnNormalGlassMixExtendedPartColorProperty

Identifies the OnNormalGlassMixExtendedPartColor dependency property.

OnNormalGlassMixPartColorProperty static

public static readonly DependencyProperty OnNormalGlassMixPartColorProperty

Identifies the OnNormalGlassMixPartColor dependency property.

OnPressedGlassMixExtendedPartColorProperty static

public static readonly DependencyProperty OnPressedGlassMixExtendedPartColorProperty

Identifies the OnPressedGlassMixExtendedPartColor dependency property.

OnPressedGlassMixPartColorProperty static

public static readonly DependencyProperty OnPressedGlassMixPartColorProperty

Identifies the OnPressedGlassMixPartColor dependency property.