How to display search results in a WPF items control with highlighted query terms

by

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.

More Related Contents:

  1. Is there a way to use data-template inheritance in WPF?
  2. WPF Some styles not applied on DataTemplate controls
  3. How to get DataTemplate.DataTrigger to check for greater than or less than?
  4. Different views / data template based on member variable
  5. How to disable a databound ListBox item based on a property value?
  6. How do I dynamically bind and statically add MenuItems?
  7. Why does the binding update without implementing INotifyPropertyChanged?
  8. WPF: Canvas mouse events not firing on empty space
  9. OneWayToSource binding from readonly property in XAML
  10. How can I apply a custom sort rule to a WPF DataGrid?
  11. What approaches are available to dummy design-time data in WPF?
  12. What does the WPF star do (Width=”100*”)
  13. How to make overlay control above all other controls?
  14. What is the difference between x:Reference and ElementName?
  15. Are “{Binding Path=.}” and “{Binding}” really equal
  16. XAML Combine styles going beyond BasedOn?
  17. WPF: XAML property declarations not being set via Setters?
  18. How to open a WPF Popup when another control is clicked, using XAML markup only?
  19. How to format number of decimal places in wpf using style/template?
  20. How do I make a WPF data template fill the entire width of the listbox?
  21. How to create trapezoid tabs in WPF tab control
  22. Implement INotifyPropertyChanged on generated Entity Framework classes
  23. How to autosize and right-align GridViewColumn data in WPF?
  24. Advanced XAML Animation effects. Pulse, Marching ants, Rotations. Alerts
  25. Binding in WPF to element of array specified by property
  26. HorizontalAlignment=Stretch, MaxWidth, and Left aligned at the same time?
  27. Create a control in Resources and reuse it in XAML WPF
  28. How exactly do Attached Properties work in WPF?
  29. ItemsControl ItemTemplate Binding
  30. How to bind DataTemplate datatype to interface?

Leave a Comment