Highlighting Matched Text in WPF Autocomplete (SfTextBoxExt)

6 Feb 20254 minutes to read

By using the TextHighlightMode property, highlight matching and unmatched characters in a suggestion list to pick an item with more clarity. The default value is None. The matching text can be highlighted in the following two ways:

  • First occurrence
  • Multiple occurrence
  • Unmatched

The text highlight can be indicated by customizing the color of the characters using HighlightedTextColor property and style of the characters using HighlightedTextStyle property.

NOTE

The HighlightedTextStyle property style target type is Run.

First occurrence

It highlights the first position of the matching characters in the suggestion list.

<editors:SfTextBoxExt HorizontalAlignment="Center" 
                      VerticalAlignment="Center" 
                      Width="300"
                      Height="40"
                      SearchItemPath="Name"
                      AutoCompleteMode="Suggest"
                      HighlightedTextColor="Red"
                      TextHighlightMode="FirstOccurrence"
                      AutoCompleteSource="{Binding Employees}" />
textBoxExt.TextHighlightMode = OccurrenceMode.FirstOccurrence;

First Occurrance

Multiple occurrence

It highlights the matching character that presents everywhere in the suggestion list for “Contains” case in SuggestionMode.

<editors:SfTextBoxExt HorizontalAlignment="Center" 
                      VerticalAlignment="Center" 
                      Width="300"
                      Height="40"
                      SearchItemPath="Name"
                      AutoCompleteMode="Suggest"
                      SuggestionMode="Contains"
                      HighlightedTextColor="Red"
                      TextHighlightMode="MultipleOccurrence"
                      AutoCompleteSource="{Binding Employees}" />
textBoxExt.TextHighlightMode = OccurrenceMode.MultipleOccurrence;

Multiple Occurrance

Unmatched

It highlights unmatched characters in the suggestion list.

<Window.Resources>
        <Style x:Key="highlightedTextStyle" TargetType="Run">
            <Setter Property="FontWeight" Value="Bold" />
        </Style>
    </Window.Resources>

    <editors:SfTextBoxExt
            Width="300"
            Height="40"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            AutoCompleteMode="Suggest"
            AutoCompleteSource="{Binding Employees}"
            HighlightedTextColor="Red"
            HighlightedTextStyle="{StaticResource highlightedTextStyle}"
            SearchItemPath="Name"
            SuggestionMode="StartsWith"
            TextHighlightMode="Unmatched" />
textBoxExt.TextHighlightMode = OccurrenceMode.Unmatched;

Multiple Occurrance

NOTE

View sample in GitHub