新时尚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?

<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生成代码后，我们再按照自己的需要修改一下就行了。

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

[csharp] view plaincopyprint?

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();
}

好了，看看效果吧。

新时尚Windows8开发（21）：分组视图相关推荐

新时尚Windows8开发（25）：缩放视图
转自:http://blog.csdn.net/tcjiaan/article/details/8120584 前面有一节,我们探讨了分组视图,本节我们再来吹一下有关缩放视图.那么,这视图怎么个缩放法 ...
新时尚Windows8开发（15）：扩展联系人选择器
老周的博客http://blog.csdn.net/tcjiaan,转载请注明原作者和出处. 上回我们讨论了如何从联系人选择器中选择联系人记录.但,我们也许会发现一个问题,我们都知道,我们选择的联系人 ...
牛仔新时尚-小程序开发案例－数据库篇
今天我将以「牛仔新时尚」小程序为例,服装行业订单小程序从设计到实现的全过程.主要讲产品逻辑搭建和数据库设计的过程.这个小程序的主要功能是向用户展示服装和面料商品,并提供搜索.收藏商品,加入购物车和下单 ...
开发 Spring 自定义视图和视图解析器
Spring 视图和视图解析器简介什么是 Spring 视图和视图解析器 Spring MVC(Model View Controller)是 Spring 中一个重要的组成部分,而 Spring ...
Odoo 12开发之后台视图 – 设计用户界面
Odoo 12开发之后台视图 – 设计用户界面一·菜单项 # 菜单项形成一个层级结构,最顶层结构 # name 是展示在用户界面中的菜单标题 # action 是点击菜单时运行的窗口 # paren ...
IOS开发之表视图(UITableView)
IOS开发之表视图(UITableView)的基本介绍(一) (一):UITableView的基本概念 1.在IOS开发中,表视图的应用十分广泛和普及.因此掌握表视图的用法显得非常重要.一般情况下对于 ...
IOS开发-TableView表视图基础
表视图在IOS中的应用非常广泛,常用于展示显示数据列表. 在工具组中包含了Table View 和Table View Cell 每个表示图都是UITableView的一个实例,每个可见行都是UITa ...
开发者必看｜Android 8.0 新特性及开发指南
背景介绍谷歌2017I/O开发者大会今年将于5月17-19日在美国加州举办.大会将跟往年一样发布最新的 Android 系统,今年为 Android 8.0.谷歌在今年3 月21日发布 Androi ...
【windows8开发】开发平台与开发框架
开门见山,先把windows8 开发平台和开发框架分享给大家. win8 App开发主要分成两部分,desktop app和metro app.右边蓝色的部分就是desktop app的部 ...

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

新时尚Windows8开发（21）：分组视图相关推荐

最新文章

热门文章