65.9K
CodeProject is changing. Read more.
Home

WPF AutoComplete TextBox

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.96/5 (13 votes)

Jul 28, 2014

CPOL

2 min read

viewsIcon

87104

downloadIcon

4615

An advanced and fully featured WPF AutoComplete TextBox control

WPF Auto Complete 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 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.