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.

Answer 2

As far as the differences between the three are concerned, ListView is essentially like a ListBox however it also has a View property that ListBox does not have. The View property is useful for specifying a prefdefined way to display items.

A SemanticZoom control often has a ListView control within it, and allows you to switch between two different views of the list's data set.