[WPF自定义控件库]排序、筛选以及高亮

要让列表的内容更容易查找,我们可以通过排序、筛选和高亮功能来优化列表。假设有一个本地数据源的列表,由于内容太多,查找特定数据会比较困难。通过改造后的列表,可以看到这些优化后的效果。

[WPF自定义控件库]排序、筛选以及高亮

[WPF自定义控件库]排序、筛选以及高亮

在WPF中实现数据排序的常规方法是使用CollectionViewSourceCollectionViewSource是一种数据集合的代理类,具有两个重要的属性:Source表示数据源的集合,而View则是经过处理后的数据视图。它们的关系类似于数据库中的表和视图。

以下是使用CollectionViewSource进行排序的代码示例:

private readonly CollectionViewSource _viewSource;public HighlightSample(){    InitializeComponent();    _viewSource = new CollectionViewSource    {        Source = Employee.AllExecutives    };    _viewSource.View.Culture = new System.Globalization.CultureInfo("zh-CN");    _viewSource.View.SortDescriptions.Add(new SortDescription(nameof(Employee.FirstName), ListSortDirection.Ascending));    EmployeeElement.ItemsSource = _viewSource.View;}

这段代码设置了CollectionViewSourceSource属性,并将CollectionViewSourceView属性作为ListBox的数据源。SortDescriptions用于描述视图的排序方式。如果列表包含中文,记得将Culture设置为zh-CN

接下来是筛选功能。CollectionViewSourceView属性类型为ICollectionView接口,它提供了Filter属性用于实现数据的过滤。以下是实现筛选功能的代码:

_viewSource.View.Filter = (obj) => (obj as Employee).DisplayName.ToLower().Contains(FilterElement.Text);private void OnFilterTextChanged(object sender, TextChangedEventArgs e){    if (_viewSource != null)        _viewSource.View.Refresh();}

这段代码在输入框文本改变时刷新视图。Refresh方法用于重新创建视图,实现视图的刷新。ICollectionView还提供了一个DeferRefresh函数,用于将更改合并到视图并延迟自动刷新,适用于多次操作大数据集合的情况。

最后是高亮功能。在WPF中,高亮可以通过自定义的TextBlockService.HighlightText附加属性实现。以下是实现高亮功能的XAML代码:

                                                                

高亮功能的实现代码如下:

简篇AI排版 简篇AI排版

AI排版工具,上传图文素材,秒出专业效果!

简篇AI排版 554 查看详情 简篇AI排版

private static void MarkHighlight(TextBlock target, string highlightText){    var text = target.Text;    target.Inlines.Clear();    if (string.IsNullOrWhiteSpace(text))        return;    if (string.IsNullOrWhiteSpace(highlightText))    {        target.Inlines.Add(new Run { Text = text });        return;    }    while (text.Length > 0)    {        var runText = string.Empty;        var index = text.IndexOf(highlightText, StringComparison.InvariantCultureIgnoreCase);        if (index > 0)        {            runText = text.Substring(0, index);            target.Inlines.Add(new Run { Text = runText, Foreground = _noHighlightBrush });        }        else if (index == 0)        {            runText = text.Substring(0, highlightText.Length);            target.Inlines.Add(new Run { Text = runText });        }        else if (index == -1)        {            runText = text;            target.Inlines.Add(new Run { Text = runText, Foreground = _noHighlightBrush });        }        text = text.Substring(runText.Length);    }}

虽然使用Regex.Split可以使代码更简洁,但这里未作修改。实际使用中,发现将未匹配的文字置灰效果更好,因此采用了这种实现方式。

本文介绍了使用CollectionViewSource实现排序和筛选功能,以及使用附加属性和Inlines实现高亮功能。不过,目前的高亮功能存在一个问题:无法定义高亮或低亮的颜色。一种解决方法是参考ToolTipService,定义多个附加属性:


这种方法的缺点是会导致代码复杂且难以维护。另一种方法是创建一个ToolTip类作为附加属性的值:

                

这种方法更易于维护,但可能有人不明白ToolTipService.ToolTip属性为何可以同时接受文本或ToolTip类型的值。关于这一点,我将在下一篇文章中详细解释,并重新实现高亮功能以支持样式等功能。

