How to use Auto Complete Box in Windows Phone

Comments

Chintandave er - sceenshot.

Hi Pooja. A sample screenshot of the UI generated by this code would be give better idea to understand beginner level developers before implementing the whole code.

Nice article though.

Chintan.

Chintandave er 07:43, 25 January 2012 (EET)

Croozeus - Sub-edited

@Pooja, the article looks good. I've subedited the article and here are some comments,

• I've added an abstract - removed the introduction part, since the abstract (one liner) gives pretty good idea about what's in the article.
• Created a new section called "Pre-requisites" - moved relevant material from your 'Introduction' to this section.

Couple of tips related to construction of sentences while writing tutorials,

• If possible, try to avoid having second person singular ("You") as the subject of the sentence. Using plural i.e "We" may be more appropriate or just have generic instructions. Eg. "you will have to download the Silverlight Toolkit" may be read better as "we need to download the Silverlight Toolkit"
• Try to avoid imperative sentences. For example, "Don't forget to add the following 2 using directives" - may sound commanding. Rather you may use - "Remember, not to forget adding the following 2 using directives."

Looking forward to see more new articles on WP7!

//P

croozeus 09:40, 25 January 2012 (EET)

Croozeus - Source code

The zip archive contains some temp files generated by the build system, which are not required and you may want to remove them. For eg. the files in the Debug folder, etc.

//P

croozeus 10:09, 25 January 2012 (EET)

Pooja 1650 -

Thank you Pankaj & Chintan for your valuable feedback. I will always try to implement your suggestions.

pooja_1650 11:08, 25 January 2012 (EET)

Hamishwillee - Nice job.

From the category page "While we welcome articles about Windows Phone, there are many excellent resources on MSDN and elsewhere. What we need most are articles showing how to port between Windows Phone and other Nokia platforms."

So if you're writing an article on Windows phone please consider:

• whether you can write a comparative article showing how to do the same thing on Qt
• don't duplicate content that is on MSDN. The exception is you're doing it "better" than articles you find elsewhere or covering aspects that they missed. Providing a downloadable example when the original doesn't also adds value.

The above is a general point that I'm hoping you will consider in future - I haven't evaluated whether this could be a comparative article or if there is better documentation elsewhere. I can say that this looks to be well written and does "all the right things" - like having images, downloadable examples, and references to the official API reference. Good job - and thanks to moderators and Champions for giving pooja such good advice.

hamishwillee 03:02, 26 January 2012 (EET)

Influencer - Changed installation instructions

Hi Hamish,

I changed the installation instructions due to the change in distribution model of the toolkit.

Thomas

influencer 01:02, 30 October 2012 (EET)

Hamishwillee - @Influencer - thanks VERY much

Hi Thomas

That is great. One of my biggest problems is keeping content up to date. I added your details to "updated" section in the ArticleMetaData which shows this was accurate on that date.

Regards

H

hamishwillee 06:57, 30 October 2012 (EET)

Pooja 1650 - @Hamish - Can you rename article?

Hi Hamish,

Tested the article against WP8, working fine.

So, can you please help in renaming it by How to use Auto Complete Box in Windows Phone?

Thanks,

Pooja

pooja_1650 14:44, 27 May 2013 (EEST)

Hamishwillee - Fantastic

Thank you Pooja, great work. I've renamed it (using the "Move" instruction in menu near the eye at the top right of the wiki page). Also did minor editorial change because Sliverlight toolkit has been moved.

hamishwillee 03:07, 28 May 2013 (EEST)

Pooja 1650 - Thanks for guiding

Hi Hamish,

Thanks for the changes and guiding me how to edit any article name.

Regards,

Pooja

pooja_1650 07:51, 28 May 2013 (EEST)

Hamishwillee - You're most welcome

I guess I should provide some general advice on updating to next version. If I were to it would be something like:

• Verify code against new platform (builds and runs)
• Update text in Articlemetadata - versions, sdks, platforms, devices and also "review" or "update" fields
• Consider that old versions are usually compatible with new versions, but new versions will often add new functionality. So the code might run, but might not be the best possible. So for example:
  • Tiles had new functionality in WP8. The older articles might "work" but really aren't correct for WP8
  • Similarly, some new APIs for file access were added.

In addition, doing an update is an opportunity to improve the article more generally, so quick check against Help:Wiki Article Review Checklist.

Just FYI!

hamishwillee 09:02, 28 May 2013 (EEST)

Log in or Join to leave comments.

This article shows how to use AutoCompleteBox, a Windows Phone control that provides a text box for user input and a drop-down that contains possible matches based on the input in the text box.

Article Metadata

---

Code Example

Source file: Media:SampleAutoCompleteBox.zip

---

Tested with

SDK: Windows Phone 8.0/7.1

Devices(s): Nokia Lumia 920, Nokia Lumia 800

---

Compatibility

Platform(s): Windows Phone 8.0/7.5

---

Article

Created: pooja_1650 (24 Jan 2012)

Updated: influencer (30 Oct 2012)

Reviewed: pooja_1650 (27 May 2013)

Last edited: hamishwillee (28 May 2013)

Pre-requisites

The AutoCompleteBox is defined in the Silverlight Toolkit, whose most recent version you can find here. If the toolkit is not installed already, please follow the installation instructions below.

Installing the Windows Phone Toolkit

For Windows Phone 8, you should try to install wptoolkit from NuGet.

• Installation of the most recent Windows Phone Toolkit (formerly Silverlight toolkit) needs an installation of NuGet.
• After NuGet is installed, the Toolkit has to be installed from the NuGet Package Manager Console in the Tools menu / Library Packge Manger submenu in Visual Studio.
• Type "Install-Package SilverlightToolkitWP" there.

