ListPicker Items not being shown in FullScreen Mode

Question

I used a TOOLKIT ListPicker . But the items are not being shown in FullScreen Mode. Its a Blank Page on clicking ListPicker but the items are present transparent and can even be selected. it seems blank page but items are there.

<phone:PhoneApplicationPage
x:Class="Sunder_Gutka.SettingPage"
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"

FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
mc:Ignorable="d"
shell:SystemTray.IsVisible="True">

<phone:PhoneApplicationPage.Resources>

    <DataTemplate x:Name="PickerItemTemplate">
        <TextBlock Text="{Binding BackGroundColorArray}" />
    </DataTemplate>

    <DataTemplate x:Name="PickerFullModeItemTemplate" >
        <TextBlock Name="BackgroundColor" 

    Text="{Binding BackGroundColorArray}"                      
                   />
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>



<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <!--TitlePanel contains the name of the application and page title-->
    <StackPanel Grid.Row="0" Margin="12,17,0,28">
        <TextBlock Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
        <TextBlock 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">

        <toolkit:ListPicker x:Name="BackgroundColor"  FullModeHeader="Select Background Color:" Header="Background Color:" BorderThickness="0" FullModeItemTemplate="{StaticResource PickerFullModeItemTemplate}" ItemTemplate="{StaticResource PickerItemTemplate}" Background="#FF09043C" SelectionChanged="BackgroundColor_SelectionChanged" >

        </toolkit:ListPicker>



    </Grid>
</Grid>

---

    using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Navigation;
using Microsoft.Phone.Controls;
using Microsoft.Phone.Shell;

namespace Sunder_Gutka
{
    public partial class SettingPage : PhoneApplicationPage
    {
        String[] BackGroundColorArray = { "Black", "Light Grey", "White[Default]", "Blue", "Green", "Saffron", "Yellow", "Magenta", "Dark Grey", "Red" }; //To be used in LISTPICKER

        public SettingPage()
        {
            InitializeComponent();
            this.BackgroundColor.ItemsSource = BackGroundColorArray; //Item Source  of listpicker

        }
        string SelectedBackgroundColor;

        private void BackgroundColor_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
             SelectedBackgroundColor = BackgroundColor.SelectedItem.ToString();
        }

    }

Answer 1

Update your DataTemplate:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Name="PickerItemTemplate">
        <TextBlock Text="{Binding}" />
    </DataTemplate>
    <DataTemplate x:Name="PickerFullModeItemTemplate" >
        <TextBlock Name="BackgroundColor" Text="{Binding}"/>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

Its working now. I have Implemented this.

Answer 2

By default when you display items in the FullScreen mode your items are displayed with smaller font size. So what you have to do is to change the DataTampleate of the FullScreen mode ItemTempate to following.. I have only increased the FontSize here.. You can do any styling you like.

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Name="PickerItemTemplate">
        <TextBlock Text="{Binding}" />
    </DataTemplate>

    <DataTemplate x:Name="PickerFullModeItemTemplate" >
        <TextBlock Name="BackgroundColor" Text="{Binding}" FontSize="{StaticResource PhoneFontSizeLarge}" />
    </DataTemplate>
</phone:PhoneApplicationPage.Resources>

Its up to you to style the Template appropriately. Also im hoping that you are aware that ListPicker would only go to FullScreen mode only if you have more that 5 items in the ListPicker. If not you need to manually set ExpansionMode="FullScreenOnly" to get it full screen.