windows phone 8.1 listbox 分組顯示

標籤：des   style   blog   http   io   ar   使用   for   sp   

初次瞭解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. 
   
7.     <Grid>
   
8.         <Grid.Resources>
   
9.             <!--建立資料來源對象，注意ItemContent屬性就是資料來源中真正的基礎資料的列表的屬性，必須設定該屬性的值資料來源才能定位到實際繫結資料實體物件-->
   
10.             <CollectionViewSource x:Name="itemcollectSource" IsSourceGrouped="true" ItemsPath="InternalList" />
    
11.         </Grid.Resources>
    
12.         <SemanticZoom x:Name="semanticZoom">
    
13.             <SemanticZoom.ZoomedInView>
    
14.                 <!-- 在這裡放置GridView(或ListView)以表示放大視圖 -->
    
15.                 <ListView x:Name="inView">
    
16.                     <ListView.GroupStyle>
    
17.                         <GroupStyle HidesIfEmpty="True">
    
18.                             <!--用於顯示列表頭的資料項目的模板-->
    
19.                             <GroupStyle.HeaderTemplate >
    
20.                                 <DataTemplate>
    
21.                                     <Border Background="#FF0086D0" Height="50" Width="50">
    
22. 
    
23.                                         <TextBlock Text="{Binding Key}" FontSize="37.333" Foreground="White" HorizontalAlignment="Center" VerticalAlignment="Center"/>
    
24.                                     </Border>
    
25.                                 </DataTemplate>
    
26.                             </GroupStyle.HeaderTemplate>
    
27.                         </GroupStyle>
    
28.                     </ListView.GroupStyle>
    
29.                     <!--用於顯示列表的資料項目的模板-->
    
30.                     <ListView.ItemTemplate>
    
31.                         <DataTemplate>
    
32.                             <StackPanel>
    
33.                                 <TextBlock Text="{Binding Title}" Height="40" FontSize="30"></TextBlock>
    
34.                             </StackPanel>
    
35.                         </DataTemplate>
    
36.                     </ListView.ItemTemplate>
    
37.                 </ListView>
    
38.             </SemanticZoom.ZoomedInView>
    
39.             <SemanticZoom.ZoomedOutView>
    
40.                 <!-- 在這裡放置GridView(或ListView)以表示縮小視圖 -->
    
41.                 <GridView x:Name="outView" Background="#7F000000" Margin="0,10,0,0">
    
42.                     <!--用於顯示彈出的分組列表視圖的資料項目的模板-->
    
43.                     <GridView.ItemTemplate>
    
44.                         <DataTemplate>
    
45.                             <Grid Width="90" Height="90">
    
46.                                 <Border Background="{Binding Converter={StaticResource BackgroundConverter}}" Margin="0,10,10,0" >
    
47.                                     <TextBlock Text="{Binding Group.Key}" FontSize="37.333" HorizontalAlignment="Left" VerticalAlignment="Bottom"
    
48.                                                Foreground="{Binding Converter={StaticResource ForegroundConverter}}"/>
    
49.                                 </Border>
    
50.                             </Grid>
    
51.                         </DataTemplate>
    
52.                     </GridView.ItemTemplate>
    
53.                 </GridView>
    
54.             </SemanticZoom.ZoomedOutView>
    
55.         </SemanticZoom>
    
56.     </Grid>

複製代碼

,cs 代碼

1. 
   
2. public void fun()
   
3.         {
   
4.             this.InitializeComponent();
   
5.             // 先建立一個普通的資料集合
   
6.             List<Item> mainItem = new List<Item>();
   
7.             for (int i = 0; i < 10; i++)
   
8.             {
   
9.                 mainItem.Add(new Item { Content = "A", Title = "Test A" + i });
   
10.                 mainItem.Add(new Item { Content = "B", Title = "Test B" + i });
    
11.                 mainItem.Add(new Item { Content = "C", Title = "Test C" + i });
    
12. 
    
13.                 mainItem.Add(new Item { Content = "D", Title = "Test A" + i });
    
14.                 mainItem.Add(new Item { Content = "F", Title = "Test B" + i });
    
15.                 mainItem.Add(new Item { Content = "G", Title = "Test C" + i });
    
16. 
    
17.                 mainItem.Add(new Item { Content = "C", Title = "Test C" + i });
    
18.                 mainItem.Add(new Item { Content = "C", Title = "Test C" + i });
    
19.                 mainItem.Add(new Item { Content = "C", Title = "Test C" + i });
    
20. 
    
21.                 mainItem.Add(new Item { Content = "H", Title = "Test A" + i });
    
22.                 mainItem.Add(new Item { Content = "I", Title = "Test B" + i });
    
23.                 mainItem.Add(new Item { Content = "M", Title = "Test C" + i });
    
24. 
    
25.                 mainItem.Add(new Item { Content = "N", Title = "Test A" + i });
    
26.                 mainItem.Add(new Item { Content = "O", Title = "Test B" + i });
    
27.                 mainItem.Add(new Item { Content = "P", Title = "Test C" + i });
    
28. 
    
29.                 mainItem.Add(new Item { Content = "Q", Title = "Test A" + i });
    
30.                 mainItem.Add(new Item { Content = "R", Title = "Test B" + i });
    
31.                 mainItem.Add(new Item { Content = "S", Title = "Test C" + i });
    
32. 
    
33.                 mainItem.Add(new Item { Content = "T", Title = "Test A" + i });
    
34.                 mainItem.Add(new Item { Content = "W", Title = "Test B" + i });
    
35.                 mainItem.Add(new Item { Content = "V", Title = "Test C" + i });
    
36. 
    
37.                 mainItem.Add(new Item { Content = "U", Title = "Test A" + i });
    
38.                 mainItem.Add(new Item { Content = "X", Title = "Test B" + i });
    
39.                 mainItem.Add(new Item { Content = "Y", Title = "Test C" + i });
    
40.                 mainItem.Add(new Item { Content = "Z", Title = "Test C" + i });
    
41.             }
    
42.             // 使用LINQ文法把普通的資料集合轉換成分組的資料集合
    
43.             //List<ItemInGroup> Items = (from item in mainItem group item by item.Content into newItems select new ItemInGroup { Key = newItems.Key, ItemContent = newItems.ToList() }).ToList();
    
44. 
    
45.             List<AlphaKeyGroup<Item>> Items = AlphaKeyGroup<Item>.CreateGroups(
    
46.                                                                                         mainItem,
    
47.                                                                                         (Item s) => { return s.Title; },
    
48.                                                                                         true);
    
49. 
    
50.             // 設定CollectionViewSource對象的資料來源
    
51.             this.itemcollectSource.Source = Items;
    
52.             // 分別對兩個視圖進行綁定
    
53.             outView.ItemsSource = itemcollectSource.View.CollectionGroups;
    
54.             inView.ItemsSource = itemcollectSource.View;
    
55.         }
    
56.     }
    
57.     // 分組的實體類，也就是分組的資料集合最外面的資料項目的實體類
    
58.     public class ItemInGroup
    
59.     {
    
60.         // 分組的組頭屬性
    
61.         public string Key { get; set; }
    
62.         // 分組的資料集合
    
63.         public List<Item> ItemContent { get; set; }
    
64.     }
    
65.     // 列表的資料實體類
    
66.     public class Item
    
67.     {
    
68.         public string Title { get; set; }
    
69.         public string Content { get; set; }
    
70.     }

複製代碼

windows phone 8.1 listbox 分組顯示