Click here to Skip to main content
11,429,154 members (61,194 online)
Click here to Skip to main content

WPF AutoComplete TextBox

, 28 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Bhardwaj Deepak
Technical Lead Interglobe Technologies
India India
Hello, I am Deepak Bhardwaj. I am working as Module Lead at Interglobe Technologies (IGT) in Microsoft .NET Technologies. I have worked on Winforms and WPF.
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionCan I limit the item shown? Pin
Roberto Salemi27-Mar-15 6:50
memberRoberto Salemi27-Mar-15 6:50 
AnswerRe: Can I limit the item shown? Pin
Bhardwaj Deepak31-Mar-15 21:07
memberBhardwaj Deepak31-Mar-15 21:07 
QuestionMessage Removed Pin
Nigel Stratton15-Feb-15 22:20
memberNigel Stratton15-Feb-15 22:20 
SuggestionMinor issues and their solving Pin
Sir_Draven21-Aug-14 5:01
memberSir_Draven21-Aug-14 5:01 
AnswerRe: Minor issues and their solving Pin
Bhardwaj Deepak21-Aug-14 19:55
memberBhardwaj Deepak21-Aug-14 19:55 
GeneralRe: Minor issues and their solving Pin
Sir_Draven21-Aug-14 21:48
memberSir_Draven21-Aug-14 21:48 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.150428.2 | Last Updated 28 Jul 2014
Article Copyright 2014 by Bhardwaj Deepak
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid