如何在带有突出显示的查询词的WPF项目控件中显示搜索结果 [英] How to display search results in a WPF items control with highlighted query terms

问题描述

我想在WPF ItemsControl中显示突出显示查询条件的搜索结果。

I'd like to display search results within a WPF ItemsControl with the query terms highlighted.

我使用的搜索引擎， Lucene.Net 与Highlighter插件一起，返回带有如下标记的查询词的字符串：

The search engine I use, Lucene.Net with the Highlighter plugin, returns strings with the query terms marked up like so:

...these <Bold>results</Bold> were found to be statistically significant...

我可以指示Highlighter插件使用任何标记集标签来包装查询字词。在上面的示例中，我不仅限于< Bold> 标记。对于WPF，我可能会将这些< Run /> 元素附加样式。

I can instruct the Highlighter plugin to use any set of markup tags to wrap a query term. I'm not limited to the <Bold> tag in the example above. For WPF, I'd likely make these <Run/> elements with a style attached.

面临的挑战是采用我得到的字符串，并将其呈现为我用于搜索结果的数据模板中的实际XAML。换句话说，我想看到这样的内容：

The challenge is to take the string I've been given and render it as if it were "actual XAML" within the datatemplate I'm using for search results. In other words, I want to see something like this:

...发现这些结果具有统计学意义...

...these results were were found to be statistically significant...

但是我在如何将数据绑定与数据模板中XAML字符串的动态呈现结合在一起方面感到困惑。最好的方法是什么？

But I'm struggling with how to combine databinding with dynamic rendering of an XAML string within the datatemplate. What's the best approach here?

1. 使用UserControl显示每个搜索结果并调用 XamlReader.Load（）是从代码隐藏的？


2. 构造一个包含搜索结果字符串的FlowDocument并使用FlowDocumentScrollViewer显示结果吗？


3. 其他完全...？

1. Use a UserControl to display each search result and call XamlReader.Load() from the codebehind?
2. Construct a FlowDocument containing the search result strings and display the results with a FlowDocumentScrollViewer?
3. Something else entirely...?

推荐答案

我服用了解冻器回答，并排除了对XML解析器的需求。他非常出色地解释了他的博客，但这不需要我添加任何额外的库，这是我的方法。

I took dthrasers answer and took out the need for an XML parser. He does a great job explaining each of the pieces in his blog, However this didn't require me to add any extra libraries, here's how I did it.

第一步，创建一个转换器类：

Step one, make a converter class:

class StringToXamlConverter : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string input = value as string;
        if (input != null)
        {
            var textBlock = new TextBlock();
            textBlock.TextWrapping = TextWrapping.Wrap;
            string escapedXml = SecurityElement.Escape(input);
            
            while (escapedXml.IndexOf("|~S~|") != -1) {
                //up to |~S~| is normal
                textBlock.Inlines.Add(new Run(escapedXml.Substring(0, escapedXml.IndexOf("|~S~|"))));
                //between |~S~| and |~E~| is highlighted
                textBlock.Inlines.Add(new Run(escapedXml.Substring(escapedXml.IndexOf("|~S~|") + 5,
                                          escapedXml.IndexOf("|~E~|") - (escapedXml.IndexOf("|~S~|") + 5))) 
                                          { FontWeight = FontWeights.Bold, Background= Brushes.Yellow });
                //the rest of the string (after the |~E~|)
                escapedXml = escapedXml.Substring(escapedXml.IndexOf("|~E~|") + 5);
            }

            if (escapedXml.Length > 0)
            {
                textBlock.Inlines.Add(new Run(escapedXml));                      
            }
            return textBlock;
        }

        return null;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException("This converter cannot be used in two-way binding.");
    }
}

第二步：
使用ContentBlock代替TextBlock。像这样将字符串（您将用于textBlock）传递到内容块：

Step two: Instead of a TextBlock use a ContentBlock. Pass in the string (you would of used for your textBlock) to the content block, like so:

<ContentControl
               Margin="7,0,0,0"
               HorizontalAlignment="Left"
               VerticalAlignment="Center"
               Content="{Binding Description, Converter={StaticResource CONVERTERS_StringToXaml}, Mode=OneTime}">
</ContentControl>

第三步：
确保通过的测试用 |〜标记S〜| 和 |〜E〜| 。并开始突出显示！

Step three: Make sure the test you pass in is tokenized with |~S~| and |~E~|. And let the highlighting begin!

注意：

您可以在运行中更改样式，以确定文本的突出显示方式和方式

确保将Converter类添加到名称空间和资源中。这可能还需要重建才能正常工作。

Notes:
You can change the style in the run to determine what and how your text is highlighted
Make sure you add your Converter class to your namespace and resources. This might also require a rebuild to get working.

这篇关于如何在带有突出显示的查询词的WPF项目控件中显示搜索结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！