Number Input

带减号与加号按钮的数值输入框，即 NumericUpDown。

示例可交互

Number Input — Avalonia UIKit

Live demo unavailable

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

用法

主题涵盖 NumericUpDown（以及 ButtonSpinner）：输入框边框，减按钮位于值之前，文本居中于两个按钮之间，加按钮位于值之后。按约定按钮固定在两侧：ButtonSpinnerLocation 不起作用。Value、Minimum、Maximum、Increment 与 FormatString 都是 Avalonia 自有的属性。InnerLeftContent 与 InnerRightContent 是紧贴值的前缀与后缀。右键点击值会打开 Input 的菜单（剪切、复制、粘贴、全选）。框内任何元素获得焦点时都会显示焦点环；禁用时整个字段淡出到 50%。尺寸：xsmall（20px）、small（24px）、medium（32px，默认）与 large（44px）。

uikit:NumberInput 在输入过程中保持文本为数字，并自带步进规则。

示例

四种尺寸。

尺寸可交互

Live demo unavailable

<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>

0 到 100、步长 10 的范围，使用 Increment="0.5" 与 FormatString="0.0" 的小数字段，以及一个禁用字段。

范围与格式可交互

Live demo unavailable

<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>

货币符号作为 InnerLeftContent，单位作为 InnerRightContent，以及一个图标。

前缀与后缀可交互

Live demo unavailable

<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>

Number Input

#用法

#示例

用法

示例