1. 如何让列表的内容更容易查找

假设有这么一个列表(数据源在本地),由于内容太多,要查找到其中某个想要的数据会比较困难。要优化这个列表,无非就是排序、筛选和高亮。

改造过的结果如上。

2. 排序

在WPF中要实现数据排序的功能有很多种,例如用Linq,但这种场景的标准做法是使用CollectionViewSource

CollectionViewSource是一种数据集合的代理类。它有两个很重要的属性:

  • Source 是数据源的集合;

  • View 是经过处理后的数据视图。

看上去感觉是不是很像数据库里的Table和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;
}

这段代码为CollectionViewSource的Source赋值后,把CollectionViewSource的View作为ListBox的数据源。其中SortDescriptions用于描述View的排序方式。如果包含中文,别忘记将Culture设置为zh-cn

至此排序的功能就实现了。文档中还提到CollectionViewSource的其它信息:

您可以将集合视图作为绑定源集合,可用于导航和显示集合中基于排序、 筛选和分组查询,而无需操作基础源集合本身的所有顶层。 如果Source实现INotifyCollectionChanged接口,所做的更改引起CollectionChanged事件传播到View。

由于View不会更改Source,因此每个Source都可以有多个关联的View。 使用View,可以通过不同方式显示相同数据。 例如,可能希望在页面左侧显示按优先级排序的任务,而在页面右侧显示按区域分组的任务。

3. 筛选

CollectionViewSource的View属性类型为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();
}

这段代码实现了当输入框的文字改变时刷新View的功能。其中Refresh方法用于重新创建View,也就是刷新视图。

ICollectionView还提供了一个DeferRefresh函数,这个函数用于进入延迟循环,该循环可用于将更改合并到视图并延迟自动刷新,在需要多次操作并刷新数据量大的集合时可以用这个函数。

4. 高亮

<TextBox x:Name="FilterElement"
TextChanged="OnFilterTextChanged"/>
<ListBox Name="EmployeeElement"
Grid.Row="1"
Height="200"
Margin="0,8,0,0">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding DisplayName}"
kino:TextBlockService.HighlightText="{Binding ElementName=FilterElement,Path=Text}" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

UWP的高亮可以使用TextHighlighter这个类,实现起来很简单。WPF中的高亮则是使用自定义的TextBlockService.HighlightText附加属性声明要高亮的文字,然后将TextBlock的Text替换为处理过的Inlines,使用方式如上。

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代码会好看很多,但懒得改了。

本来应该是高亮匹配的文字,但实际使用中发觉把未匹配的文字置灰更好看,就这样实现了。

5. 结语

这篇文章介绍了使用CollectionViewSource实现的排序、筛选功能,以及使用附加属性和Inlines实现高亮功能。

不过这样实现的高亮功能有个问题:不能定义高亮(或者低亮)的颜色,不管在代码中还是在XAML中。一种可行的方法是参考ToolTipService定义一大堆附加属性,例如这样:

<TextBox x:Name="FilterElement"
ToolTipService.ToolTip="Filter Text"
ToolTipService.HorizontalOffset="10"
ToolTipService.VerticalOffset="10"
TextChanged="OnFilterTextChanged"/>

这种方式的缺点是这一大堆附加属性会导致代码变得很复杂,难以维护。ToolTipService还可以创建一个ToolTip类,把这个类设置为附加属性的值:

<TextBox x:Name="FilterElement"
TextChanged="OnFilterTextChanged">
<ToolTipService.ToolTip>
<ToolTip Content="Filter Text"
HorizontalOffset="10"
VerticalOffset="10"/>
</ToolTipService.ToolTip>
</TextBox>

这种方式比较容易维护,但有人可能不明白ToolTipService.ToolTip属性的值为什么既可以是文本(或图片等其它内容),又可以是ToolTip类型,XAML如何识别。关于这一点我在下一篇文章会讲解,并且重新实现高亮的功能以支持Style等功能。

也可以参考SearchableTextBlock写一个高亮的文本框,一了百了,但我希望通过这个有趣的功能多介绍几种知识。

6. 参考

CollectionViewSource Class (System.Windows.Data) Microsoft Docs

TextBlock.Inlines Property (System.Windows.Controls) Microsoft Docs

A WPF Searchable TextBlock Control with Highlighting WPF

7. 源码

TextBlockService.cs at master

