Windows Phone 8.1新特性：控制項之列表選擇控制項

本篇我們來介紹Windows Phone 8.1 新特性中的列表選擇控制項。

在Windows Phone 8 時代，大家都會使用 LongListSelector 來實現列表選擇控制項，對資料進行分組顯示。比如通訊錄中，按照名字首字母進行分組，點擊分組標題後跳轉到該標題對應的分組。

而Windows Phone 8.1 中會利用 ListView和 SemanticZoom 來實現，下面我們來看看實現過程。

首先我們來認識一下ListView 和 SemanticZoom：

ListView 從字面上並不難理解，一個列表視圖控制項，而它實際的作用也和字面表現的差不多，它是一個在一個列表中滾動顯示項目的集合控制項。

SemanticZoom 可能看起來有些陌生，語義縮放。它是允許使用者在集合項目的兩個視圖之間縮放的一個容器控制項。簡單來說，當我們對一個連絡人集合進行了按首字母分組後，我們可以通過語義縮放控制項完成連絡人清單和字母列表兩種視圖的縮放，通過選擇字母來導航到該字母分組。

下面我們來看看代碼實現，首先是XAML：

<SemanticZoom x:Name="semanticZoom" IsZoomOutButtonEnabled="True" CanChangeViews="True">    <SemanticZoom.ZoomedInView>        <ListView x:Name="listViewDetail" IsSwipeEnabled="True" IsTapEnabled="True" IsItemClickEnabled="True" IsZoomedInView="True">            <ListView.ItemTemplate>                <DataTemplate>                    <Grid Height="40">                        <Grid.ColumnDefinitions>                            <ColumnDefinition Width="50" />                            <ColumnDefinition Width="*" />                        </Grid.ColumnDefinitions>                        <Border Background="AliceBlue" Grid.Column="0" />                        <TextBlock Grid.Column="1" Text="{Binding ContactName}" FontSize="30" />                    </Grid>                </DataTemplate>            </ListView.ItemTemplate>            <ListView.GroupStyle>                <GroupStyle>                    <GroupStyle.HeaderTemplate>                        <DataTemplate>                            <Border Background="Blue" Height="50" Width="50" HorizontalAlignment="Left" Margin="0,20,0,20" Tapped="Border_Tapped">                                <TextBlock Text="{Binding Title}" FontSize="30" />                            </Border>                        </DataTemplate>                    </GroupStyle.HeaderTemplate>                    <GroupStyle.Panel>                        <ItemsPanelTemplate>                            <VariableSizedWrapGrid Orientation="Vertical" Margin="0 0 0 20" ItemHeight="75" />                        </ItemsPanelTemplate>                    </GroupStyle.Panel>                </GroupStyle>            </ListView.GroupStyle>            <ListView.ItemsPanel>                <ItemsPanelTemplate>                    <StackPanel Orientation="Vertical"  />                </ItemsPanelTemplate>            </ListView.ItemsPanel>        </ListView>    </SemanticZoom.ZoomedInView>    <SemanticZoom.ZoomedOutView>        <ListView x:Name="listViewSummary" Background="Black" IsZoomedInView="False">            <ListView.ItemTemplate>                <DataTemplate>                    <Border Height="70" Width="400" Background="Blue" Margin="10,10,10,10">                        <TextBlock Text="{Binding Group.Title}" FontSize="30" />                    </Border>                </DataTemplate>            </ListView.ItemTemplate>            <ListView.ItemsPanel>                <ItemsPanelTemplate>                    <StackPanel Orientation="Vertical" />                </ItemsPanelTemplate>            </ListView.ItemsPanel>        </ListView>    </SemanticZoom.ZoomedOutView></SemanticZoom>