Highlighting in WinUI AutoComplete(SfAutoComplete)

28 Jun 202212 minutes to read

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

• Highlight beginning text
• Highlight all occurance of search text

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

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

• HighlightedTextFontStyle - Sets the font style of the highlighted text.

• HighlightedTextFontWeight - Sets the font weight of the highlighted text.

• HightlightedTextFontSize - Sets the font size of the highlighted text.

XAML

<editors:SfAutoComplete x:Name="autoComplete"
                            DisplayMemberPath="Name"                       
                            TextHighlightMode="Matched"                                
                            TextSearchMode="StartsWith"                               
                            HighlightedTextFontSize="15"                               
                            HighlightedTextFontStyle="Italic"                               
                            HighlightedTextFontWeight="Medium"                                
                            HighlightedTextForeground="Red"                                
                            ItemsSource="{Binding SocialMedias}">       
    </editors:SfAutoComplete>

C#

autoComplete.DisplayMemberPath = "Name";
        autoComplete.TextMemberPath = "Name";
        autoComplete.TextHighlightMode = AutoCompleteTextHighlightMode.Unmatched;
        autoComplete.TextSearchMode = AutoCompleteTextSearchMode.Contains;
        autoComplete.HighlightedTextFontSize = 10;
        autoComplete.HighlightedTextFontStyle = FontStyle.Normal;
        autoComplete.HighlightedTextFontWeight = FontWeights.ExtraLight;
        autoComplete.HighlightedTextForeground = Color.Red;

Highlight beginning text

It highlights the matches that start with the typed characters in the suggestion list.

XAML

<editors:SfAutoComplete x:Name="autoComplete"                            
                        DisplayMemberPath="Name"                             
                        TextHighlightMode="Matched"
                        TextSearchMode="StartsWith"                           
                        HighlightedTextForeground="Red"                               
                        ItemsSource="{Binding Countries}">
</editors:SfAutoComplete>

C#

autoComplete.DisplayMemberPath = "Name";
autoComplete.TextHighlightMode = AutoCompleteTextHighlightMode.Matched;
autoComplete.TextSearchMode = AutoCompleteTextSearchMode.StartsWith;
autoComplete.HighlightedTextForeground = Color.Red;

Searching with one character

Searching with more than one character

Highlight all occurance of search text

It highlights all the matches that contain the typed characters in the suggestion list.

XAML

<editors:SfAutoComplete     
                x:Name="autoComplete"                      
                DisplayMemberPath="Name”                              
                TextHighlightMode="Matched"
                TextSearchMode="Contains"                           
                HighlightedTextForeground="Red"                               
                ItemsSource="{Binding Wonders}">
</editors:SfAutoComplete>

C#

autoComplete.DisplayMemberPath = "Name";
        autoComplete.TextHighlightMode = AutoCompleteTextHighlightMode.Matched;
        autoComplete.TextSearchMode = AutoCompleteTextSearchMode.Contains;
        autoComplete.HighlightedTextForeground = Color.Red;

Searching with one character

Searching with more than one character

Highlighting search text mode

The SfAutoComplete provides the following modes.

• None - This mode does not highlight any text.
• Matched - This mode highlights the text that matches the user input.
• Unmatched - This mode highlights the text that does not matches the user input.

TextSearchMode=”StartsWith”

XAML

<editors:SfAutoComplete         
                                x:Name="autoComplete"                   
                                DisplayMemberPath="Name"                               
                                TextHighlightMode="Unmatched"
                                TextSearchMode="StartsWith"                              
                                HighlightedTextForeground="Red"                                
                                ItemsSource="{Binding OlympicGames}">
              </editors:SfAutoComplete>

C#

autoComplete.DisplayMemberPath = "Name";
        autoComplete.TextHighlightMode = AutoCompleteTextHighlightMode.Unmatched;
        autoComplete.TextSearchMode = AutoCompleteTextSearchMode.StartsWith;
        autoComplete.HighlightedTextForeground = Color.Red;

TextSearchMode=”Contains”

XAML

<editors:SfAutoComplete        
                                x:Name="autoComplete"                    
                                DisplayMemberPath="Name"                               
                                TextHighlightMode="Unmatched"
                                TextSearchMode="Contains"                              
                                HighlightedTextForeground="Red"                                
                                ItemsSource="{Binding OlympicGames}">
              </editors:SfAutoComplete>

C#

autoComplete.DisplayMemberPath = "Name";
        autoComplete.TextHighlightMode = AutoCompleteTextHighlightMode.Unmatched;
        autoComplete.TextSearchMode = AutoCompleteTextSearchMode.Contains;
        autoComplete.HighlightedTextForeground = Color.Red;