WP8 Listpicker dont go full mode

Question

I'm developing a windows phone 8.1 silverlight app.

I need to create an ListPicker and open it on Fullscreen mode but always get erros because dont detect ExpansionMode on listpicker element.

My code XML:

<phone:PhoneApplicationPage
    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"
    x:Class="FlyGolf_V1.Views.event_detail"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    mc:Ignorable="d"
    shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded">


    <Grid>
        <ScrollViewer>
            <Grid x:Name="scheduleGrid" Grid.Row="1" Background="#f3f3f4">
                <Grid.RowDefinitions>
                    <RowDefinition Height="60" />
                    <RowDefinition Height="130" />
                    <RowDefinition Height="80" />
                    <RowDefinition Height="100" />
                    <RowDefinition Height="80" />
                    <RowDefinition Height="100" />
                    <RowDefinition Height="80" />
                    <RowDefinition Height="340" />
                    <RowDefinition Height="340" />
                </Grid.RowDefinitions>

                <!-- SAVE DATA -->


                <!-- EVENT GERAL INFO -->
                <StackPanel x:Name="datePanel" Height="220" Grid.Row="0" Grid.Column="0" 
                            Margin="0,0,0,20" Background="#18a689">
                    <TextBlock x:Name="txtDate"  HorizontalAlignment="Center" Margin="0,0,0,0" 
                               TextWrapping="Wrap" Text="Date" VerticalAlignment="Top" 
                               FontSize="25" FontWeight="Bold" />
                </StackPanel>

                <Grid Grid.Row="1" >
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="100" />
                        <ColumnDefinition Width="250" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>
                        <RowDefinition Height="130" />
                    </Grid.RowDefinitions>

                    <StackPanel Grid.Column="0" Grid.Row ="0">
                        <Ellipse  x:Name="ellipseStatus" Width="80" Height="80" 
                                  Margin="10,25,10,0" Fill="Green"/>
                    </StackPanel>
                    <StackPanel Grid.Column="1">
                        <TextBlock x:Name="txtType" Margin="0,5,0,0" TextWrapping="Wrap" 
                                   Text="Type" VerticalAlignment="Top" FontSize="20" 
                                   FontWeight="Bold" Foreground="#576A6C"/>
                        <TextBlock x:Name="txtDurationHeader" Margin="0,2,0,0" TextWrapping="Wrap" 
                                   Text="Duration" VerticalAlignment="Top" FontSize="18" Foreground="#576A6C"/>
                        <TextBlock x:Name="txtDescription" Margin="0,0,5,0" TextWrapping="Wrap" 
                                   Text="Description" VerticalAlignment="Top" FontSize="18" Foreground="#576A6C"/>
                    </StackPanel>
                    <Grid Grid.Column="2">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <StackPanel x:Name="spStatusComplete" Grid.Row="0" 
                                    Height="40" Margin="0,10,0,0">
                            <TextBlock x:Name="txtStatusComplete" Margin="0,5,10,0" HorizontalAlignment="Center" TextWrapping="Wrap" 
                                       Text="status" VerticalAlignment="Top" FontSize="20"/>
                        </StackPanel>

                        <StackPanel x:Name="spStatusAccepted" Grid.Row="1" 
                                    Height="40" Margin="0,-10,0,0">
                            <TextBlock x:Name="txtStatusAccepted" Margin="0,5,10,0" HorizontalAlignment="Center" TextWrapping="Wrap" 
                                       Text="status" VerticalAlignment="Top" FontSize="20"/>
                        </StackPanel>
                    </Grid>
                </Grid>

                <!-- INITIAL DATE / TIME INFO -->
                <StackPanel x:Name="initialDateTimePanel" Height="220" Grid.Row="2" Grid.Column="0" 
                            Margin="0,20,0,20" Background="#18a689">
                    <TextBlock x:Name="lblinitialDateTime"  HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap" 
                               Text="Initial Date / Initial Time" VerticalAlignment="Top" 
                               FontSize="25" FontWeight="Bold" />
                </StackPanel>

                <Grid Grid.Row="3">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>

                    <toolkit:DatePicker x:Name="dpInitialDate" Grid.Column="0" Foreground="#676a6c" BorderBrush="#676a6c" 
                                        HorizontalAlignment="Center" VerticalAlignment="Center" />

                    <toolkit:TimePicker x:Name="tpInitialTime" Grid.Column="1" Foreground="#676a6c" BorderBrush="#676a6c" 
                                        HorizontalAlignment="Center" VerticalAlignment="Center" />
                </Grid>

                <!-- FINAL DATE / TIME INFO -->
                <StackPanel x:Name="finalDateTimePanel" Height="220" Grid.Row="4" Grid.Column="0" 
                            Margin="0,20,0,20" Background="#18a689">
                    <TextBlock x:Name="lblfinalDateTime" HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap" 
                               Text="Final Date / Final Time" VerticalAlignment="Top" 
                               FontSize="25" FontWeight="Bold" />
                </StackPanel>

                <Grid Grid.Row="5">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="41*" />
                        <ColumnDefinition Width="79*"/>
                        <ColumnDefinition Width="120*" />
                    </Grid.ColumnDefinitions>

                    <toolkit:DatePicker x:Name="dpFinalTime" Grid.Column="0" Foreground="#676a6c" BorderBrush="#676a6c" 
                                        HorizontalAlignment="Center" VerticalAlignment="Center" 
                                        Grid.ColumnSpan="2" Margin="37,14" />

                    <toolkit:TimePicker x:Name="tpFinalTime" Grid.Column="2" Foreground="#676a6c" BorderBrush="#676a6c" 
                                        HorizontalAlignment="Center" VerticalAlignment="Center" Margin="53,14,52,14" />
                </Grid>

                <!-- DURATION / ACTIVITY TYPE INFO -->
                <StackPanel Grid.Row="6" x:Name="durationPanel" Height="220" Grid.Column="0" 
                            Margin="0,20,0,20" Background="#18a689">
                    <TextBlock x:Name="lblDuration"  HorizontalAlignment="Center" Margin="0,0,0,0" TextWrapping="Wrap" 
                               Text="Duration / Activity Type" VerticalAlignment="Top" 
                               FontSize="25" FontWeight="Bold" />
                </StackPanel>

                <Grid Grid.Row="7">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="70" />
                        <RowDefinition Height="200" />
                        <RowDefinition Height="300" />
                    </Grid.RowDefinitions>

                    <TextBox x:Name="txtDuration" TextAlignment="Center" Grid.Row="0" Foreground="#676a6c" BorderBrush="#676a6c" 
                             HorizontalAlignment="Center" TextWrapping="Wrap" Text="Duration" 
                             VerticalAlignment="Center" Width="250" 
                             GotFocus="TextBox_GotFocus" LostFocus="txtDuration_LostFocus"/>

                    <ScrollViewer Grid.Row="1">
                        <toolkit:ListPicker x:Name="lpActivityType" ExpansionMode="FullScreenOnly" 
                                            Foreground="#676a6c" BorderBrush="#676a6c" Grid.Column="1" 
                                            HorizontalAlignment="Center" VerticalAlignment="Center">
                        </toolkit:ListPicker>
                    </ScrollViewer>

                    <TextBox x:Name="txtComments" Grid.Row="2" AcceptsReturn="True" Margin="5" Height="200" 
                             Foreground="#676a6c" BorderBrush="#676a6c" VerticalScrollBarVisibility="Visible" 
                             TextWrapping="Wrap" VerticalAlignment="Center" Text="Comments" 
                             LostFocus="txtComments_LostFocus" GotFocus="txtComments_GotFocus" />
                </Grid>

            </Grid>
        </ScrollViewer>
    </Grid>
