Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Windows Phone: ListPicker

DZone's Guide to

Windows Phone: ListPicker

In this article I will talk about ListPicker of Windows Phone 7. ListPicker is part of Silverlight Windows Phone Toolkit.

· Mobile Zone
Free Resource

Download this comprehensive Mobile Testing Reference Guide to help prioritize which mobile devices and OSs to test against, brought to you in partnership with Sauce Labs.

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.


Windows Phone - List Picker


Let's write code


DownloadSilverlight 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.

Windows Phone - List Picker


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


Windows Phone - ListPicker


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.


Windows Phone-ListPicker Multiple


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

 

Analysts agree that a mix of emulators/simulators and real devices are necessary to optimize your mobile app testing - learn more in this white paper, brought to you in partnership with Sauce Labs.

Topics:
mobile ,tutorial ,windows phone

Published at DZone with permission of Sumit Dutta, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}