Windows Phone 8.1 ListBox Group display

First understand the list group of friends can first look, the following link!
Http://www.cnblogs.com/linzheng/archive/2014/09/28/3999217.html

The content of the link just introduced the basic prototype, I put in some of my personal changes to add,
Hope to be helpful to everyone! If you find that I do not have any shortcomings, please suggest, communicate with each other to better progress

. xaml code

2. <!--group Thumbnail list background color--
   
4. <Page.Resources>
   
6. <prim:jumplistitembackgroundconverter x:key= "Backgroundconverter" enabled= "#FF0086D0" disabled= "{ThemeResource Contentdialogdimmingthemebrush} "/>
   
8. <prim:jumplistitemforegroundconverter x:key= "Foregroundconverter"/>
   
10. </Page.Resources>
    
12. 
    
14. <Grid>
    
16. <Grid.Resources>
    
18. <!--Create a data source object, note that the Itemcontent property is the property of the list of true underlying data in the data source, and you must set the property's value data source to navigate to the actual bound data entity object-
    
20. <collectionviewsource x:name= "Itemcollectsource" issourcegrouped= "true" itemspath= "Internallist"/>
    
22. </Grid.Resources>
    
24. <semanticzoom x:name= "SemanticZoom" >
    
26. <SemanticZoom.ZoomedInView>
    
28. <!--Place the GridView (or ListView) here to represent a magnified view--
    
30. <listview x:name= "InView" >
    
32. <ListView.GroupStyle>
    
34. <groupstyle hidesifempty= "True" >
    
36. <!--template for displaying data items for the header of a list--
    
38. <groupstyle.headertemplate >
    
40. <DataTemplate>
    
42. <border background= "#FF0086D0" height= "width=" >
    
44. 
    
46. <textblock text= "{Binding Key}" fontsize= "37.333" foreground= "white" horizontalalignment= "Center" verticalalignment= "Center"/>
    
48. </Border>
    
50. </DataTemplate>
    
52. </GroupStyle.HeaderTemplate>
    
54. </GroupStyle>
    
56. </ListView.GroupStyle>
    
58. <!--a template for displaying data items for a list--
    
60. <ListView.ItemTemplate>
    
62. <DataTemplate>
    
64. <StackPanel>
    
66. <textblock text= "{Binding Title}" height= "Fontsize=" ></TextBlock>
    
68. </StackPanel>
    
70. </DataTemplate>
    
72. </ListView.ItemTemplate>
    
74. </ListView>
    
76. </SemanticZoom.ZoomedInView>
    
78. <SemanticZoom.ZoomedOutView>
    
80. <!--Place the GridView (or ListView) here to represent a smaller view--
    
82. <gridview x:name= "Outview" background= "#7F000000" margin= "0,10,0,0" >
    
84. <!--template for displaying data items for a pop-up grouped list view--
    
86. <GridView.ItemTemplate>
    
88. <DataTemplate>
    
90. <grid width= "height=" >
    
92. <border background= "{Binding converter={staticresource Backgroundconverter}}" margin= "0,10,10,0" >
    
94. <textblock text= "{Binding group.key}" fontsize= "37.333" horizontalalignment= "left" verticalalignment= "Bottom"
    
96. Foreground= "{Binding converter={staticresource Foregroundconverter}}"/>
    
98. </Border>
    
100. </Grid>
     
102. </DataTemplate>
     
104. </GridView.ItemTemplate>
     
106. </GridView>
     
108. </SemanticZoom.ZoomedOutView>
     
110. </SemanticZoom>
     
112. </Grid>

Copy Code

, CS Code

2. 
   
4. public void Fun ()
   
6. {
   
8. This. InitializeComponent ();
   
10. Create a normal data collection first
    
12. list<item> Mainitem = new list<item> ();
    
14. for (int i = 0; i <; i++)
    
16. {
    
18. Mainitem.add (new Item {Content = "a", Title = "Test A" + i});
    
20. Mainitem.add (new Item {Content = "B", Title = "Test B" + i});
    
22. Mainitem.add (new Item {Content = "c", Title = "Test C" + i});
    
24. 
    
26. Mainitem.add (new Item {Content = "D", Title = "Test A" + i});
    
28. Mainitem.add (new Item {Content = "F", Title = "Test B" + i});
    
30. Mainitem.add (new Item {Content = "G", Title = "Test C" + i});
    
32. 
    
34. Mainitem.add (new Item {Content = "c", Title = "Test C" + i});
    
36. Mainitem.add (new Item {Content = "c", Title = "Test C" + i});
    
38. Mainitem.add (new Item {Content = "c", Title = "Test C" + i});
    
40. 
    
42. Mainitem.add (new Item {Content = "H", Title = "Test A" + i});
    
44. Mainitem.add (new Item {Content = "I", Title = "Test B" + I});
    
46. Mainitem.add (new Item {Content = "M", Title = "Test C" + i});
    
48. 
    
50. Mainitem.add (new Item {Content = "N", Title = "Test A" + i});
    
52. Mainitem.add (new Item {Content = "O", Title = "Test B" + i});
    
54. Mainitem.add (new Item {Content = "P", Title = "Test C" + i});
    
56. 
    
58. Mainitem.add (new Item {Content = "Q", Title = "Test A" + i});
    
60. Mainitem.add (new Item {Content = "R", Title = "Test B" + i});
    
62. Mainitem.add (new Item {Content = "S", Title = "Test C" + i});
    
64. 
    
66. Mainitem.add (new Item {Content = "T", Title = "Test A" + i});
    
68. Mainitem.add (new Item {Content = "W", Title = "Test B" + i});
    
70. Mainitem.add (new Item {Content = "V", Title = "Test C" + i});
    
72. 
    
74. Mainitem.add (new Item {Content = "U", Title = "Test A" + i});
    
76. Mainitem.add (new Item {Content = "X", Title = "Test B" + i});
    
78. Mainitem.add (new Item {Content = "Y", Title = "Test C" + i});
    
80. Mainitem.add (new Item {Content = "Z", Title = "Test C" + i});
    
82. }
    
84. Using LINQ syntax to transform an ordinary data collection into a collection of data for an ingredient group
    
86. List<itemingroup> Items = (from item on Mainitem group item by item. Content into NewItems select New Itemingroup {Key = Newitems.key, itemcontent = Newitems.tolist ()}). ToList ();
    
88. 
    
90. list<alphakeygroup<item>> Items = Alphakeygroup<item>. Creategroups (
    
92. Mainitem,
    
94. (Item s) = = {return s.title;},
    
96. true);
    
98. 
    
100. Set the data source for the CollectionViewSource object
     
102. This.itemcollectSource.Source = Items;
     
104. To bind two views separately
     
106. Outview.itemssource = itemcollectSource.View.CollectionGroups;
     
108. Inview.itemssource = Itemcollectsource.view;
     
110. }
     
112. }
     
114. The entity class of the grouped entity class, which is the outermost data item of the grouped data collection
     
116. public class Itemingroup
     
118. {
     
120. Group header properties for grouping
     
122. public string Key {get; set;}
     
124. Grouped data collection
     
126. Public list<item> itemcontent {get; set;}
     
128. }
     
130. List of data entity classes
     
132. public class Item
     
134. {
     
136. public string Title {get; set;}
     
138. public string Content {get; set;}
     
140. }

Copy Code

Windows Phone 8.1 ListBox Group display