RadHighlightTextBlock in an RadAutoSuggestBox

Environment

Product Version	2023.3.1011
Product	RadHighlightTextBlock for WPF

Description

How to use RadHighlightTextBlock in an RadAutoSuggestBox.

Solution

Define a new DataTemplate that contains a RadHighlightTextBlock instance and set it to the ItemTemplate property of RadAutoSuggestBox. Bind the Text property of the RadHighlightTextBlock to the property from the items' model that will be displayed in the RadAutoSuggestBox instance. Bind the HighlightText property to the Text property of RadAutoSuggestBox.

Define the items' model and the view model

C#

	public class ItemInfo
	{
	    public string Content { get; set; }
	}

	public class MainViewModel
	{
	    public MainViewModel()
	    {
	        this.ItemInfos = new ObservableCollection<ItemInfo>()
	        {
	            new ItemInfo() { Content = "Item 1" },
	            new ItemInfo() { Content = "Item 2" },
	            new ItemInfo() { Content = "Item 3" },
	        };
	    }

	    public ObservableCollection<ItemInfo> ItemInfos { get; set; }

	    public ObservableCollection<ItemInfo> GetItemInfosByText(string searchText)
	    {
	        var result = new ObservableCollection<ItemInfo>();
	        var lowerText = searchText.ToLowerInvariant();
	        return new ObservableCollection<ItemInfo>(ItemInfos.Where(x => x.Content.ToLowerInvariant().Contains(lowerText)).ToList());
	    }
	}

VB.NET

	Public Class ItemInfo
	    Public Property Content As String
	End Class

	Public Class MainViewModel
	    Public Sub New()
	        Me.ItemInfos = New ObservableCollection(Of ItemInfo)() From {
	            New ItemInfo() With {
	                .Content = "Item 1"
	            },
	            New ItemInfo() With {
	                .Content = "Item 2"
	            },
	            New ItemInfo() With {
	                .Content = "Item 3"
	            }
	        }
	    End Sub

	    Public Property ItemInfos As ObservableCollection(Of ItemInfo)

	    Public Function GetItemInfosByText(ByVal searchText As String) As ObservableCollection(Of ItemInfo)
	        Dim result = New ObservableCollection(Of ItemInfo)()
	        Dim lowerText = searchText.ToLowerInvariant()
	        Return New ObservableCollection(Of ItemInfo)(ItemInfos.Where(Function(x) x.Content.ToLowerInvariant().Contains(lowerText)).ToList())
	    End Function
	End Class

Creating a DataTemplate with a RadHighlightTextBlock

XAML

	<DataTemplate x:Key="HighlightTextBlockDataTemplate">
	    <telerik:RadHighlightTextBlock Text="{Binding Content}"
	                                   HighlightText="{Binding RelativeSource={RelativeSource 	AncestorType=telerik:RadAutoSuggestBox}, Path=Text}"/>
	</DataTemplate>

Set the custom DataTemplate to the ItemTemplate property of RadAutoSuggestBox

XAML

	<telerik:RadAutoSuggestBox
	                     ItemsSource="{Binding ItemInfos}"
	                     HorizontalAlignment="Center"
	                     TextChanged="RadAutoSuggestBox_TextChanged"
	                     Width="150"
	                     VerticalAlignment="Center"
	                     TextMemberPath="Content"
	                     ItemTemplate="{StaticResource HighlightTextBlockDataTemplate}"/>

RadAutoSuggestBox with RadHighlightTextBlock