In UWP or WinUI3, how to use AutoSuggestBox as the search box and highlight the matching keywords in red in the search result list

Question

AutoSuggestBox is a good control in WinUI3. I use it as a search box and display search results. But how to achieve more advanced functions, such as highlighting keywords in the results ( ex, one of the result is 'powered by Microsoft', and only 'Microsoft' is highlighting ). I tried to define the data template for AutoSuggestBox.ItemTemplate , binding a converted Span object data for TextBlock.Text or TextBlock.Run.Text. But none of them can work. Does anyone know how to implement this feature?

    public class SearchResultConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, string language)
        {
            var returnRuns = new Span();
            Run normalRun = new Run();
            normalRun.Text = "powered by ";
            returnRuns.Inlines.Add(normalRun);
            Run highlightingRun = new Run();
            highlightingRun.Foreground = new SolidColorBrush(Microsoft.UI.Colors.Green);
            highlightingRun.Text = "Microsoft";
            returnRuns.Inlines.Add(highlightingRun);
            return returnRuns;
        }
        public object ConvertBack(object value, Type targetType, object parameter, string language)
        {
            throw new NotImplementedException();
        }
    }

<AutoSuggestBox.ItemTemplate>
    <DataTemplate> 
        <TextBlock> 
            <Run Text="{Binding NoteName, Converter={StaticResource SearchResultConverter}}"></Run>
        </TextBlock>
    </DataTemplate>
</AutoSuggestBox.ItemTemplate>

Answer 1

Hi @C CB ,

Welcome to Microsoft Q&A!

I found a solution, it needs to use a Usercontrol to handle the highlight font.

UserControl1.xaml.cs

I define a Property highLightText in Usercontrol, and handle the string "<div>powered by <font color=red>Microsoft</font></div>". Extract string "powered by" and "Microsoft".

 public sealed partial class UserControl1 : UserControl
 {
     public static DependencyProperty highLightTextProperty = DependencyProperty.Register(
  "highLightText", typeof(string), typeof(UserControl1), new PropertyMetadata("test"));
     public string highLightText
     {
         get { return (string)GetValue(highLightTextProperty); }
         set { SetValue(highLightTextProperty, value); }
     }
     public UserControl1()
     {
         this.InitializeComponent();
         (this.Content as FrameworkElement).DataContext = this;
     }
     private void UserControl_Loaded(object sender, RoutedEventArgs e)
     {
       
         //< div > powered by < font color = red > Microsoft </ font ></ div >
         var xamlcode= this.highLightText.ToString();
         if (xamlcode.IndexOf(">")<1)
         {
             return;
         }
         // Extract text
         int start = xamlcode.IndexOf(">") + 1;
         int end = xamlcode.IndexOf("<font");
         string extractedText = xamlcode.Substring(start, end - start);
         // Extract font color
         int colorStart = xamlcode.IndexOf("color=") + 6;
         int colorEnd = xamlcode.IndexOf(">", colorStart);
         string fontColor = xamlcode.Substring(colorStart, colorEnd - colorStart);
         // Extract company name
         int companyNameStart = xamlcode.IndexOf(fontColor+">") + fontColor.Length+1;
         int companyNameEnd = xamlcode.IndexOf("</font", companyNameStart);
         string companyName = xamlcode.Substring(companyNameStart, companyNameEnd - companyNameStart).Trim();
         var returnRuns = new Span();
         Run normalRun = new Run();
         normalRun.Text = extractedText;
         returnRuns.Inlines.Add(normalRun);
         Run highlightingRun = new Run();
         highlightingRun.Foreground = new SolidColorBrush(Microsoft.UI.Colors.Red);
         highlightingRun.Text = companyName;
         returnRuns.Inlines.Add(highlightingRun);
         txtBlock.Inlines.Clear();
         txtBlock.Inlines.Add(returnRuns);
     }
 } 

UserControl1.xaml

<UserControl
    x:Class="App1.UserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    Loaded="UserControl_Loaded"
    mc:Ignorable="d">
    <Grid>
        <TextBlock x:Name="txtBlock"/>
    </Grid>
    
</UserControl>

MainWindow.xaml

  <AutoSuggestBox PlaceholderText="Search" QueryIcon="Find" Width="400"
          TextChanged="AutoSuggestBox_TextChanged"
          QuerySubmitted="AutoSuggestBox_QuerySubmitted"
          SuggestionChosen="AutoSuggestBox_SuggestionChosen">
      
          <AutoSuggestBox.ItemTemplate>
              <DataTemplate>
              <local:UserControl1 highLightText="{Binding }"/>
          </DataTemplate>
          </AutoSuggestBox.ItemTemplate>  
      
  </AutoSuggestBox>

MainWindow.xaml.cs

 public sealed partial class MainWindow : Window
 {
     public MainWindow()
     {
         this.InitializeComponent();
     }
     public string changeHtmlToText(string xamlcode)
     {
        
         if (xamlcode.IndexOf(">") < 1)
         {
             return "wrong";
         }
         // Extract text
         int start = xamlcode.IndexOf(">") + 1;
         int end = xamlcode.IndexOf("<font");
         string extractedText = xamlcode.Substring(start, end - start);
         // Extract font color
         int colorStart = xamlcode.IndexOf("color=") + 6;
         int colorEnd = xamlcode.IndexOf(">", colorStart);
         string fontColor = xamlcode.Substring(colorStart, colorEnd - colorStart);
         // Extract company name
         int companyNameStart = xamlcode.IndexOf(fontColor + ">") + fontColor.Length + 1;
         int companyNameEnd = xamlcode.IndexOf("</font", companyNameStart);
         string companyName = xamlcode.Substring(companyNameStart, companyNameEnd - companyNameStart).Trim();
         return extractedText + companyName;
     }
     private void AutoSuggestBox_TextChanged(AutoSuggestBox sender, AutoSuggestBoxTextChangedEventArgs args)
     {
         if (args.Reason == AutoSuggestionBoxTextChangeReason.UserInput)
         {
             var suitableItems = new List<string>();
             var splitText = sender.Text.ToLower().Split(" ");
             foreach (var cat in Cats)
             {
                 var found = splitText.All((key) =>
                 {
                     return cat.ToLower().Contains(key);
                 });
                 if (found)
                 {
                     suitableItems.Add(cat);
                 }
             }
             if (suitableItems.Count == 0)
             {
                 suitableItems.Add("No results found");
             }
             sender.ItemsSource = suitableItems;
         }
     }
     private void AutoSuggestBox_SuggestionChosen(AutoSuggestBox sender, AutoSuggestBoxSuggestionChosenEventArgs args)
     {
         
         sender.Text = changeHtmlToText(args.SelectedItem.ToString());
     }
     private void AutoSuggestBox_QuerySubmitted(AutoSuggestBox sender, AutoSuggestBoxQuerySubmittedEventArgs args)
     {
         if (args.ChosenSuggestion != null)
         {
             // User selected an item from the suggestion list, take an action on it here.
         }
         else
         {
             // Use args.QueryText to determine what to do.
         }
     }
     private List<string> Cats = new List<string>()
     {
         "<div>powered by <font color=red>Microsoft</font></div>",
         "<div>copy by <font color=red>Microsoft</font></div>",
         "<div>publish <font color=red>Azure</font></div>",
         "<div>Hello <font color=red>World</font></div>"
        
     };

Thank you.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.