WPF AutoComplete TextBox

• Download source - 59.9 KB

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 strings. 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 suggestions
• DataTemplateSelector 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.