New to Telerik UI for WPF? Download free 30-day trial

RadHighlightTextBlock in an RadAutoSuggestBox


Product Version 2023.3.1011
Product RadHighlightTextBlock for WPF


How to use RadHighlightTextBlock in an RadAutoSuggestBox.


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

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()); 
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

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

Set the custom DataTemplate to the ItemTemplate property of RadAutoSuggestBox

                     ItemsSource="{Binding ItemInfos}" 
                     ItemTemplate="{StaticResource HighlightTextBlockDataTemplate}"/> 
RadAutoSuggestBox with RadHighlightTextBlock

WPF RadAutoSuggestBox with RadHighlightTextBlock

In this article