也可以参考SearchableTextBlock创建一个支持高亮的文本框,但我想通过这个有趣的功能介绍更多的知识。

参考资料:

CollectionViewSource Class (System.Windows.Data) Microsoft DocsTextBlock.Inlines Property (System.Windows.Controls) Microsoft DocsA WPF Searchable TextBlock Control with Highlighting WPF

源码:

TextBlockService.cs at master

以上就是[WPF自定义控件库]排序、筛选以及高亮的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/232689.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月3日 21:50:57
下一篇 2025年11月3日 21:52:06

相关推荐

  • JavaScript中如何设置请求头?

    在javascript中,可以通过xmlhttprequest或fetch api设置请求头。1.xmlhttprequest方法:创建对象、open方法后调用setrequestheader,最后send。2.fetch api方法:使用headers对象设置头,并利用promise处理异步操作。…

    2025年12月20日
    000
  • 怎样在JavaScript中实现复制到剪贴板?

    在javascript中实现复制到剪贴板功能可以使用navigator.clipboard api或备用方法。1) 使用navigator.clipboard.writetext()方法进行复制,需在https环境下使用。2) 备用方法通过创建临时元素并使用document.execcommand(…

    2025年12月20日
    000
  • 如何在JavaScript中实现无限滚动?

    在javascript中实现无限滚动可以通过监控页面滚动事件并在接近底部时加载更多内容来实现。具体步骤包括:1. 设置初始页面和每页项目数;2. 创建加载更多项目的函数,使用fetch api获取数据并追加到页面;3. 添加滚动事件监听器,当滚动接近页面底部时触发加载函数;4. 优化性能,使用虚拟滚…

    2025年12月20日
    000
  • 什么是JavaScript中的生成器函数?

    生成器函数是javascript中的一种特殊函数,通过function*定义,使用yield暂停执行,返回迭代器对象,用于控制执行流程。1) 它能在执行过程中暂停和恢复,2) 适合处理大量数据,3) 示例展示了基本用法和逐行处理csv文件的方法,4) 需要注意执行单向性和调试复杂性,5) 能减少内存…

    2025年12月20日
    000
  • 怎样在JavaScript中实现音频可视化?

    在javascript中实现音频可视化可以通过以下步骤实现:1. 使用web audio api捕获音频数据;2. 分析音频数据;3. 将分析后的数据转换为可视化效果。通过web audio api,我们可以捕获音频数据并将其转化为波形图等视觉效果,结合性能优化和用户交互,可以创造出丰富多样的音频可…

    2025年12月20日
    000
  • 什么是JavaScript中的观察者模式?

    javascript中的观察者模式是一种定义对象间一对多依赖关系的设计模式,当对象状态变化时,所有依赖对象会得到通知并自动更新。其核心是将发布者和订阅者分离,发布者通知事件,订阅者接收通知并做出相应动作。 什么是JavaScript中的观察者模式?在JavaScript中,观察者模式(Observe…

    2025年12月20日
    000
  • 如何在JavaScript中实现手势识别?

    在javascript中实现手势识别可以通过以下步骤:1. 使用触摸事件(如touchstart, touchmove, touchend)或鼠标事件(如mousedown, mousemove, mouseup)监听用户的手势。2. 对于复杂手势,可以使用如hammer.js或zingtouch等…

    2025年12月20日
    000
  • 如何在JavaScript中实现哈希路由?

    在JavaScript中实现哈希路由是一项有趣且实用的技能,特别是在构建单页面应用(SPA)时。哈希路由通过URL中的哈希部分(#)来管理不同的视图或页面状态,这让我们能够在不刷新整个页面的情况下改变内容。让我们深入探讨一下如何实现这个功能,并分享一些我在实际项目中遇到的问题和解决方案。 哈希路由的…

    2025年12月20日
    000
  • JavaScript中如何优化数据库查询?

    在javascript中优化数据库查询可以通过以下步骤实现:1. 使用索引,如在用户名字段上创建索引以提高查询速度。2. 优化查询语句,避免使用select *,只选择必要字段。3. 优化分页查询,使用游标或记录上一条记录的id替代skip方法。这些方法需根据具体需求选择,以提升应用性能。 在Jav…

    2025年12月20日
    000
  • 如何用JavaScript实现远程控制?

    javascript可以用来实现远程控制,但通常需要结合websocket、node.js和web界面等技术。1.使用websocket建立实时通信连接。2.在服务器端用node.js处理控制命令。3.通过web界面让用户发送控制命令,实现远程控制的基本功能。 用JavaScript实现远程控制其实…

    2025年12月20日
    000
  • 如何用JavaScript创建生成器函数?

    生成器函数在javascript中通过在函数声明前加星号(*)定义,允许暂停和恢复执行,适用于处理异步操作和大数据集。1. 使用yield关键字暂停执行并返回值。2. 结合async/await管理异步操作,避免回调地狱。3. 适用于无限序列和惰性求值,优化内存使用。 用JavaScript创建生成…

    2025年12月20日
    000
  • JavaScript中如何动态加载JS文件?

    在javascript中,动态加载js文件可以通过创建并添加元素实现。具体方法如下:1. 创建一个名为loadscript的函数,接受url和callback参数。2. 使用document.createelement(‘script’)创建script元素,设置其src属性…

    2025年12月20日
    000
  • 怎样用JavaScript处理路由?

    javascript处理路由可通过纯javascript和history api或使用专门的路由库实现。1) 纯javascript方法使用history api监听url变化并加载内容。2) 推荐使用react router、vue router等库,简化实现并提供嵌套路由、懒加载等功能。使用这些…

    2025年12月20日
    000
  • 怎样用JavaScript保存文件?

    javascript保存文件的方法包括:1. 使用blob和url.createobjecturl创建临时下载链接,适用于文本文件。2. 通过dataurl保存图像文件。3. 使用filesaver.js库处理大文件。4. 利用pako库压缩文件以优化性能。每种方法都有其独特的应用场景和优势。 用J…

    2025年12月20日
    000
  • JavaScript中如何复制文本到剪贴板?

    在 javascript 中复制文本到剪贴板主要使用 navigator.clipboard api。1) 使用 async function copytoclipboard(text) { await navigator.clipboard.writetext(text); }。2) 注意权限问题…

    2025年12月20日
    000
  • JavaScript中如何创建正则表达式?

    在javascript中创建正则表达式有两种方式:1) 字面量方式,如const emailregex = /^w+@[a-za-z_]+?.[a-za-z]{2,3}$/;适合简单需求。2) 构造函数方式,如const emailregex = new regexp(‘^\w+@[a-…

    2025年12月20日
    000
  • 怎样用JavaScript实现拖放功能?

    javascript实现拖放功能需要监听dragstart、dragover、drop事件,并使用datatransfer对象传输数据。具体步骤包括:1. 设置事件监听器以捕获拖放操作;2. 使用datatransfer对象传输元素id等数据;3. 提供视觉反馈以提升用户体验。 用JavaScrip…

    2025年12月20日
    000
  • 如何用JavaScript监听按钮点击事件?

    使用javascript监听按钮点击事件的最常见方法是addeventlistener。1)获取按钮元素;2)使用addeventlistener方法添加点击事件监听器;3)考虑事件冒泡和捕获的影响;4)利用事件委托优化性能;5)在不需要时移除事件监听器以避免内存泄漏。 用JavaScript监听按…

    2025年12月20日
    000
  • 怎样用JavaScript部署应用?

    使用javascript部署应用可以通过以下步骤实现:1. 准备工作:安装node.js和npm,初始化项目。2. 前端部署:使用react,推送到github并通过vercel部署。3. 后端部署:使用express.js,推送到github并通过heroku部署。4. 数据库部署:使用mongo…

    2025年12月20日
    000
  • JavaScript中如何验证电子邮件格式?

    在javascript中验证电子邮件格式可以通过正则表达式实现,但需要考虑性能和实际应用中的多种因素。1.使用简单的正则表达式可以覆盖大部分常见格式,但需平衡准确性和性能。2.客户端先进行简单验证,再通过后端进行严格验证,可提升用户体验。3.即使格式正确,邮箱可能不存在,需发送验证邮件确认。4.处理…

    2025年12月20日
    000

发表回复

登录后才能评论
关注微信