Introduction
Recently, I was working on the Windows Phone 8 Application and in which I had to use the ListPicker from the Windows Phone Toolkit.
So, in this blog we will use the Windows Phone Toolkit ListPicker. Proceed with the following procedure:
Adding Windows Phone Toolkit
Install the Windows Phone Toolkit using the NuGet Gallery.
![Windows Phone Toolkit Nuget Reference]()
As you can see that this toolkit is already installed in my app.
Design XAML Page
Now Design the page as the following code:
- <phone:PhoneApplicationPage
- x:Class="BloodCornerApp.Page2"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
- xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
- xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
- xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
- xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
- mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
- FontFamily="{StaticResource PhoneFontFamilyNormal}"
- FontSize="{StaticResource PhoneFontSizeNormal}"
- Foreground="{StaticResource PhoneForegroundBrush}"
- SupportedOrientations="Portrait" Orientation="Portrait"
- shell:SystemTray.IsVisible="True">
-
-
- <Grid x:Name="LayoutRoot" Background="Transparent">
- <Grid.Resources>
- <DataTemplate x:Name="PickerItemTemplate">
- <StackPanel Orientation="Horizontal">
- <Border Background="LightGreen" Width="34" Height="34">
- <TextBlock Text="{Binding BloodGroupItems}" FontSize="16" HorizontalAlignment="Center"
- VerticalAlignment="Center"/>
- </Border>
- <TextBlock Text="{Binding BloodGroupItems}" Margin="12 0 0 0"/>
- </StackPanel>
- </DataTemplate>
- <DataTemplate x:Name="PickerFullModeItemTemplate">
- <StackPanel Orientation="Horizontal" Margin="16 21 0 20">
- <TextBlock Text="{Binding BloodGroupItems}" Margin="16 0 0 0"
FontSize="43" FontFamily="{StaticResource PhoneFontFamilyLight}"/> - </StackPanel>
- </DataTemplate>
- </Grid.Resources>
- <Grid.RowDefinitions>
- <RowDefinition Height="Auto"/>
- <RowDefinition Height="*"/>
- </Grid.RowDefinitions>
-
-
- <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
- <TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
- <TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
- </StackPanel>
-
-
- <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
- <Grid.RowDefinitions>
- <RowDefinition Height="150"/>
- <RowDefinition Height="*"/>
- </Grid.RowDefinitions>
- <toolkit:ListPicker Grid.Row="0" x:Name="listPicker" ItemTemplate="{StaticResource PickerItemTemplate}"
- FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}"
- FullModeHeader="Cities" SelectedIndex="2"
CacheMode="BitmapCache" Header="Cities" /> - <toolkit:ListPicker Header="Default" Grid.Row="1" x:Name="defaultPicker"/>
- </Grid>
- </Grid>
- </phone:PhoneApplicationPage>
Code
Add the following code:
- public partial class Page2 : PhoneApplicationPage
- {
- public Page2()
- {
- InitializeComponent();
- listPicker.SetValue
- (Microsoft.Phone.Controls.ListPicker.ItemCountThresholdProperty, 3);
- List<BloodGroupDetail> source = new List<BloodGroupDetail>();
- source.Add(new BloodGroupDetail() { BloodGroupItems = "A+" });
- source.Add(new BloodGroupDetail() { BloodGroupItems = "B+" });
- source.Add(new BloodGroupDetail() { BloodGroupItems = "O+" });
- source.Add(new BloodGroupDetail() { BloodGroupItems = "AB+" });
- this.listPicker.ItemsSource = source;
- }
-
- public class BloodGroupDetail
- {
- public string BloodGroupItems { get; set; }
- }
- }
Page
As you can see that the following the page of ListPicker
![ListPicker in Windows Phone]()
Now click on the option, which will redirect you to the ListPicker items
![Use of ListPicker in Windows Phone]()