[WP8.1UI控件编程]SemanticZoom控件实现分组列表

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; }
    }