Introduction of using Windows Phone Toolkit vol.5 : List Picker

Introduction of using Windows Phone Toolkit vol.1 : Download and prepare to use toolkit
Introduction of using Windows Phone Toolkit vol.2 : Tilt effect
Introduction of using Windows Phone Toolkit vol.3 : Transitions
Introduction of using Windows Phone Toolkit vol.4 : ContextMenu
Introduction of using Windows Phone Toolkit vol.5 : List Picker



Today, I introduce listpicker in Windows Phone Toolkit. I think this is most popular function in WP toolkit.
Listpicker has a lot of types of list, checkbox, listbox , combobox, etc. Let's see bellow movie and check functions.

• Samples

Basic samples are here.

- Just choose from a list (first list on the movie)

 <toolkit:ListPicker Header="Background">  
   <sys:String>dark</sys:String>  
   <sys:String>light</sys:String>  
   <sys:String>dazzle</sys:String>  
 </toolkit:ListPicker>  

- Choose from a list of another page (second list on the movie)

<toolkit:ListPicker Header="Background" ExpansionMode="FullscreenOnly">  
   <sys:String>dark</sys:String>  
   <sys:String>light</sys:String>  
   <sys:String>dazzle</sys:String>  
   <toolkit:ListPicker.FullModeItemTemplate>  
     <DataTemplate>  
       <StackPanel Orientation="Horizontal" Margin="16 21 0 20">  
         <TextBlock Text="{Binding}"  
             Margin="0 0 0 0"  
             FontSize="43"   
             FontFamily="{StaticResource PhoneFontFamilyLight}"/>  
       </StackPanel>  
     </DataTemplate>  
   </toolkit:ListPicker.FullModeItemTemplate>  
 </toolkit:ListPicker>  

• Sample from my memo app

I also use listpicker in my memo app.

This is color choice list. Please see bellow the movie first.

We can see same color choice list in WP toolkit sample. But the sample is little bit difficult because the sample uses DataContext and IValueConverter interface. I'll show you the simplest sample to use color choice list.

- xaml code

 <toolkit:ListPicker ItemsSource="{Binding}" Name="colorList" FullModeHeader="ACCENTS" CacheMode="BitmapCache" Width="350" SelectionChanged="ListPicker_SelectionChanged">  
   <toolkit:ListPicker.ItemTemplate>  
     <DataTemplate>  
       <StackPanel Orientation="Horizontal">  
         <Rectangle Fill="{Binding BackgroundColor}" Width="24" Height="24"/>  
         <TextBlock Text="{Binding ColorTitle}" Margin="12 0 0 0"/>  
       </StackPanel>  
     </DataTemplate>  
   </toolkit:ListPicker.ItemTemplate>  
   <toolkit:ListPicker.FullModeItemTemplate>  
     <DataTemplate>  
       <StackPanel Orientation="Horizontal" Margin="0 21 0 20">  
         <Rectangle Fill="{Binding BackgroundColor}" Width="50" Height="50"/>  
         <TextBlock Text="{Binding ColorTitle}"  
             Margin="16 0 0 0"  
             FontSize="35"/>  
       </StackPanel>  
     </DataTemplate>  
   </toolkit:ListPicker.FullModeItemTemplate>  
 </toolkit:ListPicker>  

"<toolkit:ListPicker.ItemTemplate>" indicates display format of chosen color from color list.
"<toolkit:ListPicker.FullModeItemTemplate>" indicates display format of color choice list.
Both tags have bindings of Rectangle and TextBlock which used in code behind.


- code behind

 public Tile()  
 {  
   InitializeComponent();  
   //set color list  
   List<ColorsList> list = new List<ColorsList>();  
   foreach (var c in ColorSet.ReturnColor())  
   {  
     list.Add(new ColorsList { BackgroundColor = new SolidColorBrush(Color.FromArgb(c.a, c.r, c.g, c.b)), ColorTitle = c.ColorTitle });  
   }  
   colorList.ItemsSource = list;  
}
 public class ColorsList  
 {  
   public Brush BackgroundColor { get; set; }  
   public string ColorTitle { get; set; }  
 }  

"ColorSet.ReturnColor()" returns colors set from color source of List<>.