</phone:PhoneApplicationPage>

My constructor page function:

public event_detail()
{
    InitializeComponent();

    String[] listProjects = {
                                "1º Projecto Drive", 
                                "2º Projecto Drive 2º Projecto Drive",
                                "3º Projecto Drive",
                                "4º Projecto Drive",
                                "5º Projecto Drive",
                                "6º Projecto Drive",
                                "7º Projecto Drive",
                                "8º Projecto Drive",
                                "9º Projecto Drive",
                                "10º Projecto Drive",
                                "11º Projecto Drive",
                            };
    foreach (var item in listProjects)
    {
        this.lpActivityType.Items.Add(item);
    }
}   

These are the errors:

Error 1 The property 'ExpansionMode' was not found in type 'ListPicker'. E:...\event_detail.xaml 123 69 FlyGolf_V1 Error 2 The member "ExpansionMode" is not recognized or is not accessible. E:...\event_detail.xaml 123 69 FlyGolf_V1

Answer 1

You need to add in toolkit:ListPicker

ItemTemplate="{StaticResource ListPickerItemTemplate}"

and

FullModeItemTemplate="{StaticResource ListPickerFullModeItemTemplate}"

As below

<toolkit:ListPicker x:Name="lpActivityType" ExpansionMode="FullScreenOnly" Foreground="#676a6c" 
                    BorderBrush="#676a6c" Grid.Column="1" HorizontalAlignment="Center" 
                    VerticalAlignment="Center" Width="320" Height="Auto"
                    ItemTemplate="{StaticResource ListPickerItemTemplate}"
                    FullModeItemTemplate="{StaticResource ListPickerFullModeItemTemplate}">
</toolkit:ListPicker>

And also this as below

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Name="ListPickerItemTemplate">
        <StackPanel Orientation="Horizontal" Background="White">
            <TextBlock Text="{Binding}" Margin="0,0,0,0" 
                   FontWeight="Normal" Foreground="Black" FontSize="18" />
        </StackPanel>
    </DataTemplate>
    <DataTemplate x:Name="ListPickerFullModeItemTemplate">
        <StackPanel Orientation="Horizontal">
            <Grid Margin="0,0,0,0">
                <TextBlock Margin="0,2,0,0" Text="{Binding}"
                       FontSize="22" TextWrapping="Wrap" Height="Auto"  />
            </Grid>
        </StackPanel>
    </DataTemplate>
</phone:PhoneApplicationPage.Resources

After shell:SystemTray.IsVisible="True" Loaded="PhoneApplicationPage_Loaded"> and before <Grid>

And add in .cs file

lpActivityType.ItemsSource = listProjects.ToList();