AutoCompleteBox With Windows Phone

In this article I will talk about AutoCompleteBox in Windows Phone which is available in Silverlight Windows Phone Toolkit. AutoCompleteBox is combination of TextBox and DropDownList.

Let's write code

Download Silverlight Windows Phone Toolkit

Step 1: Create a silverlight for Windows Phone project.

Step 2: Add reference of Microsoft.Phone.Controls.Toolkit.dll

Step 3: Add namespace of Microsoft.Phone.Controls.Toolkit in MainPage.xaml.

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

 Step 4: Add AutoCompleteBox inside ContentPanel of  MainPage.Xaml

<toolkit:AutoCompleteBox Margin="12,200,12,0" x:Name="autoCompleteBox" Height="80"/>

 Step 5: Add below code in the constructor of MainPage.Xaml.cs.

List<String> cities = new List<String>();
cities.Add("TestABC");
cities.Add("TestXYZ");
cities.Add("Test");
cities.Add("ItemABC");
cities.Add("ItemXYZ");
cities.Add("ItemPQR");
this.autoCompleteBox.ItemsSource = cities;

Step 6: Now run the application and basic AutoCompleteBox is ready.

Step 7: Now if you want the text completion should appear then add below line in the constructor of MainPage.Xaml.cs and run the application.

this.autoCompleteBox.IsTextCompletionEnabled = true;

Step 8: Now if you want the AutCompleteBox only appears on typing paritcular number of characters then you need to set MinimumPrefixLength in the constructor of MainPage.Xaml.cs and run the application.

this.autoCompleteBox.MinimumPrefixLength = 3; 

Step 9: If you want to add customer filter like if the value in the list contains particul match of particular number of characters. Add below code in the constructor of MainPage.Xaml.cs.

this.autoCompleteBox.TextFilter += CustomFilter;

and below code in MainPage.Xaml.cs

bool CustomFilter(string search, string value)
{
   //return (value.Length > 4);
   return (value.Contains("ABC"));
}

Step 10: Add four textboxes inside ContentPanel of MainPage.Xaml to check key events of AutoCompleteBox.

<TextBlock Text="" Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" Name="txtDropDownOpening" VerticalAlignment="Top" FontSize="18" />

<TextBlock Text="" Height="30" HorizontalAlignment="Left" Margin="10,50,0,0" Name="txtPopulating" VerticalAlignment="Top" FontSize="18" />

<TextBlock Text="" Height="30" HorizontalAlignment="Left" Margin="10,100,0,0" Name="txtDropDownOpened" VerticalAlignment="Top" FontSize="18" />

<TextBlock Text="" Height="30" HorizontalAlignment="Left" Margin="10,150,0,0" Name="txtDropDownClosing" VerticalAlignment="Top" FontSize="18" />

Step 11: There are four key events of AutoCompleteBox, add those events in the constructor of MainPage.Xaml.cs. 

this.autoCompleteBox.DropDownClosing += new RoutedPropertyChangingEventHandler<bool>(autoCompleteBox_DropDownClosing);

this.autoCompleteBox.DropDownOpening += new RoutedPropertyChangingEventHandler<bool>(autoCompleteBox_DropDownOpening);

this.autoCompleteBox.DropDownOpened += new RoutedPropertyChangedEventHandler<bool>(autoCompleteBox_DropDownOpened);

this.autoCompleteBox.Populating += new PopulatingEventHandler(autoCompleteBox_Populating);

 Step 12: Declare class level integer variable in MainPage.Xaml.cs and below methods in MainPage.Xaml.cs to handle key events DropDownClosing, DropDownOpening, DropDownOpened and Populating

void autoCompleteBox_DropDownClosing(object sender, RoutedPropertyChangingEventArgs<bool> e)
{
   i = i + 1;
   txtDropDownClosing.Text = "DropDownClosing " + i.ToString();
}

void autoCompleteBox_DropDownOpening(object sender, RoutedPropertyChangingEventArgs<bool> e)
{
   i = i + 1;
   txtDropDownOpening.Text = "DropDownOpening " + i.ToString();
}

void autoCompleteBox_DropDownOpened(object sender, System.Windows.RoutedPropertyChangedEventArgs<bool> e)
{
   i = i + 1;
   txtDropDownOpened.Text = "DropDownOpened " + i.ToString();
}

void autoCompleteBox_Populating(object sender, PopulatingEventArgs e)
{
   i = i + 1;
   txtPopulating.Text = "Populating " + i.ToString();
}

Step 13: Now run the application you will notice least number against populating event followed by DropDownOpening and DropDownOpened and last will be DropDownClosing.

Populating, DropDownOpening and DropDownOpened event fires everytime you type in TextBox.

This ends the article of AutoCompleteBox in Windows Phone.