Windows Phone: ListPicker

In this article I will talk about ListPicker of Windows Phone 7. ListPicker is part of Silverlight Windows Phone Toolkit. ListPicker is like combobox when you can select from list of items.

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 a listpicker and a textblock inside ContentPanel of MainPage.Xaml.

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <StackPanel>
      <toolkit:ListPicker x:Name="listPicker" SelectionMode="Single" ItemTemplate="{StaticResource ListPickerItemTemplate}" FullModeItemTemplate="{StaticResource ListPickerFullModeItemTemplate}" Header="Items" FullModeHeader="Items" CacheMode="BitmapCache"/>
      <TextBlock Text="Default" Height="30" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textDefault" VerticalAlignment="Top" FontSize="18" />
   </StackPanel>
</Grid>

 Step 5: Add below resources on top of LayoutRoot.

<phone:PhoneApplicationPage.Resources>
   <DataTemplate x:Name="ListPickerItemTemplate">
      <StackPanel Orientation="Horizontal">
         <TextBlock Text="{Binding Name}" Margin="10 0 0 0"/>
      </StackPanel>
   </DataTemplate>
   <DataTemplate x:Name="ListPickerFullModeItemTemplate">
      <StackPanel Orientation="Horizontal">
         <TextBlock Text="{Binding Name}" Margin="10 0 0 0"/>
      </StackPanel>
   </DataTemplate>
</phone:PhoneApplicationPage.Resources>

 Step 6: Create class Items

public class Items
{
   public string Name
   {
      get;
      set;
   }
}

Step 7: Add below code in the constructor of MainPage.Xaml.cs to bind data to ListPicker.

List<Items> source = new List<Items>();
source.Add(new Items() { Name = "Item 1" });
source.Add(new Items() { Name = "Item 2" });
source.Add(new Items() { Name = "Item 3" });
source.Add(new Items() { Name = "Item 4" });
source.Add(new Items() { Name = "Item 5" });
this.listPicker.ItemsSource = source;

Step 8: Now run the application, ListPicker will be displayed like below.

Step 9: Now add one more item in the source list.

source.Add(new Items() { Name = "Item 6" });

Step 10: Now run the application, on selection of ListPicker will be displayed like below in full screen mode

If the list has more than 5 items, in that case listpicker will be displayed in full screen mode. ItemCountThreshold is read only property can be used to to get the maximum number of items can be displayed in expanded mode.

Step 11: Now change the SelectionMode of ListPicker to Multiple and run the application.

Click on left button of ApplicationBar to accept multiple selections.

Step 12: Place listPicker_SelectionChanged method in MainPage.Xaml.cs to get the selected item from listpicker.

void listPicker_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
   textDefault.Text = "";
   if (this.listPicker.SelectedItems != null && this.listPicker.SelectionMode == SelectionMode.Multiple)
   {
      for (int i = 0; i < this.listPicker.SelectedItems.Count; i++)
      {
         string str = ((Items)(this.listPicker.SelectedItems[i])).Name;
         if (i == 0)
         {
            textDefault.Text = "Selected Item(s) is " + str;
         }
         else
         {
            textDefault.Text = textDefault.Text + "," + str;
         }
      }
   }
   else if (this.listPicker.SelectionMode == SelectionMode.Single)
   {
      textDefault.Text = "Selected Item is " + ((Items)this.listPicker.SelectedItem).Name;
   }
}

This ends the article of ListPicker in Windows Phone