Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

AutoCompleteBox With Windows Phone

DZone's Guide to

AutoCompleteBox With Windows Phone

· Mobile Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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.


Windows Phone -AutoCompleteBox


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;

Windows Phone - AutoCompleteBox - Text Completion


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; 

Windows Phone - AutoCompleteBox - MinimumPrefixLength


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.


Windows Phone - AutoCompleteBox Event


This ends the article of AutoCompleteBox in Windows Phone.

Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda

Topics:

Published at DZone with permission of Sumit Dutta, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}