Customize AutoCompleteBox in WPF

In this article we will see how we can customize an AutoCompleteBox in WPF.

Introduction

In this article we will see how we can customize an AutoCompleteBox in WPF.

 

Creating a WPF Project

Fire up Visual Studio 2010, create a WPF Application, and name it as AutoCompleteSample2.

Sometimes we need to display more than one item in the auto complete box suggestion. For example state code with state names.

So we got two columns in the suggestion. 

I was trying hard to customize it in Expression Blend, but turns out it was very simple.

Let's have a class of Codes with the following properties.

 

Now let's create a list of Codes and bind that to the AutoCompleteBox.

 

Now without customization, let's run the application and see what we are getting as output.

 

So we are getting the Class name instead.

Now we can simply customize the Item Template of the AutoCompleteBox as follows:

 

As you see in the above code display, I have two textboxes which would bind to the respective properties of the ItemsSource.

Now let's run the application again and see the output.

 

In the above figure, I have typed "a" but still it's displaying all the states.

To achieve that we need to have the property called ValueMemberPath.

Set the value as the property you need to bind, in our case Name.

 

Now finally we can run the application for desired output.

 

Hope this article helps.