[WPF自定义控件库]排序、筛选以及高亮的更多相关文章

  1. [WPF自定义控件库]使用TextBlockHighlightSource强化高亮的功能,以及使用TypeConverter简化调用

    1. 强化高亮的功能 上一篇文章介绍了使用附加属性实现TextBlock的高亮功能,但也留下了问题:不能定义高亮(或者低亮)的颜色.为了解决这个问题,我创建了TextBlockHighlightSou ...

  2. WPF 如何创建自己的WPF自定义控件库

    在我们平时的项目中,我们经常需要一套自己的自定义控件库,这个特别是在Prism这种框架下面进行开发的时候,每个人都使用一套统一的控件,这样才不会每个人由于界面不统一而造成的整个软件系统千差万别,所以我 ...

  3. [WPF自定义控件库] 关于ScrollViewer和滚动轮劫持(scroll-wheel-hijack)

    原文:[WPF自定义控件库] 关于ScrollViewer和滚动轮劫持(scroll-wheel-hijack) 1. 什么是滚动轮劫持# 这篇文章介绍一个很简单的继承自ScrollViewer的控件 ...

  4. [WPF自定义控件库]使用WindowChrome自定义RibbonWindow

    原文:[WPF自定义控件库]使用WindowChrome自定义RibbonWindow 1. 为什么要自定义RibbonWindow 自定义Window有可能是设计或功能上的要求,可以是非必要的,而自 ...

  5. [WPF自定义控件库] 让Form在加载后自动获得焦点

    原文:[WPF自定义控件库] 让Form在加载后自动获得焦点 1. 需求 加载后让第一个输入框或者焦点是个很基本的功能,典型的如"登录"对话框.一般来说"登录" ...

  6. [WPF自定义控件库]以Button为例谈谈如何模仿Aero2主题

    1. 为什么选择Aero2 除了以外观为卖点的控件库,WPF的控件库都默认使用"素颜"的外观,然后再提供一些主题包.这样做的最大好处是可以和原生控件或其它控件库兼容,而且对于大部分 ...

  7. [WPF自定义控件库]简单的表单布局控件

    1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...

  8. [WPF自定义控件库]使用WindowChrome的问题

    1. 前言 上一篇文章介绍了使用WindowChrome自定义Window,实际使用下来总有各种各样的问题,这些问题大部分都不影响使用,可能正是因为不影响使用所以一直没得到修复(也有可能别人根本不觉得 ...

  9. [WPF自定义控件库] 自定义控件的代码如何与ControlTemplate交互

    1. 前言 WPF有一个灵活的UI框架,用户可以轻松地使用代码控制控件的外观.例设我需要一个控件在鼠标进入的时候背景变成蓝色,我可以用下面这段代码实现: protected override void ...

随机推荐

  1. pix格式的摸索(二)

    作者:朱金灿 来源:http://blog.csdn.net/clever101 PCI的系统格式pix是一个设计很巧妙的遥感图像格式,而且其设计巧妙之处不止一处两处,这些都有待我日后一一去摸索.今天 ...

  2. startActivityForResult()的用法

    举例说我想要做的一个事情是,在一个主界面(主Activity)上能连接往许多不同子功能模块(子Activity上去),当子模块的事情做完之后就回到主界面,或许还同时返回一些子模块完成的数据交给主Act ...

  3. 项目列表dl、dt、dd使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. IE中实现placeholder

    简介:IE本身不支持Placeholder这种先进的特性,但是我们又必须且仅仅支持IE,所以网上找了一个支持placeholder的方法 考虑版权,以及知识产权原因,只放链接: http://blog ...

  5. 去掉“此电脑”中的“WPS云文档”图标

    平台:Win10 问题:安装了WPS2019专业版后,此电脑窗口出现了一个WPS云文档图标,无法删除,云文档设置中也无法取消. 解决:打开注册表,定位到HKEY_CURRENT_USER\Softwa ...

  6. 解决vmware 和hyper-v不能共存的问题

    只需在 Windows 中以管理员身份运行命令提示符 cmd 1.运行 bcdedit /copy {current} /d "Windows 8 (关闭 Hyper-V)"命令, ...

  7. 【Educational Codeforces Round 35 B】Two Cakes

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从小到大枚举x. 看看a/x+b/x是不是大于等于n 是的话. 看看是不是两种蛋糕都能凑一堆. 也即x的最大枚举量是min(a,b) ...

  8. 对DataTable进行过滤筛选的一些方法Select,dataview

    当你从数据库里取出一些数据,然后要对数据进行整合,你很容易就会想到: DataTable dt = new DataTable();//假设dt是由"SELECT C1,C2,C3 FROM ...

  9. Django环境搭建(二)

    web框架 本质就是socket服务端 socket服务端:是计算机科学家在TCP/IP基础上进行封装,暴露出一个接口socket,就是一个收发数据的一个接口. 对于真实的web程序来说分为两部分:服 ...

  10. 【博客之星】CSDN2013博客之星--分析和预测

    本文纯属个人见解,多有得罪啊! 具体结果,还是看最后CSDN给的结果吧! 昵称 名字 题材 质量 数量 知名度 预测 阳光岛主 杨刚 Python,Clojure,SAE 很高 346+ 很大 一定( ...