Display list of countries in Windows Phone 8.1

Question

I am writing a Windows Phone 8.1 App (WINRT)

I want to display a list of countries in registration page out of which user can select one. In Windows Phone 7, we used to have LongListSelector.

What is its replacement in Windows Phone 8.1 (WinRT).

Actually, I want users to click on this control and it should open in fullscreenmode.

I am confused between ListView, ListBox, Semanticzoom

I am currently using:

<ListView
                                              Name="UserCountry_ListPicker"
                                            FullModeHeader="Select Country:"
                                    SelectedIndex="-1" 
                                    Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
                                    FontWeight="ExtraLight"  
                                    Margin="0,5,0,0"
                                    BorderBrush="{StaticResource DefaultTheme_DarkBlueColor}"
                                    BorderThickness="0.2,0.2,0.2,3"
                                    VerticalContentAlignment="Bottom"
                                    VerticalAlignment="Bottom"
                                    Background="{StaticResource DefaultTheme_TextBoxBackground_Light}" 
                                            SelectionChanged="UserCountry_ListPicker_SelectionChanged">
                                            <ListView.ItemTemplate>
                                                <DataTemplate>
                                                    <StackPanel 
                                                Orientation="Horizontal"
                                                Margin="0,0,0,0">
                                                        <Border 
                                                    Background="{StaticResource DefaultTheme_DarkBlueColor}"
                                                    Width="28" 
                                                    Height="28">
                                                            <TextBlock 
                                                        Text="{Binding CountryWithCodesGroupItem_Symbol}" 
                                                        FontSize="14" 
                                                        FontWeight="ExtraLight"
                                                        Foreground="WhiteSmoke"
                                                        HorizontalAlignment="Center" 
                                                        VerticalAlignment="Center"/>
                                                        </Border>
                                                        <TextBlock 
                                                    Text="{Binding CountryWithCodesGroupItem_Name}" 
                                                    FontWeight="ExtraLight"
                                                    Margin="12 0 0 0"
                                                    FontSize="21"/>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ListView.ItemTemplate>
                                            <ListView.FullModeItemTemplate>
                                                <DataTemplate>
                                                    <StackPanel 
                                                Orientation="Horizontal"
                                                Margin="20,5,0,5"
                                                  >
                                                        <Border 
                                                    Background="{StaticResource DefaultTheme_DarkBlueColor}"
                                                    Width="68" 
                                                    Height="68">
                                                            <TextBlock 
                                                        Text="{Binding CountryWithCodesGroupItem_Symbol}" 
                                                        FontSize="26" 
                                                        FontWeight="ExtraLight"
                                                        Foreground="WhiteSmoke"
                                                        HorizontalAlignment="Center" 
                                                        VerticalAlignment="Center"/>
                                                        </Border>
                                                        <TextBlock 
                                                    Text="{Binding CountryWithCodesGroupItem_Name}" 
                                                    FontWeight="ExtraLight"
                                                            Name="CountryNames"
                                                    Margin="12 0 0 0"
                                                            Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
                                                    FontSize="26" 
                                                        VerticalAlignment="Center"/>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ListView.FullModeItemTemplate>

                                            <ListView.HeaderTemplate>
                                                <DataTemplate>
                                                    <StackPanel
                                    Orientation="Horizontal"
                                                Margin="0,0,0,-5">
                                                        <TextBlock
                                                    Name="UserCountry_Label" 
                                                     FontSize="25"
                                                   FontWeight="ExtraLight"
                                                    Foreground="{StaticResource DefaultTheme_DarkBlueColor}"
                                                    Text="Country">
                                                        </TextBlock>
                                                        <Image Source="ms-appx:///Images/Login_RegistrationPage/athteriskRedForm_01.png"
                                                        Margin="3,0,0,0">
                                                        </Image>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </ListView.HeaderTemplate>
                                        </ListView>

But it shows opened list on page. Can't I have it closed on page like this: example image

Answer 1

Maybe you will consider using ListPickerFlyout:

<Button Content="Choose country">
   <Button.Flyout>
      <ListPickerFlyout ItemsSource="{Binding CountryList}" Placement="Full" ItemsPicked="Items_PickedEven">
         <ListPickerFlyout.ItemTemplate>
            <DataTemplate>
               <TextBlock Text="{Binding CountryName}"/>
            </DataTemplate>
         </ListPickerFlyout.ItemTemplate>
      </ListPickerFlyout>
   </Button.Flyout>
</Button>

You may also think of using general Flyout and define it's content as ListView, ListBox or other.