Welcome 2011
Basta! Samples zum Download

AutoComplete TextBox with WPF

Often I’m asked for a TextBox with automatic completion. There’s already one available with WPF. TextBox is just the wrong place to look at. It’s a ComboBox with the help of the TextSearch class. This blog entry gives you information on how this can be done.

The following ComboBox binds to  collection of the type Racer. This type contains properties Firstname and Lastname. Using the attached property TextSearch.TextPath enables auto completion. The property TextPath is set to the property of the collection that is used by search. As the user enters text in the ComboBox, the selected item moves immediately to the first matching item.

<ComboBox VerticalContentAlignment="Center" HorizontalContentAlignment="Center" TextSearch.TextPath="Firstname" Width="200" Height="100" ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True"> <ComboBox.ItemTemplate> <DataTemplate> <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" > <TextBlock.Text> <MultiBinding StringFormat="{}{0} {1}"> <Binding Path="Firstname" /> <Binding Path="Lastname" /> </MultiBinding> </TextBlock.Text> </TextBlock> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox>
How does this work? As the user enters text in a ComboBox, the Text property is set. With text input the protected method OnTextInput of the base class ItemsControl is invoked. This method checks for a TextSearch object and invokes the DoSearch method. So the ItemsControl and TextSearch are connected.

In case the user should be allowed to enter some data that is not in the bound list, the ComboBox property IsEditable can be set to true. Instead of using the SelectedItem in that case, the Text property of the ComboBox returns the text that is entered by the user. This sample binds to a collection of strings, setting the property TextPath to an empty string autocompletes to a string from the bound list. The user is also allowed to enter text not bound.

<ComboBox VerticalContentAlignment="Center" HorizontalContentAlignment="Center" TextSearch.TextPath="" Width="200" Height="100" ItemsSource="{Binding}" IsSynchronizedWithCurrentItem="True" IsEditable="True"> </ComboBox>

More information on WPF in my WPF workshop.

Christian

CN innovation

Comments

Feed You can follow this conversation by subscribing to the comment feed for this post.

gerdi

As yes that is the simple solution i was looking for.

Cheers mate.

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment

Your Information

(Name and email address are required. Email address will not be displayed with the comment.)