Click here to Skip to main content
11,647,659 members (75,250 online)
Click here to Skip to main content

WPF AutoComplete TextBox

, 28 Jul 2014 CPOL 11.5K 447 2
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_Popupand 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.

You may also be interested in...

Comments and Discussions

 
QuestionIcon in UserControl Pin
Andrzej_kl5-Jul-15 21:10
memberAndrzej_kl5-Jul-15 21:10 
AnswerRe: Icon in UserControl Pin
Bhardwaj Deepak7-Jul-15 21:00
memberBhardwaj Deepak7-Jul-15 21:00 
GeneralRe: Icon in UserControl Pin
Andrzej_kl8-Jul-15 11:11
memberAndrzej_kl8-Jul-15 11:11 
AnswerRe: Icon in UserControl Pin
Bhardwaj Deepak12-Jul-15 21:19
memberBhardwaj Deepak12-Jul-15 21:19 
GeneralRe: Icon in UserControl Pin
Andrzej_kl14-Jul-15 18:47
memberAndrzej_kl14-Jul-15 18:47 
AnswerRe: Icon in UserControl Pin
Bhardwaj Deepak15-Jul-15 0:06
memberBhardwaj Deepak15-Jul-15 0:06 
GeneralRe: Icon in UserControl Pin
Andrzej_kl16-Jul-15 7:51
memberAndrzej_kl16-Jul-15 7:51 
QuestionCan I limit the item shown? Pin
Roberto Salemi27-Mar-15 5:50
memberRoberto Salemi27-Mar-15 5:50 
AnswerRe: Can I limit the item shown? Pin
Bhardwaj Deepak31-Mar-15 20:07
memberBhardwaj Deepak31-Mar-15 20:07 
SuggestionMinor issues and their solving Pin
Sir_Draven21-Aug-14 4:01
memberSir_Draven21-Aug-14 4:01 
AnswerRe: Minor issues and their solving Pin
Bhardwaj Deepak21-Aug-14 18:55
memberBhardwaj Deepak21-Aug-14 18:55 
GeneralRe: Minor issues and their solving Pin
Sir_Draven21-Aug-14 20:48
memberSir_Draven21-Aug-14 20: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
Web01 | 2.8.150804.3 | Last Updated 28 Jul 2014
Article Copyright 2014 by Bhardwaj Deepak
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid