[WP8.1UI控件編程]SemanticZoom控件實現分組列表

11.1.5 SemanticZoom實現分組列表

    SemanticZoom控件可以讓用戶實現一種更加高級的列表，這種列表可以對列表的項目進行分組，同時這個SemanticZoom控件會提供兩個具有相同內容的不同視圖，其中有一個是主視圖，另外一個視圖可以讓用戶進行快速導航的分組視圖。例如，Windows Phone里面的人脈通訊錄列表就是使用SemanticZoom控件實現的。

    SemanticZoom控件支持對GridView和ListView控件的視圖效果進行縮放，在SemanticZoom控件中需要包含兩個列表控件（GridView或ListView）：一個控件提供放大視圖，另外一個提供縮小視圖。放大視圖提供一個詳細信息視圖（ZoomedInView）以讓用戶查看詳細信息，縮小視圖提供一個縮小索引視圖（ZoomedOutView）讓用戶快速定位想要查看信息的大概范圍或者分組。下面我們從控件的樣式設置和數據源創建兩個方面來介紹SemanticZoom控件的使用：

    （1）SemanticZoom控件的樣式設置

    SemanticZoom控件實現分組列表會比實現非分組的列表要復雜一些，實現分組列表還需要設置兩大屬性的內容：ZoomedOutView的內容和ZoomedInView的內容。這兩個屬性的內容含義如下所示：

    <SemanticZoom.ZoomedInView>

        <!--在這里放置GridView(或ListView)以表示放大視圖，顯示詳細信息-->

    </SemanticZoom.ZoomedInView>

    <SemanticZoom.ZoomedOutView>

       <!--在這里放置GridView(或ListView)以表示縮小視圖，一般情況下綁定Group.Title-->

    </SemanticZoom.ZoomedOutView>

    在賦值給ZoomedInView屬性的列表控件里面，我們一般需要設置它的ItemTemplate模板和GroupStyle.HeaderTemplate模板。ItemTemplate模板要設置的內容就是列表詳細信息所展示的內容，GroupStyle.HeaderTemplate模板是指分組的組頭模板，如在人脈里面的“a”、“b”……這些就是屬於列表的組頭，組頭也一樣是一個列表的集合的也是通過模板的綁定形式來進行定義。

    在賦值給ZoomedOutView屬性的列表控件里面，我們也需要設置其ItemTemplate模板，在這里要注意的是ZoomedOutView里面的ItemTemplate模板和ZoomedInView里面的模板所產生的作用是不一樣的，這里的ItemTemplate模板是指當你點擊組頭的時候彈出的組頭的索引面板的項目展示，如點擊人脈里面的“a”、“b”……就會彈出一個字母的現實面板，當你點擊某個字母的時候就會從新回到列表的界面並且跳到列表該字母所屬的組項目的位置。同時你還可以使用ItemsPanel來設置列表的布局，使用ItemContainerStyle來設置列表項目的容器樣式等等，這些功能的使用是和單獨的GridView(或ListView)列表的使用是一樣的。

    （2）SemanticZoom控件的數據源創建

    SemanticZoom控件的數據源創建需要用到用到Windows.UI.Xaml.Data命名空間下的CollectionViewSource。CollectionViewSource是專為數據綁定有UI視圖互動而設的，尤其是對於要實現分組的情況下，更需要它。創建一個CollectionViewSource對象我們既可以使用XAML的方式來進行創建也可以使用C#代碼來直接創建，實現的效果是等效的。在CollectionViewSource對象中我們通常需要設置下面幾個重要的屬性:

    1）Source屬性：是設置分組后的數據源，賦值給Source屬性的對象是列表嵌套列表的集合對象；

    2）IsSourceGrouped屬性：指示是否允許分組；

    3）ItemsPath屬性：是分組后，組內部所包含列表的屬性路徑；

　　4）View屬性：獲取當前與CollectionViewSource的此實例關聯的視圖對象；

    5）View.CollectionGroups屬性：返回該視圖關聯的所有集合組。

    那么在綁定數據的時候我們需要把ZoomedInView里面的列表控件的ItemsSource綁定到CollectionViewSource對象的View屬性，用於展示CollectionViewSource對象關聯的視圖；把ZoomedOutView里面的列表控件的ItemsSource綁定到CollectionViewSource對象的View.CollectionGroups屬性，用於展示分組的視圖。

    下面我們用一個簡潔的例子來實現這樣一個分組列表的數據組織邏輯和相關模板樣式的設置，代碼如下所示：

代碼清單11-5：SemanticZoom分組列表（源代碼：第11章\Examples_11_5）

