[WPF自定义控件库]排序、筛选以及高亮-Windows系列-PHP中文网

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

雪夜

发布： 2025-09-24 08:12:31

原创

833人浏览过

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

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

在WPF中实现数据排序的常规方法是使用CollectionViewSource。CollectionViewSource是一种数据集合的代理类，具有两个重要的属性：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;
}

登录后复制

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

接下来是筛选功能。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();
}

登录后复制

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

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

<textbox textchanged="OnFilterTextChanged" x:name="FilterElement"></textbox>
<listbox grid.row="1" height="200" margin="0,8,0,0" name="EmployeeElement">
    <listbox.itemtemplate>
        <datatemplate>
            <stackpanel orientation="Horizontal">
                <textblock kino:textblockservice.highlighttext="{Binding ElementName=FilterElement,Path=Text}" text="{Binding DisplayName}"></textblock>
            </stackpanel>
        </datatemplate>
    </listbox.itemtemplate>
</listbox>

登录后复制

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

简篇AI排版

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

554

查看详情

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，定义多个附加属性：

<textbox textchanged="OnFilterTextChanged" tooltipservice.horizontaloffset="10" tooltipservice.tooltip="Filter Text" tooltipservice.verticaloffset="10" x:name="FilterElement"></textbox>

登录后复制

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

<textbox textchanged="OnFilterTextChanged" x:name="FilterElement">
    <tooltipservice.tooltip>
        <tooltip content="Filter Text" horizontaloffset="10" verticaloffset="10"></tooltip>
    </tooltipservice.tooltip>
</textbox>

登录后复制

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

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

参考资料：