WPF AutoComplete TextBox






4.96/5 (13 votes)
An advanced and fully featured WPF AutoComplete TextBox control
Introduction
In this tip, I'll try to explain how to use my AutoCompleteTextBox
for WPF. The AutoCompleteTextBox
is similar to TextBox
with auto complete behavior. You can provide user suggestions while he/she is typing in the text box. AutoCompleteTextBox
works asynchronously to find and display suggestions, so user doesn't have to wait for suggestions on every key-stroke.
Background
I really missed the auto complete feature of WinForm
's TextBox
in WPF. I decided to create my own TextBox
control with auto complete behavior. My objective was not to keep it just limited to the filtering from a list of string
s. I have tried to keep the control as simple as possible, yet fully featured and it completely supports MVVM design pattern. You can download the latest source code from https://wpfautocomplete.codeplex.com/.
Features
- Load suggestions on-demand
- Supports MVVM
- Asynchronously load suggestions
- Watermark
- Icon
DataTemplate
for suggestionsDataTemplateSelector
for suggestions
How Does It Work?
UI of AutoCompleteTextBox
is mainly divided in three parts, PART_Editor
, PART_Popup
and PART_Selector
.
[TemplatePart(Name = AutoCompleteTextBox.PartEditor, Type = typeof(TextBox))]
[TemplatePart(Name = AutoCompleteTextBox.PartPopup, Type = typeof(Popup))]
[TemplatePart(Name = AutoCompleteTextBox.PartSelector, Type = typeof(Selector))]
public class AutoCompleteTextBox : Control
{
public const string PartEditor = "PART_Editor";
public const string PartPopup = "PART_Popup";
public const string PartSelector = "PART_Selector";
...
...
}
Part | Type | Use |
PART_Editor |
TextBox |
Editing area where user can type any text to search |
PART_Popup |
Popup |
A dropdown that contains the suggestions |
PART_Selector |
Selector |
Display each item in the suggestions |
AutoCompleteTextBox
uses ISuggestionProvider
to get a list of suggestions to display. When user types in any text in the textbox
, it calls the ISuggestionProvider.GetSuggestions
method, which is supposed to return an IEnumerable
type. You can define a delay period by Delay
property, for which AutoCompleteTextBox
must wait for another key-stroke before making a call to ISuggestionProvider.GetSuggestions
method.
public interface ISuggestionProvider
{
IEnumerable GetSuggestions(string filter);
}
Using the Control
To add the AutoCompleteTextBox
in your view, you need to import http://wpfcontrols.com/
namespace in the XAML.
xmlns:wpf="http://wpfcontrols.com/"
<wpf:AutoCompleteTextBox />
As I mentioned earlier that AutoCompleteTextBox
uses ISuggestionProvider
to get a list of suggestions, we need to create a provider which will return our suggestions. The below code example shows how to create a suggestion provider.
var provider = new SuggestionProvider(x =>
{
IEnumerable suggestions;
...
...
return suggestions;
});
History
Please visit CodePlex for version history and for downloading the latest version of the AutoCompleteTextBox
.