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}"/>