Tip: The toolkit should be installed into your current solution. On my machine with a pre-installed older version (Oct 2011) of the toolkit I had problems. Removing the reference to the old assembly and finding the new one in the packages folder of the solution solved the problems on one machine but not on another...

Starting a New Project

• Create a new project in Visual Studio 2010 from File>>New Project>>Windows Phone Application - Visual C#. Give a desired name of the project.

Using IEnumerable

• We now need to make a class derived from IEnumerable interface. For this, right click the project in Project Explorer window: >>Add>>New Item>>Class (Here, we are using 'SampleWords' as our class name).
• If we derive any class from IEnumerable interface, then it's compulsory to define the function GetEnumerator(). So, our class should look like below:

  namespace SampleAutoCompleteBox
  {
      public class SampleWords : IEnumerable
      {
          public IEnumerable AutoCompletions = new List<string>()
          {
           "Lorem", "ipsum", "dolor", "sit", "amet", "consectetur", "adipiscing", "elit", "Nullam", "felis", "dui", "gravida", "at",
           "condimentum", "eget", "mattis", "non", "est", "Duis", "porta", "ornare", "tellus", "at", "convallis", "nibh", "aliquam",
           "faucibus", "Vivamus", "molestie", "fringilla", "ullamcorper", "Aenean", "non", "diam", "eu", "sapien", "pretium", "iaculis",
           "Quisque", "at", "ante", "libero", "eu", "tincidunt", "urna", "Cras", "libero", "ligula", "hendrerit", "at", "posuere", "at",
           "tempor", "at", "nulla", "Aliquam", "feugiat", "sagittis", "dolor", "convallis", "porttitor", "neque", "commodo", "ut", "Praesent",
           "egestas", "tincidunt", "lectus", "et", "pharetra", "enim", "semper", "et", "Fusce", "placerat", "orci", "vel", "iaculis",
           "dictum", "nulla", "sem", "convallis", "nunc", "in", "viverra", "leo", "mauris", "eu", "odio", "Nullam", "et", "ultricies",
           "sapien", "Proin", "quis", "mi", "a", "sapien", "semper", "lobortis", "ut", "eget", "est", "Suspendisse", "scelerisque", "porta",
           "mattis", "In", "eleifend", "tellus", "vel", "nulla", "aliquam", "ornare", "Praesent", "tincidunt", "dui", "ut", "libero",
           "iaculis", "consequat", "Nunc", "interdum", "eleifend", "rhoncus", "Curabitur", "sollicitudin", "nulla", "sagittis", "quam",
           "vehicula", "cursus", "Fusce", "laoreet", "arcu", "vitae", "fringilla", "scelerisque", "nisi", "purus", "laoreet", "ipsum", "id",
           "suscipit", "erat", "tellus", "eu", "sapien", "Proin", "pharetra", "tortor", "nisl", "Etiam", "et", "risus", "eget", "lectus",
           "vulputate", "dignissim", "ac","sed", "erat", "Nulla", "vel", "condimentum", "nunc", "Suspendisse", "aliquam", "euismod", "dictum",
           "Ut", "arcu", "enim", "consectetur", "at", "rhoncus", "at", "porta", "ut", "lacus", "Donec", "nisi", "quam", "faucibus", "tempor",
           "tincidunt", "eu", "porttitor", "id", "ipsum", "Proin", "nec", "neque", "nulla", "Suspendisse", "sapien", "metus", "aliquam", "nec",
           "dapibus", "consequat", "rutrum", "id", "leo", "Donec", "ac", "fermentum", "tortor", "Pellentesque", "nisl", "orci", "tincidunt",
           "at", "iaculis", "vitae", "consequat", "scelerisque", "ante", "Suspendisse", "potenti", "Maecenas", "auctor", "justo", "a", "nibh",
           "sagittis", "facilisis", "Phasellus", "ultrices", "lectus", "a", "nisl", "pretium", "accumsan"
           };
   
          public IEnumerator GetEnumerator()
          {
              return AutoCompletions.GetEnumerator();
          }
      }
  }

• Remember, not to forget adding the following 2 using directives

  using System.Collections; // for 'IEnumerable'
  using System.Collections.Generic; // for 'List'

• Thus, we have declared a list of strings as our sample strings. Now to work on the UI.

Making UI and attaching Auto Complete Box with SampleWords class

• We have to include the namespace inside which we have created the Strings class (SampleWords class according to this example) in the .xaml file in which we need to put AutoComplete box.
• We will add below line of code in the MainPage.xaml (e.g)

  xmlns:local="clr-namespace:SampleAutoCompleteBox"

The xmlns:local always point to the top level namespace. So, we have defined SampleWords.cs inside the SampleAutoCompleteBox namespace (same as your project name).

• Create/declare a static resource in the MainPage.xaml file like shown below

    <phone:PhoneApplicationPage.Resources>
        <local:SampleWords
        x:Key="AutoCompletions" />
    </phone:PhoneApplicationPage.Resources>

Here, 'local:' will have the class file name in which we have declared the list of stings. We have also defined a key as 'AutoCompletions' so that it can be directly used by it in future.

• Now we will drag and drop the AutoCompleteBox tool from the Toolkit on to the MainPage design view. By this, the corresponding code will be inserted into the code view.
• We will assign the value StaticResource AutoCompletions to the property ItemsSource as shown below:

  <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <toolkit:AutoCompleteBox HorizontalAlignment="Left"  Width="450" Grid.Row="0"                                    
                                 Name="autoCompleteBox1" VerticalAlignment="Top"
                                 ItemsSource="{StaticResource AutoCompletions}"/>
  </Grid>

• Now build the project and run it to see AutoCompleteBox tool running.

Source code

• The example illustrated in the article can be downloaded from here .