How to display search results in a WPF items contr

Question

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

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...

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.

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...

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. 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...?

Answer 1

A TextBlock can contain multiple Runs in its Inlines collection. You can build it in code or in XAML:

<TextBlock>
    <Run>... these </Run>
    <Run FontWeight="Bold">results</Run>
    <Run> were found...</Run>
</TextBlock>

Answer 2

I found a way to apply highlighting to search results using a custom IValueConverter. The converter takes a text snippet, formats it into valid XAML markup, and uses a XamlReader to instantiate the markup into framework objects.

The full explanation is rather long, so I've posted it to my blog: Highlighting Query Terms in a WPF TextBlock

Answer 3

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.");
        }

    }

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>

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

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.