MainPage.xaml文件主要代碼
------------------------------------------------------------------------------------------------------------------
    <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        <Grid.Resources>
           <!--創建數據源對象，注意ItemContent屬性就是數據源中真正的基礎數據的列表的屬性，必須設置該屬性的值數據源才能定位到實際綁定的數據實體對象-->
            <CollectionViewSource x:Name="itemcollectSource" IsSourceGrouped="true" ItemsPath="ItemContent" />
        </Grid.Resources>
        <SemanticZoom x:Name="semanticZoom">
            <SemanticZoom.ZoomedInView>
                <!-- 在這里放置GridView(或ListView)以表示放大視圖 -->
                <ListView x:Name="inView">
                    <ListView.GroupStyle>
                        <GroupStyle>
                            <!--用於顯示列表頭的數據項的模板-->
                            <GroupStyle.HeaderTemplate>
                                <DataTemplate>
                                    <Border Background="Red" Height="80">

                                        <TextBlock Text="{Binding Key}" FontSize="50"></TextBlock>
                                    </Border>
                                </DataTemplate>
                            </GroupStyle.HeaderTemplate>
                        </GroupStyle>
                    </ListView.GroupStyle>
                    <!--用於顯示列表的數據項的模板-->
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <StackPanel>
                                <TextBlock Text="{Binding Title}" Height="40" FontSize="30"></TextBlock>
                            </StackPanel>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </SemanticZoom.ZoomedInView>
            <SemanticZoom.ZoomedOutView>
                <!-- 在這里放置GridView(或ListView)以表示縮小視圖 -->
                <GridView x:Name="outView">
                    <!--用於顯示彈出的分組列表視圖的數據項的模板-->
                    <GridView.ItemTemplate>
                        <DataTemplate>
                            <Border Height="60">
                                <TextBlock Text="{Binding Group.Key}" FontSize="24"></TextBlock>
                            </Border>
                        </DataTemplate>
                    </GridView.ItemTemplate>
                    <!--列表布局模板-->
                    <GridView.ItemsPanel>
                        <ItemsPanelTemplate>
                            <WrapGrid ItemWidth="100" ItemHeight="75" MaximumRowsOrColumns="1" VerticalChildrenAlignment="Center" />
                        </ItemsPanelTemplate>
                    </GridView.ItemsPanel>
                    <!--列表項目容器的樣式設置-->
                    <GridView.ItemContainerStyle>
                        <Style TargetType="GridViewItem">
                            <Setter Property="BorderBrush" Value="Gray" />
                            <Setter Property="Background" Value="Red" />
                            <Setter Property="BorderThickness" Value="3" />
                            <Setter Property="HorizontalContentAlignment" Value="Center" />
                            <Setter Property="VerticalContentAlignment" Value="Center" />
                        </Style>
                    </GridView.ItemContainerStyle>
                </GridView>
            </SemanticZoom.ZoomedOutView>
        </SemanticZoom>
    </Grid>

MainPage.xaml.cs文件主要代碼
------------------------------------------------------------------------------------------------------------------
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
            // 先創建一個普通的數據集合
            List<Item> mainItem = new List<Item>();
            for (int i = 0; i < 10; i++)
            {
                mainItem.Add(new Item { Content = "A類別", Title = "Test A" + i });
                mainItem.Add(new Item { Content = "B類別", Title = "Test B" + i });
                mainItem.Add(new Item { Content = "C類別", Title = "Test C" + i });
            }
            // 使用LINQ語法把普通的數據集合轉換成分組的數據集合
            List<ItemInGroup> Items = (from item in mainItem group item by item.Content into newItems select new ItemInGroup { Key = newItems.Key, ItemContent = newItems.ToList() }).ToList();
            // 設置CollectionViewSource對象的數據源
            this.itemcollectSource.Source = Items;
            // 分別對兩個視圖進行綁定 
            outView.ItemsSource = itemcollectSource.View.CollectionGroups;
            inView.ItemsSource = itemcollectSource.View;
        }
    }
     // 分組的實體類，也就是分組的數據集合最外面的數據項的實體類
    public class ItemInGroup
    {
        // 分組的組頭屬性
        public string Key { get; set; }
        // 分組的數據集合
        public List<Item> ItemContent { get; set; }
    }
    // 列表的數據實體類
    public class Item
    {
        public string Title { get; set; }
        public string Content { get; set; }
    }

本文來源於《深入理解Windows Phone 8.1 UI控件編程》

本書更多試讀文章：http://www.cnblogs.com/linzheng/p/3763382.html

源代碼下載：http://vdisk.weibo.com/s/zt_pyrfNHoezI

歡迎關注我的微博@WP林政   微信公眾號：wp開發（號：wpkaifa）

WP8.1技術交流群：372552293