WPF UI AutoSuggestBox 完全指南：3行XAML做出“边打边搜“的搜索框

WPF UI AutoSuggestBox 完全指南3行XAML做出边打边搜的搜索框【免费下载链接】wpfuiWPF UI provides the Fluent experience in your known and loved WPF framework. Intuitive design, themes, navigation and new immersive controls. All natively and effortlessly.项目地址: https://gitcode.com/GitHub_Trending/wp/wpfuiWPF UI 提供的 AutoSuggestBox 是一个自带提示列表的输入框用户敲下前几个字符匹配项就实时弹出来点一下即完成选择。这篇文章从 3 行 XAML 的最小可用组合讲起再拆开它内置的过滤机制最后给你一份踩坑对照表——看完即可直接上手。场景谁还没被必须输完才能搜折磨过想象一个带几十个菜单项的管理台用户想找数据大屏页得一字不差地敲完敲错一个字就重来。或者一个命令面板想唤起某个功能却记不全命令名。传统 TextBox 自己写筛选逻辑光是对焦、上下键、回车确认这些细节就够写半天。 AutoSuggestBox 把这些全都封装好了你要做的只是喂数据。3分钟跑起来最短的三行组合先装 NuGet 包Wpf.Ui在 App.xaml 合并两个资源字典参考 getting-started。然后最小可用形态就一行控件 一个事件ui:AutoSuggestBox Icon{ui:SymbolIcon Search24} OriginalItemsSource{Binding AutoSuggestBoxSuggestions} PlaceholderTextSearch... /// 数据源就是一个普通的字符串列表 AutoSuggestBoxSuggestions new Liststring { John, Winston, Adrianna, Spencer, Phoebe, Lucas, Carl, };数据源来自 Gallery 示例页你可以照抄。此时输入框已经能用了键入时下方弹出匹配列表回车提交、Esc 关闭无需任何额外代码。想监听用户最终选择挂上SuggestionChosen事件即可args.SelectedItem就是用户点中/确认的那一项。需要对照源码时可以拉取仓库git clone https://gitcode.com/GitHub_Trending/wp/wpfui控件本体在 src/Wpf.Ui/Controls/AutoSuggestBox/AutoSuggestBox.cs。机制拆解建议列表到底是谁在过滤很多人以为建议列表是靠绑定ItemsSource撑起来的——不是。这里有个容易搞混的设计属性角色谁在写它OriginalItemsSource完整候选池原始数据你ItemsSource过滤后实际显示的建议项控件内部用户每敲一个字符控件内部就执行一遍默认过滤DefaultFiltering把输入按空格拆成若干词元然后检查候选项的文本是否同时包含每一个词元忽略大小写的子串匹配命中的结果写回ItemsSource。也就是说输入ab匹配 abc但匹配 a c子串逻辑输入ab cd要求两项都包含相当于 AND 过滤输入清空时自动还原为OriginalItemsSource全量。候选项怎么变成文本也有讲究控件会优先读DisplayMemberPath指向的属性值其次才是对象本身的ToString()。所以绑自定义对象时这一属性基本是必设项。还有一个贴心的细节TextChanged事件带着Reason参数UserInput/SuggestionChosen/ProgrammaticChange让你能分清这次变化是手敲的、还是选中回填的、还是代码改的——这正是你接自定义过滤时避免无限循环的钥匙。进阶玩法两个直接抄的用法1. 一个 CtrlF 聚焦搜索框。控件自带FocusCommand在窗口上挂一条键绑定就行来自 Console 示例ui:FluentWindow.InputBindings KeyBinding KeyF ModifiersControl Command{Binding ElementNameAutoSuggestBox, PathFocusCommand} / /ui:FluentWindow.InputBindings2. 直接嵌进 NavigationView变成菜单搜索引擎。给NavigationView赋值AutoSuggestBox属性后它会递归收集所有NavigationViewItem的Content文本作为候选池用户选中或回车提交时自动跳转到对应页面一行 C# 都不用写实现见 NavigationView.Base.cs 的UpdateAutoSuggestBoxSuggestions与NavigateToMenuItemFromAutoSuggestBox。紧凑模式下它还会自动退化成一个小图标按钮展开才出现完整搜索框。ui:NavigationView x:NameRootNavigation ui:NavigationView.AutoSuggestBox ui:AutoSuggestBox x:NameAutoSuggestBox PlaceholderTextSearch / /ui:NavigationView.AutoSuggestBox /ui:NavigationView自定义对象 服务端查询的场景比如按名称搜联系人也顺手一提在TextChanged里判断args.Reason AutoSuggestionBoxTextChangeReason.UserInput才发起查询其余场景选中回填等直接跳过配合MaxSuggestionListHeight控制列表最大高度即可。避坑清单这些细节当时不发现坑现场表现解法用ItemsSource塞完整数据建议不更新、显示被吃掉完整列表放OriginalItemsSourceItemsSource是控件内部的显示层别抢着管绑定对象后怎么输都不匹配列表恒为空设DisplayMemberPath否则控件拿ToString()去匹配选中后输入框被重置成项名想保留用户原文UpdateTextOnSelectFalse默认是true点一下别处建议列表就消失以为组件有 bug这是内置行为失去焦点、窗口失活都会自动收起控件里挂了窗口消息钩子每次按键都触发重查询输入卡顿利用TextChanged的Reason区分来源加去抖延迟学习路径文档NavigationView 使用指南、项目入门源码入口AutoSuggestBox 控件目录过滤逻辑就 20 行值得精读示例项目Wpf.Ui.Demo.Console搜索 导航完整集成跑通三行 XAML 之后你会发现搜索框这类需求真的只是喂数据的问题。【免费下载链接】wpfuiWPF UI provides the Fluent experience in your known and loved WPF framework. Intuitive design, themes, navigation and new immersive controls. All natively and effortlessly.项目地址: https://gitcode.com/GitHub_Trending/wp/wpfui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考