Suggesting Text with the AutoCompleteBox

The AutoCompleteBox displays suggestions in a drop-down list as the user enters text into a text box. The AutoCompleteBox control is composed of a TextBox and a ListBox that is made visible when the TextBox has focus.

The TextBox on which AutoCompleteBox relies is part of its default template. The AutoCompleteBox shares many of the TextBox control’s characteristics, including a Text property, which allows you to set the text displayed.

Moreover, the AutoCompleteBox contains an InputScope property that allows you to set the keyboard shown on the software input panel (SIP). For more information on InputScope, see Chapter 6, “Mastering Text Elements and Fonts.”

The simplest way to have an AutoCompleteBox display suggestions is to assign it a predefined list of strings. Place an AutoCompleteBox on a page, like so:

<toolkit:AutoCompleteBox x:Name="autoCompleteBox" />

Then, set its ItemsSource property to the list, as shown:

Click here to view code image

List<string> suggestions = new List<string>
                        {
                            "Prague",
                            "Geneva",
                            "Canberra",
                            ...

                        };

autoCompleteBox.ItemsSource = cities;

When the user enters text into the AutoCompleteBox, list items that begin with the string are displayed as suggestions (see Figure 9.4).

FIGURE 9.4 AutoCompleteBox displays a list of suggestions as the user enters text.