Implementing the ListPicker Control in Windows Phone Application Using C#

Introduction

In this article we will implement a ListPicker Control that is not actually imbedded in the toolbox but it is very useful.

Let me first explain what a List Picker is. It is the same as a ComboBox but with a few more features.

Whenever we click on the ListPicker it expands and shows the entire list of data.

Procedures

Step 1: As you all know it is not the part of toolbox; it has not already been embedded in Visual Studio.To implement it we need to download the Silverlight toolkit for Windows Phone. You can find it on:

Silverlight for Windows Phone Toolkit

Just go to this link and download the Silverlight toolkit.

Step 2: Create the new Windows Phone project ("New Project" -> "Silverlight for Windows Phone") then name it as you choose (in my project it is “ListBoxdemo”).

Step 3: Go to the Solution Explorer window and right-click on the "References" and click on “Add reference...”. Now a small window will be shown.

Navigate to the Browse tab in it and just navigate to the following path:

C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v7.0\Toolkit\Nov10\Bin\

However the path may vary since it depends on the installed path of your Visual Studio.

In the Bin Folder you would get a DLL file named Microsoft.Phone.Controls.Toolkit.dll.

Add it to your project.

Step 4: Navigate to the MainPage.xaml file and add the following reference code into your MainPage.xaml (XAML code):

xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"

Step 5: In the Grid tag just add the following code::

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

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

  <toolkit:ListPicker Name="myList" >

    <toolkit:ListPickerItem Content="Red" />

    <toolkit:ListPickerItem Content="Green"/>

    <toolkit:ListPickerItem Content="Black"/>

    <toolkit:ListPickerItem Content="Blue"/>

    <toolkit:ListPickerItem Content="Yellow"/>

  </toolkit:ListPicker>

</Grid>

You can also add some events to the ListPicker item using the event property of selection_changed and selection_selected.

Now compile and run your project; it will show a ListPicker having all the names of colors that we have added.

That's all for this article. I am embedding the source file so that you can go through it.