In this article I’m going to show you how to use the ListPicker control. It can be used as an alternative to DropDown control which is missing in the standard set of WP7 controls. ListPicker control is included in Silverlight for Windows Phone Toolkit which can be found here.

Before we continue, make sure that you have installed all prerequisite tools and packages.

1. Visual Studio 2010
2. Windows Phone SDK 7.1
3. Silverlight for Windows Phone Toolkit

 We can start by creating a new Windows Phone Application.  

When a solution is created, the first thing we need to do is to add a reference to the Windows Phone Toolkit. To do this, right click on the project and click on Add Reference in the dialog that pops up.

 Now we are ready to add the ListPicker control to our project’s main page.

   1: <!--ContentPanel - place additional content here-->

   2: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   3:     <toolkit:ListPicker Margin="12,6,6,302" Name="lstPicker"/> 

   4: </Grid>

You can see that the design section changed and there is a new control addedton the content panel. Feel free to change its size and location, just don’t change the name. 

Now when a control is placed on the page we are going to write some code to populate it with the actual items. Open MainPage.xaml.cs file. It is a code behind file and it contains class definition for the main page.

Essentially, there are two ways to add items to the ListPicker.

One approach is to add items directly in the markup. This means that you can hardcode values in the XAML file like this

   1: <!--ContentPanel - place additional content here-->

   2: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   3:     <toolkit:ListPicker Margin="12,6,6,302" Name="lstPicker">

   4:         <toolkit:ListPickerItem Content="First Item" />

   5:         <toolkit:ListPickerItem Content="Second Item" />

   6:         <toolkit:ListPickerItem Content="Third Item" />

   7:     </toolkit:ListPicker>

   8: </Grid>

… or you can populate list in the code behind file like this:

   1: // Constructor

   2: public MainPage()

   3: {

   4:     InitializeComponent();

   5:  

   6:     lstPicker.Items.Add("First Item");

   7:     lstPicker.Items.Add("Second Item");

   8:     lstPicker.Items.Add("Third Item");

   9: }

The second approach involves data binding.

This means that you can fetch a list from the database or some other resource and attach it to the ListPicker control. This is the simplest example of data binding on a string list:

   1: List<string> dataSource = new List<string>();

   2: dataSource.Add("First Item");

   3: dataSource.Add("Second Item");

   4: dataSource.Add("Third Item");

   5:  

   6: lstPicker.ItemsSource = dataSource;

Most of the time you will need to bind ListPicker control to collections of complex objects. I’ve created a list of people and allowed user to pick one.

First we need to create a simple People class holding the first name and the last name.

   1: public class Person

   2: {

   3:     public string FirstName { get; set; }

   4:     public string LastName { get; set; }

   5:     public string DisplayName 

   6:     {

   7:         get

   8:         {

   9:             return string.Format("{0} {1}", FirstName, LastName);

  10:         }

  11:     }

  12:  

  13:     public Person(string firstName, string lastName)

  14:     {

  15:         this.FirstName = firstName;

  16:         this.LastName = lastName;

  17:     }

  18: }

Now we need to define which property will be shown in the list. This can be done in the ListPicker definition section of the XAML file:

   1: <!--ContentPanel - place additional content here-->

   2: <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">

   3:     <toolkit:ListPicker Margin="12,6,6,302" Name="lstPicker">

   4:         <toolkit:ListPicker.ItemTemplate>

   5:             <DataTemplate>

   6:                 <TextBlock Text="{Binding DisplayName}" />

   7:             </DataTemplate>

   8:         </toolkit:ListPicker.ItemTemplate>

   9:     </toolkit:ListPicker>

  10: </Grid>

  11: id>

This assigns a DataTemplate to the ItemTemplate of the list picker. We have just instructed our ListPicker control to show “DisplayName” property of ANY data source we attach it to. Here you can find more information about Data Templates.

Finally we can create a data source and attach it to our control:

   1: List<Person> dataSource = new List<Person>();

   2: dataSource.Add(new Person("John", "Smith"));

   3: dataSource.Add(new Person("Bob", "Blake"));

   4: dataSource.Add(new Person("Jane", "Doe"));

   5:  

   6: lstPicker.ItemsSource = dataSource;

 That would be all for this edition, I hope you will the techniques described here useful for your projects. Check out my old article about data binding in WP7 and try to extend it with the ListPicker control.