Extended Button

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 body is the button's Control.Background inside a rounded outline (CornerRadius, Control.BorderBrush, Control.BorderThickness).
• The glass is a pale gradient over the top half, from OnNormalGlassMixPartColor at the top to OnNormalGlassMixExtendedPartColor half way down. Its top corners follow the outline exactly; GlassRadius shapes its underside.
• Under the pointer the glass becomes a radial gradient of OnHoverGlassMixPartColor and OnHoverGlassMixExtendedPartColor, and with IsGlowAnimationEnabled on a glow in the same colours fades in and out across the whole button.
• Pressed, the body becomes a radial gradient of OnPressedGlassMixPartColor and OnPressedGlassMixExtendedPartColor and the glass dims.
• Disabled, the body is painted with OnDisabledModeBrush.

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.

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