AutocompleteSearchBox - Custom search control for Windows Store Apps
After starting a new project I found myself in need of a custom SearchBox control implementation for Windows Store Apps that would display results in a popup and filter them as I type. Since I found no implementation that matched my needs I decided to build a custom control.
The resulting implementation can be found on GitHub at the following link. I'll walk you through several use cases for the custom control and explain several decisions I had to make in order for the control to behave as expected.
The custom control exposes four dependency properties, namely: ItemsSource, Filter, ItemTemplate and QueryText.
The ItemSource property is used for the entire collection of possible results for the search box. This collection can be filtered using the Filter dependency property
The Filter property is a function whose arguments are the current item being checked against the filter, the filter text, the function returning true if the item should be displayed in the search results. The default Filter checks the ToString() representation of each object in the ItemsSource against the QueryText. The ItemsSource also offers support for observable collections.
The ItemTemplate property is used to render each result in the results list box.
The QueryText property holds the current query text of the search box.
AutocompleteSearchBox also exposes two routed events: SearchResultSelected called when one of the results has been picked from the results list via keyboard, mouse or touch. The second event is QueryChanged is called each time the QueryText changes.
Implementation details are pretty straightforward, although I feel a certain decission has to be explained regarding the XAML implementation.
You might notice the fact that the results list box is contained within a Canvas control of 0 weight and height. This was required due to the fact that the list box should behave similar to a pop-up, and the Popup control was not added to the Windows Store App stack (not as WPF developers knew it at least) - The Canvas control does not clip child elements to its bounds and this makes the list box seemingly float.
So, feel free to use my implementation in your applications and have fun coding.














