[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）

WP8.1技術交流群：372552293

本文轉自linzheng 51CTO部落格，原文連結:http://blog.51cto.com/linzheng/1559358