Avalonia怎么使用AutoCompleteBox控件 Avalonia自动完成输入框

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

Avalonia 中的 AutoCompleteBox 是一个开箱即用的智能输入控件,用于在用户输入时动态提供匹配建议。它不依赖第三方库,原生支持,但需注意几个关键配置点才能真正好用。

基础用法与数据绑定

最简方式是在 XAML 中声明控件并绑定数据源:

ItemsSource
提供候选列表(如字符串数组、ObservableCollection
Text
双向绑定到 ViewModel 中的字符串属性,控制当前输入值
Watermark
设置占位提示文字,提升可读性
推荐搭配
FilterMode="StartsWith"
"Contains"
,按需选择匹配逻辑

示例(.axaml):

<u:AutoCompleteBox ItemsSource="{Binding SuggestList}" Text="{Binding InputText}" Watermark="输入用户名..." FilterMode="StartsWith" />

让下拉列表及时响应点击

默认行为是:必须输入至少一个字符才弹出建议列表。若想点击控件就展开全部选项(类似 ComboBox),需两步调整:

MinimumPrefixLength
设为
0
监听
PointerPressed
或点击右侧箭头事件,在代码中设
IsDropDownOpen = true

若使用 Ursa.Avalonia 的增强版,它已内置点击展开逻辑,无需手动处理。

自定义过滤与高亮显示

当标准

FilterMode
不够用(比如要按用户对象的多个字段模糊匹配),可启用自定义过滤:

设置
FilterMode="Custom"
在代码中赋值
ItemFilter
委托,接收关键词和单个数据项,返回
true
表示匹配
配合
ItemTemplate
可高亮关键词(需自行实现文本分段+Span样式)

例如匹配 User.Name 和 User.Email:

this.FindControl<AutoCompleteBox>("box").ItemFilter = (kw, item) => {<br>  var u = item as User;<br>  return u?.Name?.Contains(kw, StringComparison.OrdinalIgnoreCase) == true ||<br>         u?.Email?.Contains(kw, StringComparison.OrdinalIgnoreCase) == true;<br>};

样式与主题适配

Avalonia 原生控件样式较简朴,Ursa.Avalonia 或 Semi.Avalonia 提供了更现代的视觉方案:

引入命名空间:
xmlns:u="https://irihi.tech/ursa"
确保已安装
Irihi.Ursa
和对应主题包(如
Irihi.Ursa.Themes.Semi
通过
Styles
集成主题,并用
Classes
控制尺寸(如
Small
Bordered

弹出层高度建议显式设置

MaxDropDownHeight
,避免列表过长遮挡界面。

相关推荐