Click here to Skip to main content
12,502,578 members (55,735 online)
Click here to Skip to main content
Add your own
alternative version

Stats

22.9K views
1.3K downloads
4 bookmarked
Posted

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.

You may also be interested in...

Pro
Pro

Comments and Discussions

 
QuestionI did some changes and shared it on GitHub Pin
quicoli8-Apr-16 4:40
memberquicoli8-Apr-16 4:40 
QuestionNot able to add provider in autocompletebox in c#. Pin
Ayushmaan Kapoor2-Mar-16 22:10
memberAyushmaan Kapoor2-Mar-16 22:10 
SuggestionGood Control - Support for entered text and not selected Pin
David Rose29-Sep-15 9:56
memberDavid Rose29-Sep-15 9:56 
QuestionCan I add the SelectedItem into controls like ListBox? Pin
Shajeeb S21-Sep-15 23:53
memberShajeeb S21-Sep-15 23:53 
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    Praise Praise    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
Web02 | 2.8.160919.1 | Last Updated 28 Jul 2014
Article Copyright 2014 by Bhardwaj Deepak
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid