新时尚Windows8开发（21）：分组视图

转自：http://blog.csdn.net/tcjiaan/article/details/8069349

 

 

有时候，数据的量比较大，有可以我们需要对其进行分组，以方便查看，就像系统的应用程序列表一样。

 

其实支持分组视图的控件是ItemsControl控件，不过也许我们比较少用到它，至少，它算是一个半成品，我呢，平时用得较多的要数ListView，因为这个控件很强大，也较为灵活。所以，本文的示例我计划用ListView来完成，其实原理都一样，这个东西完全可以举一反五。

在开工之前，先计一下原理。

A、在设置ItemsSource时，应该使用CollectionViewSource，这玩意儿很实用，它是MV-VM绑定的利器，我们把控件的数据源绑定CollectionViewSource上，而我们的代只要设置CollectionViewSource的Source属性就可以了。

B、一般分组的集合，大致是这样的结构，某类型的集合，而某类型至少具有用于标识分组的属性，和组内成员的列表。比如这样，

class StudentGroup

{

       public string 姓 { get; set; }

       public string[] 学生s { get; set; }

}

 

这样的类结构表明，以学生的姓氏作为分组标识，而另外一个成员至少也是一个IList，即于这个组的成员，比如“王”，那么IList类型的属性里面放的就是姓王的所有学生的列表。

 

C、设置CollectionViewSource的IsSourceGrouped属性为true，这才表示对源数据进行分组，这时候，我们还要设置ItemsPath属性，通过这两个属性，CollectionViewSource就可以顺利地找到哪些属性是分组标识，哪个属性是列表，比如上面的学生例子，ItemsPath属性应该就是“学生s”了。

 

不过，这样说还是有点抽象，世界上没有能比实例更通俗易懂的了。

所以，Action！new一个空白页面项目，然后XAML就按照下面的输入。

[html] view plaincopyprint?

1. <Page  
2.     x:Class="App2.MainPage"  
3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
5.     xmlns:local="using:App2"  
6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
8.     mc:Ignorable="d">  
9.   
10.     <Page.Resources>  
11.         <CollectionViewSource x:Name="cv" x:Key="cv" IsSourceGrouped="True" ItemsPath="Items"/>  
12.     </Page.Resources>  
13.       
14.     <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">  
15.         <ListView ItemsSource="{Binding Source={StaticResource cv}}"  
16.                   SelectionMode="None">  
17.             <ListView.GroupStyle>  
18.                 <GroupStyle>  
19.                     <GroupStyle.ContainerStyle>  
20.                         <Style TargetType="GroupItem">  
21.                             <Setter Property="Template">  
22.                                 <Setter.Value>  
23.                                     <ControlTemplate TargetType="GroupItem">  
24.                                         <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">  
25.                                             <Grid>  
26.                                                 <Grid.RowDefinitions>  
27.                                                     <RowDefinition Height="Auto"/>  
28.                                                     <RowDefinition Height="*"/>  
29.                                                 </Grid.RowDefinitions>  
30.                                                 <ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>  
31.                                                 <ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>  
32.                                             </Grid>  
33.                                         </Border>  
34.                                     </ControlTemplate>  
35.                                 </Setter.Value>  
36.                             </Setter>  
37.                         </Style>  
38.                     </GroupStyle.ContainerStyle>  
39.                     <GroupStyle.HeaderTemplate>  
40.                         <DataTemplate>  
41.                             <Grid Background="Green" Width="60" HorizontalAlignment="Left">  
42.                                 <TextBlock Text="{Binding Key}" FontSize="22" FontWeight="Black"  
43.                                            Margin="15,12,15,8"/>  
44.                             </Grid>  
45.                         </DataTemplate>  
46.                     </GroupStyle.HeaderTemplate>  
47.                     <GroupStyle.Panel>  
48.                         <ItemsPanelTemplate>  
49.                             <VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="5"/>  
50.                         </ItemsPanelTemplate>  
51.                     </GroupStyle.Panel>  
52.                 </GroupStyle>  
53.             </ListView.GroupStyle>  
54.             <ListView.ItemTemplate>  
55.                 <DataTemplate>  
56.                     <TextBlock Text="{Binding}"/>  
57.                 </DataTemplate>  
58.             </ListView.ItemTemplate>  
59.         </ListView>  
60.     </Grid>  
61. </Page>  

注意，设置ItemsSource属性时，记得要用Binding扩展标记，不然，你就等着看异常吧。一般CollectionViewSource应该藏在资源列表中，这样的好处是，无论你引用它多少次，它也只实例化一次，节省开销。

从例子代码中我们看到，要进行分组显示数据，GroupStyle属性至关重要。表面上这个GroupStyle好像有点复杂，其实，你别忘了VS是灰常强大的，告诉你一个很简单的方法来添加GroupStyle，这些XAML都不是我写的，是VS设计器生成的。

 

在设计器中选定ListView，右击，从弹出的快捷菜单中选择“添加GroupStyle”，这样你就能看到神奇的一幕了。

 

待VS生成代码后，我们再按照自己的需要修改一下就行了。

 

还没完，我们还需弄些数据来做测试，以下代码中所涉及的姓名均为虚构，若有雷同，纯属大自然的鬼斧神功。

[csharp] view plaincopyprint?

1. public MainPage()  
2. {  
3.     this.InitializeComponent();  
4.   
5.     string[] arr = { "李大吉", "李鸟人", "李三狗", "李五牛", "江大头", "江三七",  
6.                    "朱三思", "朱二思", "朱一思", "朱头", "朱大凡", "黄自嘲", "黄先生", "黄伟大",  
7.                    "黄草梅", "胡中海", "胡说", "胡扯", "胡萝卜", "胡天才", "胡找死", "胡大坑",  
8.                    "邓天马", "邓饭桶","邓猪脑","邓高高","邓矮矮","曾草民", "曾尼玛", "曾了了",  
9.                    "曾三餐", "曾一般","曾一路", "吴猩猩", "吴小二","吴小三","吴小四","吴小五",  
10.                    "吴老七", "吴老八", "吴老九","吴老十","秦一世", "秦三世", "秦二世","秦四世",  
11.                    "秦五世","秦六世","秦七世","秦八牛", "张产","张凡人","张天晓","张面包","张贵重",  
12.                    "张天庭", "张神马","张新新","张旧旧", "许占","许宅男","许雪山","许骨头","许老大",  
13.                    "许老二", "许老三","许老四","许老五","许老六", "许老七"};  
14.     var res =  
15.         (from x in arr  
16.          group x by x[0].ToString() into g  
17.          select new  
18.          {  
19.              Key = g.Key,  
20.              Items = g.ToArray()  
21.          }).ToList();  
22.   
23.     this.cv.Source = res.ToList();  
24. }  

好了，看看效果吧。