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

本文主要是介绍新时尚Windows8开发（21）：分组视图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

其实支持分组视图的控件是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就按照下面的输入。

<Page
x:Class="App2.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource x:Name="cv" x:Key="cv" IsSourceGrouped="True" ItemsPath="Items"/>
</Page.Resources>
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ListView ItemsSource="{Binding Source={StaticResource cv}}"
SelectionMode="None">
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.ContainerStyle>
<Style TargetType="GroupItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GroupItem">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ContentPresenter ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Margin="{TemplateBinding Padding}"/>
<ItemsControl x:Name="ItemsControl" ItemsSource="{Binding GroupItems}" Grid.Row="1"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</GroupStyle.ContainerStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Background="Green" Width="60" HorizontalAlignment="Left">
<TextBlock Text="{Binding Key}" FontSize="22" FontWeight="Black"
Margin="15,12,15,8"/>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid Orientation="Horizontal" MaximumRowsOrColumns="5"/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
</Page>

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

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

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

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

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

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

好了，看看效果吧。