Highlighting matched text in .NET MAUI ComboBox

21 Jul 20269 minutes to read

The .NET MAUI ComboBox control can highlight the characters that match the text typed into the editor, making items in the drop-down easier to identify. Highlighting is enabled through the TextHighlightMode property and is applied only when IsEditable and IsFilteringEnabled are true.

Prerequisites

Before using the SfComboBox, ensure the following NuGet package is installed in your .NET MAUI project:

  • Syncfusion.Maui.Inputs

For a step-by-step setup, refer to the Getting Started documentation.

Highlight modes

The TextHighlightMode property controls how the matched text is highlighted. The available modes are:

  • FirstOccurrence - Highlights only the first occurrence of the matched characters in each item.
  • MultipleOccurrence - Highlights every occurrence of the matched characters in each item. Typically used with TextSearchMode set to Contains, but also works with StartsWith (only the leading characters are matched).

The default value of TextHighlightMode is FirstOccurrence.

Highlight style

The highlight style can be customized using the following properties:

NOTE

Highlighting is applied only when IsEditable is true and IsFilteringEnabled is true. If either is false, the matched text is not highlighted even if TextHighlightMode is set.

First occurrence

Highlights only the first occurrence of the matched characters in each item of the drop-down.

<editors:SfComboBox x:Name="comboBox"
                    ItemsSource="{Binding SocialMedias}"
                    DisplayMemberPath="Name"
                    TextMemberPath="Name"
                    IsEditable="True"
                    IsFilteringEnabled="True"
                    TextHighlightMode="FirstOccurrence"
                    HighlightedTextColor="Red"
                    HighlightedTextFontAttributes="Bold">
    <editors:SfComboBox.BindingContext>
        <local:SocialMediaViewModel />
    </editors:SfComboBox.BindingContext>
</editors:SfComboBox>
SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();

SfComboBox comboBox = new SfComboBox
{
    ItemsSource = socialMediaViewModel.SocialMedias,
    DisplayMemberPath = "Name",
    TextMemberPath = "Name",
    IsEditable = true,
    IsFilteringEnabled = true,
    TextHighlightMode = OccurrenceMode.FirstOccurrence,
    HighlightedTextColor = Colors.Red,
    HighlightedTextFontAttributes = FontAttributes.Bold,
    BindingContext = socialMediaViewModel,
};
// ViewModel
public class SocialMediaViewModel
{
    public ObservableCollection<SocialMedia> SocialMedias { get; set; }

    public SocialMediaViewModel()
    {
        this.SocialMedias = new ObservableCollection<SocialMedia>
        {
            new SocialMedia { Name = "Facebook", ID = 0 },
            new SocialMedia { Name = "Google Plus", ID = 1 },
            new SocialMedia { Name = "Instagram", ID = 2 },
            new SocialMedia { Name = "LinkedIn", ID = 3 },
            new SocialMedia { Name = "Skype", ID = 4 },
            new SocialMedia { Name = "Telegram", ID = 5 },
            new SocialMedia { Name = "Twitter", ID = 6 },
            new SocialMedia { Name = "WhatsApp", ID = 7 },
            new SocialMedia { Name = "YouTube", ID = 8 }
        };
    }
}

public class SocialMedia
{
    public string Name { get; set; }
    public int ID { get; set; }
}

First Occurrence highlight in the .NET MAUI ComboBox drop-down

Multiple occurrence

Highlights every occurrence of the matched characters in each item. This mode is most useful when combined with TextSearchMode set to Contains, because the matched substring can appear anywhere in the item.

<editors:SfComboBox x:Name="comboBox"
                    ItemsSource="{Binding SocialMedias}"
                    DisplayMemberPath="Name"
                    TextMemberPath="Name"
                    IsEditable="True"
                    IsFilteringEnabled="True"
                    TextHighlightMode="MultipleOccurrence"
                    TextSearchMode="Contains"
                    HighlightedTextColor="Red"
                    HighlightedTextFontAttributes="Bold">
    <editors:SfComboBox.BindingContext>
        <local:SocialMediaViewModel />
    </editors:SfComboBox.BindingContext>
</editors:SfComboBox>
SocialMediaViewModel socialMediaViewModel = new SocialMediaViewModel();

SfComboBox comboBox = new SfComboBox
{
    ItemsSource = socialMediaViewModel.SocialMedias,
    DisplayMemberPath = "Name",
    TextMemberPath = "Name",
    IsEditable = true,
    IsFilteringEnabled = true,
    TextHighlightMode = OccurrenceMode.MultipleOccurrence,
    TextSearchMode = ComboBoxTextSearchMode.Contains,
    HighlightedTextColor = Colors.Red,
    HighlightedTextFontAttributes = FontAttributes.Bold,
    BindingContext = socialMediaViewModel,
};
// ViewModel
public class SocialMediaViewModel
{
    public ObservableCollection<SocialMedia> SocialMedias { get; set; }

    public SocialMediaViewModel()
    {
        this.SocialMedias = new ObservableCollection<SocialMedia>
        {
            new SocialMedia { Name = "Facebook", ID = 0 },
            new SocialMedia { Name = "Google Plus", ID = 1 },
            new SocialMedia { Name = "Instagram", ID = 2 },
            new SocialMedia { Name = "LinkedIn", ID = 3 },
            new SocialMedia { Name = "Skype", ID = 4 },
            new SocialMedia { Name = "Telegram", ID = 5 },
            new SocialMedia { Name = "Twitter", ID = 6 },
            new SocialMedia { Name = "WhatsApp", ID = 7 },
            new SocialMedia { Name = "YouTube", ID = 8 }
        };
    }
}

public class SocialMedia
{
    public string Name { get; set; }
    public int ID { get; set; }
}

Multiple Occurrence highlight in the .NET MAUI ComboBox drop-down

See Also