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

发布时间 - 2025-12-27 00:00:00    点击率:
Avalonia 的 AutoCompleteBox 是原生智能输入控件,需配置 ItemsSource、Text、Watermark 及 FilterMode;设 MinimumPrefixLength=0 并手动触发 IsDropDownOpen 可实现点击展开;支持 Custom 过滤与高亮;推荐 Ursa/Semi 主题优化样式。

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

基础用法与数据绑定

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

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

示例(.axaml):

让下拉列表及时响应点击

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

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

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

自定义过滤与高亮显示

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

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

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

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

样式与主题适配

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

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

弹出层高度建议显式设置 MaxDropDownHeight,避免列表过长遮挡界面。


# ai  # 字符串数组  # red  # 命名空间  # 字符串  # 委托  # 对象  # 事件  # https  # 关键词  # 绑定  # 弹出  # 自定义  # 是一个  # 几个  # 是在  # 多个  # 设为  # 好用 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何在IIS7中新建站点?详细步骤解析  高端企业智能建站程序:SEO优化与响应式模板定制开发  微博html5版本怎么弄发语音微博_语音录制入口及时长限制操作【教程】  Laravel如何实现全文搜索功能?(Scout和Algolia示例)  香港服务器WordPress建站指南:SEO优化与高效部署策略  在线制作视频网站免费,都有哪些好的动漫网站?  LinuxShell函数封装方法_脚本复用设计思路【教程】  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  Laravel中的Facade(门面)到底是什么原理  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  html文件怎么打开证书错误_https协议的html打开提示不安全【指南】  浅述节点的创建及常见功能的实现  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  如何快速搭建高效简练网站?  JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)  Laravel如何实现用户注册和登录?(Auth脚手架指南)  桂林网站制作公司有哪些,桂林马拉松怎么报名?  如何选择PHP开源工具快速搭建网站?  如何在IIS中配置站点IP、端口及主机头?  Laravel如何实现模型的全局作用域?(Global Scope示例)  Laravel怎么上传文件_Laravel图片上传及存储配置  JavaScript Ajax实现异步通信  微信小程序 require机制详解及实例代码  安克发布新款氮化镓充电宝:体积缩小 30%,支持 200W 输出  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  node.js报错:Cannot find module 'ejs'的解决办法  html5源代码发行怎么设置权限_访问权限控制方法与实践【指南】  个人网站制作流程图片大全,个人网站如何注销?  详解jQuery中的事件  香港代理服务器配置指南:高匿IP选择、跨境加速与SEO优化技巧  深圳网站制作平台,深圳市做网站好的公司有哪些?  laravel怎么通过契约(Contracts)编程_laravel契约(Contracts)编程方法  Laravel用户密码怎么加密_Laravel Hash门面使用教程  如何在IIS7上新建站点并设置安全权限?  网站制作壁纸教程视频,电脑壁纸网站?  iOS正则表达式验证手机号、邮箱、身份证号等  javascript中的try catch异常捕获机制用法分析  如何快速生成专业多端适配建站电话?  香港服务器部署网站为何提示未备案?  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  Laravel怎么配置.env环境变量_Laravel生产环境敏感数据保护与读取【方法】  如何快速生成可下载的建站源码工具?  Laravel如何生成URL和重定向?(路由助手函数)  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  车管所网站制作流程,交警当场开简易程序处罚决定书,在交警网站查询不到怎么办?  详解免费开源的.NET多类型文件解压缩组件SharpZipLib(.NET组件介绍之七)  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  消息称 OpenAI 正研发的神秘硬件设备或为智能笔,富士康代工  网站制作免费,什么网站能看正片电影?