As a developer it is most likely to find yourself in the need to implement a searching functionality in your application. Most of the available search box controls for WPF and Silverlight have amazing built-in virtualization and a good set of available search modes but what they most likely don't have is an easy to set custom result populating mechanisms. In this blog post I will demonstrate how to create a custom result populating mechanism with the use of the RadAutoCompleteBox control.

The built-in filtering and item populating mechanisms of RadAutoCompleteBox are more than enough for most situations. But in some scenarios a more complex filtering and items populating mechanisms are desired. In the cases when the filtering should be customized the AutoCompleteBox control provides a behavior that could be customized to fit any desired custom filtering mechanism. But this is not the focus of this blog post. This blog post will focus on how you could customize the way items are rendered in the drop down portion of the control when items are matched in order to fit specific desired behavior.

Creating matched items text highlighting

A common search functionality when using any search box is the highlighting of the matched text in the filtered items. For example if we are searching for an item “Example 1” and we type in “exam” we would want to have the items filtered and in the same time the matched text in those matched items bolded (like this “Example 1”). Achieving the described behavior is possible with the use of the RadAutoCompleteBox and its DropDownItemTemplate. The easiest approach we could use is by creating a custom control that will highlight the matched items text and simply place that control in the DropDownItemTemplate of the AutoCompleteBox.

Custom TextBlockWithHighlight control

The idea behind this custom control is that it will use the SearchText property to listen for the input text in the RadAutoCompleteBox control and updated the displayed text that will be visible in drop down portion of the control. Let’s see how this could be achieved:

• We will need to create a class that inherits Control and create two DependencyProperty to which we will bind the SearchText and text property we want to show in the drop down (the property of the objects that we would usually bind to the DisplayMemberPath). Runnable projects of this example for both Silverlight and WPF could be found in the end of the blog post.

• After that we will need to override the OnApplyTemplate method of the TextBlockWithHighlight in order to be able to save the previously declared TextBlock in the Template. This field will be used to set the new created text (the edited text with the highlighted parts from the matched items text).

• All that is left to do in the custom TextBlockWithHighlight control is to handle the OnSearchTextPropertyChanged and OnItemTextPropertyChanged events and write a custom logic that will highlight (make bold) the matched items text. For full details and implementation code you can refer the runnable example projects in the end of the blog post.

 

After declaring the RadAutoCompleteBox and populating it with data you will need set our new TextBlockWithHighlight control to the DropDownItemTemplate:

 

The next screenshot shows the final result in which a search for the latter “a” was made. Notice how the letter “a” is bolded in each matched item.

You can find runnable projects for both Silverlight and WPF in the XAML-SDK repository here. The examples are listed as AutoCompleteBox / HighlightMatchingItemsText. You can download a zip file of the entire XAML-SDK repository by clicking here.

The previously described case could be customized to fit different result populating mechanisms. If you have a good idea or a more case specific scenario that is interesting feel free to write a comment about it to this blog post.