Number Input

A numeric field with minus and plus buttons, as NumericUpDown.

<NumericUpDown Value="42" Width="160" HorizontalAlignment="Left" />

#Usage

The theme covers NumericUpDown (and ButtonSpinner): the input frame with the decrease button before the value, the text centred between the buttons, and the increase button after it. The buttons stay at the sides by contract: ButtonSpinnerLocation has no effect. Value, Minimum, Maximum, Increment and FormatString are Avalonia's own. InnerLeftContent and InnerRightContent are a prefix and a suffix, right beside the value. A right click on the value opens the Input's menu (Cut, Copy, Paste, Select All). The frame shows the ring while anything in it has focus; a disabled field fades as a whole to 50%. Sizes: xsmall (20px), small (24px), medium (32px, the default) and large (44px).

uikit:NumberInput keeps the text a number while it is typed, and adds its own stepping rules.

#Examples

The four sizes.

<StackPanel Spacing="12" Width="160" HorizontalAlignment="Left">
  <NumericUpDown Classes="xsmall" Value="42" />
  <NumericUpDown Classes="small" Value="42" />
  <NumericUpDown Value="42" />
  <NumericUpDown Classes="large" Value="42" />
</StackPanel>

A range of 0 to 100 in steps of 10, a decimal field with Increment="0.5" and FormatString="0.0", and a disabled one.

<StackPanel Spacing="12" Width="160" HorizontalAlignment="Left">
  <NumericUpDown Value="50" Minimum="0" Maximum="100" Increment="10" />
  <NumericUpDown Value="2.5" Minimum="0" Maximum="10" Increment="0.5" FormatString="0.0" />
  <NumericUpDown Value="42" IsEnabled="False" />
</StackPanel>

A currency sign as InnerLeftContent, a unit as InnerRightContent, and an icon.

<StackPanel Spacing="12" Width="200" HorizontalAlignment="Left">
  <NumericUpDown Value="250" Increment="10" InnerLeftContent="$" />
  <NumericUpDown Value="72" InnerRightContent="kg" />
  <NumericUpDown Value="42">
    <NumericUpDown.InnerLeftContent>
      <PathIcon Classes="small" Data="{StaticResource UIKit.Icon.Search}" />
    </NumericUpDown.InnerLeftContent>
  </NumericUpDown>
</StackPanel>