Spinner

The number

Value is the number, held within MinimumValue and MaximumValue (0 to 100 by default), and null while the box is empty. Each step adds or takes away Increment, and a step past a limit stops at the limit. ValueFormat decides how the number is shown – whole numbers by default – in the user's culture. ValueChanged follows every change.

Typing

Only text that could become a number is accepted, typed or pasted: digits, the culture's group separators, one decimal separator, and a minus sign when the range goes below zero. The number typed is taken when the user presses Enter, leaves the box, or steps; clearing the box sets the value to null, and Escape puts back the value as it was. A value that is shown rounded is not rounded by tabbing through the box.

Keyboard and mouse

IsReadOnly turns all of these off.

Appearance

The colours of the box and the arrows come from the default style, or from a Binarymission skin while one is in force; a brush set on the control wins over both. NavigationControlStyle and ContentHostControlStyle restyle the buttons and the text box.

An order quantity from 1 to 500, bound two-way to a view model, and a discount shown to one decimal place.

<Window x:Class="Orders.OrderLineWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:spin="clr-namespace:Binarymission.WPF.Controls.InputControls;assembly=Binarymission.WPF.Controls.InputControls.Spinners"
        Title="Order line" Width="360" Height="180">

    <StackPanel Margin="12">
        <TextBlock Text="Quantity" />
        <spin:NumericSpinner Width="120" Height="26" HorizontalAlignment="Left"
                             MinimumValue="1" MaximumValue="500" Increment="1"
                             Value="{Binding Quantity, Mode=TwoWay}" />

        <TextBlock Text="Discount (%)" Margin="0,8,0,0" />
        <spin:NumericSpinner x:Name="Discount" Width="120" Height="26" HorizontalAlignment="Left"
                             MinimumValue="0" MaximumValue="50" Increment="0.5" ValueFormat="0.0"
                             Value="0" ValueChanged="OnDiscountChanged" />
    </StackPanel>
</Window>

The handler, reading the new value from the event.

using System.Windows;
using Binarymission.WPF.Controls.InputControls;

private void OnDiscountChanged(object sender, RoutedEventArgs e)
{
    var change = (NumericSpinner.ValueChangedEventArgs)e;
    double? percent = (double?)change.Value;
    totalText.Text = (orderTotal * (1 - (percent ?? 0) / 100)).ToString("C");
}