windows phone 8.1 listbox 分组显示

初次了解list分组的朋友可以先看看，如下链接！
http://www.cnblogs.com/linzheng/archive/2014/09/28/3999217.html

链接的内容 只是介绍了基本雏形，我下面把我个人的一些修改加了进去，
希望能对大家有所帮助！ 如果发现我哪有不足，请提出，相互交流才可以更好的进步

.xaml  代码

1. <!--分组 缩略list 背景颜色-->
2. <Page.Resources>
3. <prim:JumpListItemBackgroundConverter
   x:Key="BackgroundConverter"  Enabled="#FF0086D0"
   Disabled="{ThemeResource ContentDialogDimmingThemeBrush}"/>
4. <prim:JumpListItemForegroundConverter x:Key="ForegroundConverter"/>
5. </Page.Resources>
6. <Grid>
7. <Grid.Resources>
8. <!--创建数据源对象，注意ItemContent属性就是数据源中真正的基础数据的列表的属性，必须设置该属性的值数据源才能定位到实际绑定的数据实体对象-->
9. <CollectionViewSource x:Name="itemcollectSource" IsSourceGrouped="true" ItemsPath="InternalList" />
10. </Grid.Resources>
11. <SemanticZoom x:Name="semanticZoom">
12. <SemanticZoom.ZoomedInView>
13. <!-- 在这里放置GridView(或ListView)以表示放大视图 -->
14. <ListView x:Name="inView">
15. <ListView.GroupStyle>
16. <GroupStyle HidesIfEmpty="True">
17. <!--用于显示列表头的数据项的模板-->
18. <GroupStyle.HeaderTemplate >
19. <DataTemplate>
20. <Border Background="#FF0086D0" Height="50" Width="50">
21. <TextBlock
    Text="{Binding Key}" FontSize="37.333" Foreground="White"
    HorizontalAlignment="Center" VerticalAlignment="Center"/>
22. </Border>
23. </DataTemplate>
24. </GroupStyle.HeaderTemplate>
25. </GroupStyle>
26. </ListView.GroupStyle>
27. <!--用于显示列表的数据项的模板-->
28. <ListView.ItemTemplate>
29. <DataTemplate>
30. <StackPanel>
31. <TextBlock Text="{Binding Title}" Height="40" FontSize="30"></TextBlock>
32. </StackPanel>
33. </DataTemplate>
34. </ListView.ItemTemplate>
35. </ListView>
36. </SemanticZoom.ZoomedInView>
37. <SemanticZoom.ZoomedOutView>
38. <!-- 在这里放置GridView(或ListView)以表示缩小视图 -->
39. <GridView x:Name="outView" Background="#7F000000" Margin="0,10,0,0">
40. <!--用于显示弹出的分组列表视图的数据项的模板-->
41. <GridView.ItemTemplate>
42. <DataTemplate>
43. <Grid Width="90" Height="90">
44. <Border Background="{Binding
    Converter={StaticResource BackgroundConverter}}" Margin="0,10,10,0"
    >
45. <TextBlock
    Text="{Binding Group.Key}" FontSize="37.333" HorizontalAlignment="Left"
    VerticalAlignment="Bottom"
46. Foreground="{Binding Converter={StaticResource ForegroundConverter}}"/>
47. </Border>
48. </Grid>
49. </DataTemplate>
50. </GridView.ItemTemplate>
51. </GridView>
52. </SemanticZoom.ZoomedOutView>
53. </SemanticZoom>
54. </Grid>

复制代码

,cs 代码

1. public void fun()
2. {
3. this.InitializeComponent();
4. // 先创建一个普通的数据集合
5. List<Item> mainItem = new List<Item>();
6. for (int i = 0; i < 10; i++)
7. {
8. mainItem.Add(new Item { Content = "A", Title = "Test A" + i });
9. mainItem.Add(new Item { Content = "B", Title = "Test B" + i });
10. mainItem.Add(new Item { Content = "C", Title = "Test C" + i });
11. mainItem.Add(new Item { Content = "D", Title = "Test A" + i });
12. mainItem.Add(new Item { Content = "F", Title = "Test B" + i });
13. mainItem.Add(new Item { Content = "G", Title = "Test C" + i });
14. mainItem.Add(new Item { Content = "C", Title = "Test C" + i });
15. mainItem.Add(new Item { Content = "C", Title = "Test C" + i });
16. mainItem.Add(new Item { Content = "C", Title = "Test C" + i });
17. mainItem.Add(new Item { Content = "H", Title = "Test A" + i });
18. mainItem.Add(new Item { Content = "I", Title = "Test B" + i });
19. mainItem.Add(new Item { Content = "M", Title = "Test C" + i });
20. mainItem.Add(new Item { Content = "N", Title = "Test A" + i });
21. mainItem.Add(new Item { Content = "O", Title = "Test B" + i });
22. mainItem.Add(new Item { Content = "P", Title = "Test C" + i });
23. mainItem.Add(new Item { Content = "Q", Title = "Test A" + i });
24. mainItem.Add(new Item { Content = "R", Title = "Test B" + i });
25. mainItem.Add(new Item { Content = "S", Title = "Test C" + i });
26. mainItem.Add(new Item { Content = "T", Title = "Test A" + i });
27. mainItem.Add(new Item { Content = "W", Title = "Test B" + i });
28. mainItem.Add(new Item { Content = "V", Title = "Test C" + i });
29. mainItem.Add(new Item { Content = "U", Title = "Test A" + i });
30. mainItem.Add(new Item { Content = "X", Title = "Test B" + i });
31. mainItem.Add(new Item { Content = "Y", Title = "Test C" + i });
32. mainItem.Add(new Item { Content = "Z", Title = "Test C" + i });
33. }
34. // 使用LINQ语法把普通的数据集合转换成分组的数据集合
35. //List<ItemInGroup> Items = (from item in
    mainItem group item by item.Content into newItems select new ItemInGroup
    { Key = newItems.Key, ItemContent = newItems.ToList() }).ToList();
36. List<AlphaKeyGroup<Item>> Items = AlphaKeyGroup<Item>.CreateGroups(
37. mainItem,
38. (Item s) => { return s.Title; },
39. true);
40. // 设置CollectionViewSource对象的数据源
41. this.itemcollectSource.Source = Items;
42. // 分别对两个视图进行绑定
43. outView.ItemsSource = itemcollectSource.View.CollectionGroups;
44. inView.ItemsSource = itemcollectSource.View;
45. }
46. }
47. // 分组的实体类，也就是分组的数据集合最外面的数据项的实体类
48. public class ItemInGroup
49. {
50. // 分组的组头属性
51. public string Key { get; set; }
52. // 分组的数据集合
53. public List<Item> ItemContent { get; set; }
54. }
55. // 列表的数据实体类
56. public class Item
57. {
58. public string Title { get; set; }
59. public string Content { get; set; }
60. }

复制代码