Avalonia如何实现一个数字输入框 Avalonia NumericUpDown

来源:这里教程网 时间:2026-02-21 17:35:21 作者:

Avalonia 自带的 NumberBox(自 11.0 版本起)是官方推荐的数字输入控件,功能完整、支持键盘操作、绑定友好、样式可定制。而老版本中常用的 IntegerUpDownNumericUpDown 并非 Avalonia 原生控件,而是来自第三方库(如 Avalonia.Controls.NumericUpDown),需手动引入。

使用 Avalonia 内置 NumberBox(推荐,v11.0+)

这是最轻量、最稳定的方式,无需额外 NuGet 包:

在 XAML 中直接声明: 支持鼠标滚轮、上下键增减、直接输入、粘贴校验(超出范围会自动截断) 可通过
SpinButtonPlacementMode
控制是否显示左右微调按钮(
Compact
/
Hidden
/
Inline
绑定属性建议用
double?
int?
,空值时显示为空白;若需非空,可设
Value="{Binding MyValue, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"
并在 ViewModel 中处理默认值

使用第三方 NumericUpDown(兼容旧版或需整数专用行为)

若项目仍在用 Avalonia ValueChanged 阻断),可选用社区维护的控件:

安装 NuGet 包:
Avalonia.Controls.NumericUpDown
XAML 中添加命名空间:xmlns:numeric="clr-namespace:Avalonia.Controls;assembly=Avalonia.Controls.NumericUpDown" 使用示例: 注意:该控件默认只接受整数,且
Value
类型为
int
(不可空),适合计数类场景

自定义简易整数输入框(无依赖、可控性强)

如果只需基础功能且想完全掌控逻辑(比如限制输入字符、实时过滤、特殊格式),可用

TextBox
+ 后端逻辑实现:

XAML: ViewModel 中
InputText
是字符串,配合正则(
^\d*$
)或
int.TryParse
校验
OnTextBoxKeyDown
中拦截方向键、回车等,按需触发加减(例如按 ↑/↓ 键时修改绑定的
Value
适合嵌入复杂表单或需与单位、前缀联动的场景(如 “5 kg”、“¥128”)

样式与主题适配要点

Avalonia 的控件样式高度可定制,但要注意:

NumberBox
默认使用系统主题色,若全局换肤(如深色模式),它会自动响应
若重写模板,重点调整
TextBlock
(显示区)、
RepeatButton
(上下按钮)、
TextBox
(编辑区)三部分
第三方
NumericUpDown
的模板位于其 GitHub 的
Themes\Generic.xaml
,可复制修改后在 App.axaml 中合并
避免直接修改
ControlTemplate
中的硬编码颜色,优先用
{DynamicResource ...}
引用主题资源

相关推荐