[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