DZone
Mobile Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Mobile Zone > AutoCompleteBox With Windows Phone

AutoCompleteBox With Windows Phone

Sumit Dutta user avatar by
Sumit Dutta
·
Jul. 01, 12 · Mobile Zone · Interview
Like (0)
Save
Tweet
5.27K Views

Join the DZone community and get the full member experience.

Join For Free

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.

Windows Phone

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How to Utilize Python Machine Learning Models
  • Open Source Security Risks
  • Use Lambda Function URL To Write a Serverless App Backed by DynamoDB
  • The End of the Beginning for Apache Cassandra

Comments

Mobile Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo