NumberPicker

Numeric input with arrow key increment/decrement and direct digit entry.

Overview

NumberPicker extends Control and provides a focused numeric input for selecting a value within a defined range. The control displays the current value with optional left/right arrow indicators. Users can adjust the value using arrow keys for fine-grained increment/decrement, Page Up/Down for larger jumps, or type digits directly for rapid entry. The value is always clamped between Minimum and Maximum. DecimalPlaces and FormatString control how the number is rendered, making it suitable for both integer counters and decimal inputs like percentages or currencies.

Basic Example

<StackPanel Orientation="Vertical">
  <TextBlock Text="Select quantity:" />
  <NumberPicker Value="1" Minimum="1" Maximum="99" Increment="1" />
</StackPanel>

Properties

Property	Type	Default	Description
Value	double	0	The current numeric value of the picker.
Minimum	double	0	The smallest allowed value. The control clamps input to this floor.
Maximum	double	100	The largest allowed value. The control clamps input to this ceiling.
Increment	double	1	The amount added or subtracted per arrow key press.
DecimalPlaces	int	0	Number of decimal digits displayed. Use 0 for integer-only input.
FormatString	string?	null	Optional .NET format string (e.g. `"C2"`, `"P0"`). Overrides DecimalPlaces when set.
Width	Size	Auto	Explicit width of the control.
Height	Size	Auto	Explicit height of the control.
FocusColor	Color	Cyan	Border color when the control has keyboard focus.
HoverColor	Color	Yellow	Border color when the mouse hovers over the control.

Examples

Integer Picker

<StackPanel Orientation="Vertical">
  <TextBlock Text="Items in cart:" />
  <NumberPicker Value="1"
                Minimum="1"
                Maximum="50"
                Increment="1"
                DecimalPlaces="0" />
</StackPanel>

Decimal Picker

<StackPanel Orientation="Vertical">
  <TextBlock Text="Temperature (&deg;C):" />
  <NumberPicker Value="36.5"
                Minimum="30.0"
                Maximum="45.0"
                Increment="0.1"
                DecimalPlaces="1" />
</StackPanel>

Large Range with Step 100

<StackPanel Orientation="Vertical">
  <TextBlock Text="Budget ($):" />
  <NumberPicker Value="1000"
                Minimum="0"
                Maximum="100000"
                Increment="100"
                DecimalPlaces="0"
                FocusColor="Green" />
</StackPanel>

Keyboard Shortcuts

Key	Action
Up Arrow	Increment the value by `Increment`.
Right Arrow	Increment the value by `Increment`.
Down Arrow	Decrement the value by `Increment`.
Left Arrow	Decrement the value by `Increment`.
Page Up	Increment the value by 10 × `Increment`.
Page Down	Decrement the value by 10 × `Increment`.
Home	Set the value to `Minimum`.
End	Set the value to `Maximum`.
0–9	Direct digit entry — appends to the current input buffer.
Backspace	Delete the last entered digit from the input buffer.
Enter	Commit the typed digit sequence and clamp to the allowed range.

Key Concepts

NumberPicker extends Control and is focusable by default, supporting both keyboard and mouse interaction.
The value is always clamped between Minimum and Maximum — arrow keys, digit entry, and programmatic changes all respect the range.
When FormatString is set it takes precedence over DecimalPlaces for display formatting, allowing currency, percentage, or custom patterns.
Direct digit entry accumulates in an internal buffer; pressing Enter commits the typed number, while Escape or losing focus discards uncommitted input.
Page Up and Page Down provide a 10× multiplier on the Increment for quickly traversing large ranges.
Use Value="{Binding ...}" with Mode=TwoWay for two-way data binding of the numeric value.