ListPicker Item in Windows Phone 8 App

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.

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">

    <!--LayoutRoot is the root grid where all page content is placed-->
    <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>

        <!--TitlePanel contains the name of the application and page title-->
        <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>

        <!--ContentPanel - place additional content here-->
        <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

 

Now click on the option, which will redirect you to the ListPicker items