How to display all the Listpicker options, although placed at bottom of the page?

Question

ListPicker working good if i placed it in the middle of the page. But as per my requirement i need to place it at the bottom of the page. So when i do it is showing only one option, and the rest are at the bottom of the screen.

How can i made all the options visible?

<phone:PhoneApplicationPage 
x:Class="ListPickerDemo.MainPage"
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:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
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.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">

        <toolkit:ListPicker x:Name="listpicker1" Margin="-6,522,6,-304">
            <toolkit:ListPickerItem Content="India" />
            <toolkit:ListPickerItem Content="China" />
            <toolkit:ListPickerItem Content="Russia" />
            <toolkit:ListPickerItem Content="United States" />
        </toolkit:ListPicker>


    </Grid>
</Grid>

Answer 1

I have done it using FullModeItemTemplate by showing the list options in another page.

code:

MainPage.xaml

<toolkit:ListPicker Header="country" x:Name="lp2" FullModeHeader="select country" Margin="35,233,27,45" Grid.Row="2">
            <toolkit:ListPicker.ItemTemplate>
                <DataTemplate x:Name="dt1">
                    <StackPanel>
                        <TextBlock Text="{Binding BindsDirectlyToSource=True}"/>
                    </StackPanel>
                </DataTemplate>
            </toolkit:ListPicker.ItemTemplate>
            <toolkit:ListPicker.FullModeItemTemplate>
                <DataTemplate x:Name="dt2">
                    <StackPanel>
                        <TextBlock Text="{Binding BindsDirectlyToSource=True}" FontSize="55" />
                    </StackPanel>
                </DataTemplate>
            </toolkit:ListPicker.FullModeItemTemplate>

        </toolkit:ListPicker>

MainPage.xaml.cs

namespace ListPickerDemo
{
    public partial class MainPage : PhoneApplicationPage
    {
        String[] Country = { "India","Japan",
                              "China","United states",
                              "Australia","Brazil",
                              "Singapore","Newzealand","South Africa"};


        // Constructor
        public MainPage()
        {
            InitializeComponent();
            this.lpkCountry.ItemsSource = Country;
            this.lp2.ItemsSource = Country;
        }


    }
}

Answer 2

Put the content page in a ScrollViewer so that the page can be scrolled once the ListPicker is expanded.