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

RadHighlightTextBlock in an RadAutoCompleteBox

Environment

Product Version 2023.3.1011
Product RadHighlightTextBlock for WPF

Description

How to use RadHighlightTextBlock in an RadAutoCompleteBox.

Solution

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

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 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) 
End Class 

Creating a DataTemplate with a RadHighlightTextBlock

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

Set the custom DataTemplate to the DropDownItemTemplate property of RadAutoCompleteBox

<telerik:RadAutoCompleteBox 
                     ItemsSource="{Binding ItemInfos}" 
                     HorizontalAlignment="Center" 
                     Width="150" 
                     VerticalAlignment="Center" 
                     AutoCompleteMode="Suggest" 
                     TextSearchMode="Contains" 
                     TextSearchPath="Content" 
                     DropDownItemTemplate="{StaticResource HighlightTextBlockDataTemplate}"/> 
RadAutoCompleteBox with RadHighlightTextBlock

WPF RadAutoCompleteBox with RadHighlightTextBlock

In this article