Highlighting matched text

Highlighting matched text in .NET MAUI SfComboBox

Highlight matching characters in a suggestion list to pick an item with more clarity. There are two ways to highlight the matching text:

• First Occurrence

• Multiple Occurrence

The text highlight can be indicated with various customizing styles by enabling the below properties. They are

• HighlightedTextColor - sets the color of the highlighted text for differentiating the highlighted characters.

• HighlightTextFontAttributes - sets the FontAttributes of the highlighted text.

First Occurrence

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

XAML

<editors:SfComboBox x:Name="comboBox"
                    WidthRequest="300"
                    HeightRequest = "40"
                    ItemsSource="{Binding SocialMedias}"
                    TextHighlightMode="FirstOccurrence"
                    IsEditable="True"
                    IsFilteringEnabled="True"
                    HighlightedTextColor="Red"
                    HighlightedTextFontAttributes="Bold"/>

C#

SfComboBox comboBox = new SfComboBox() 
    {
         HeightRequest = 40,
         WidthRequest= 300,
         TextHighlightMode = OccurrenceMode.FirstOccurrence,
         IsEditable =true,
         IsFilteringEnabled = true,
         HighlightedTextColor = Colors.Red,
         HighlightedTextFontAttributes = FontAttributes.Bold,
    };

Multiple Occurrence

It highlights the matching character that are present everywhere in the suggestion list for Contains case in TextSearchMode.

XAML

<editors:SfComboBox x:Name="comboBox"
                        WidthRequest="300"
                        HeightRequest = "40"
                        ItemsSource="{Binding SocialMedias}"
                        TextHighlightMode="MultipleOccurrence"
                        IsEditable="True"
                        IsFilteringEnabled="True"
                        HighlightedTextColor="Red"
                        HighlightedTextFontAttributes="Bold"
                        TextSearchMode="Contains" />

C#

SfComboBox comboBox = new SfComboBox() 
    {
         HeightRequest = 40,
         WidthRequest= 300,
         TextSearchMode = ComboBoxTextSearchMode.Contains,
         TextHighlightMode = OccurrenceMode.MultipleOccurrence,
         IsEditable = true,
         IsFilteringEnabled = true,
         HighlightedTextColor = Colors.Red,
         HighlightedTextFontAttributes = FontAttributes.Bold,
    };