AutoCompleteBox in Windows Phone 7

Download sample source code

Windows phone 7 contains built in support for word prediction when a user types something in a TextBox. To enable this in your Textbox you have to set the InputScope to “Text” or “Chat”. If you create a TextBox like this:

<TextBox InputScope="Text" />

And starts to enter something in the TextBox you will see suggested words above the keyboard like you see below.

This is fine, and in many cases just what you need. But say for example you have an input field where you want your users to enter their favorite sport. Using InputScope Text or Chat is not the best option. If a user starts to enter “So” he will get a lots of words having nothing to do with sport – Doc, Six, Social, Society. The word “Soccer” which is the word the user most likely meant is not even on the screen, you will have to scroll to see it.

A solution to this could be to use a ComboBox (at least it could be a solution if it had been available for wp7), but in this case you have to define every sport you can think of when you write the application. But what if someone try to enter “Frisbee Golf” as their favorite sport. This is most likely not the first sport you think of when you sit down and make a list of sports, but it’s still someones favorite sport.

This is where the AutoCompleteBox from the Silverlight 3 toolkit is perfect. You can define all the sports you can think of. The user can select on of the already defined sports by just enter the first letters of the sport. If hes favorite sport is something you didn’t thought of, he can still enter it (but of course he wont get auto competition for that )

How to add an AutoCompleteBox to your wp7 application

  1. Add a reference to System.Windows.Controls.Input.dll (you have to browse for it – you find it where you installed the silverlight 3 toolkit) It is very important that you use the dll from the Silverlight 3 toolkit, as Silverlight 4 is not supported on Windows Phone 7.
  2. Add an AutoCompleteBox to your Xaml code and bind it to a list of words (a list of sports in my case). At this time the AutoCompleteBox works, but it doesn’t look good, as it is not styled like the other windows phone 7 controls. It also isn’t very touch friendly as the words in the list has to little space between the lines.
  3. Style the AutoCompleteBox to look like a wp7 control. See my sample code. The style is to long to include here.
  4. The control now looks good and is working. There is only one problem. If you select a word (a sport) from the list, the popup is not closed before you select it again. I read somewhere that this is a bug in wp7 and has nothing to do with the AutoCompleBox, but I can’t find it again, so I’m not 100% sure. Anyhow I have a really simple fix for this. On the SelectionChanged event I set focus to another control, this is normally what you want to do anyway. This closes the popup and the control works perfect.

Here you can see the final result both with the dark and the light theme

I have to thank Indrajit Chakrabarty for all help I got when I struggled with this. Blog: http://indyfromoz.wordpress.com/ Twitter: http://twitter.com/indyfromoz

Download sample code here

Advertisements

12 thoughts on “AutoCompleteBox in Windows Phone 7

  1. Great article, this might be just what I’m after.

    Do you need to make sure the Silverlight DLL is distributed with your app (i.e. set Copy Local to True) or does it work without that?

    Reply
  2. Hey, great article but as I checked your project, you are loading data into memory at app start. then filtering from memory. do you know if I can make that with Json service. I send parameter to my service and get back only those data matching. Please let me know.

    Reply
  3. Hi, I’m having problem using this autocomplete, the popup is not align to the textbox. I put a text autocomplete inside the scrollviewer then at the tops of scrollviewer I put a textbox. Here’s the code:

    Reply
  4. jm :
    Your comment is awaiting moderation.
    Hi, I’m having problem using this autocomplete, the popup is not align to the textbox. I put a text autocomplete inside the scrollviewer then at the tops of scrollviewer I put a textbox. Here’s the code:

    So when I type on textbox. the popup are not align under the textbox

    Reply
  5. Pingback: 超快递 beta版 » Windows Phone 7 资源汇总(超全)

  6. HI,
    I am using auto complete box in my application it’s working fine. but when i am changing phone Portrait to Landscape mode the auto complete box is not working(it’s not showing any records in a popup).
    if anyone to know this solution please share to me.

    Reply
  7. Thank you for the good writeup. It in fact was a leisure account it. Look complicated to far introduced agreeable from you! By the way, how could we communicate?

    Reply
  8. The information is very useful. Thank you for sharing the knowledge with me. I hope you can continue to post articles so that I can always get new knowledge from you. once again I thank you and wish you continued success

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s