您的位置:首页 > 其它

Windows 8 Metro中对GridView或ListView使用分组功能详解

2012-11-23 11:29 483 查看
在应用中使用GridView或ListView可以页面上很多信息能更明朗化,如果再加上分组的话那就更清晰了。以下是本人查阅资料整理的关于Group化的知识点。

先来张效果图:



以GridView为例,步骤如下:

1、在XAML中先放一个GridView控件,然后右击该控件,选择添加分组。



添加以后,<GridView>标签里会自动添加一长串代码,如下:

<GridView>
<GridView.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>
<TextBlock/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid/>
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</GridView.GroupStyle>
</GridView>


2、修改代码,改成自己想要的样式。

1)分析下代码,发现代码里多的是一个叫GroupStyle的属性,下面又分别有ContainerStyle(容器属性,以上图为例,包括省和城市的一整块区域)、HeaderTemplate(标题模板,以上图为例,显示省的区域的模板)、Panel(排版,设置每个Container横向还是竖向排列,每行或每列的最大数)。

其中HeaderTemplate是必要的,保留并修改<DataTemplate>标签里的控件即可。其他两个属性不需要修改的话可以直接删掉。

2)接下来添加ItemTemplate,此时的ItemTemplate还是和往常一样代表每一个具体子模板(以上图为例,表示城市的区域的模板)。修改成自己想要的样式即可。

3、数据源。

这里要绑定的数据源不能是普通的 List 之类的 source,也要有分组的结构。即 List 下的每一个 object 包含一个Key(对应Header,如省)和一个 List (对应该Key下的 Items,如该省的城市)。如:

class Province
{
public string ProvinceName { set; get; }
public List<string> CityNames { set; get; }
}


4、控件绑定。

先定义个CollectionViewSource。

<CollectionViewSource x:Name="InfoList" IsSourceGrouped="True" ItemsPath="CityNames"/>


其中,IsSourceGrouped要设为 true,ItemsPath对应各 ItemTemplate 的数据源路径。

给GridView绑定 CollectionViewSource。

<GridView ItemsSource="{Binding Source={StaticResource InfoList}}">

给Header(标题)绑定。

<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding ProvinceName}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>


这里要要绑定数据源的Key,即 ProvinceName 。

给 Item 绑定。

<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}" />
</DataTemplate>
</GridView.ItemTemplate>


这里因为 CollectionViewSource 里指定了Path 为CityNames ,故在此只写 Binding 即可,每个 Item 会自动去取 CityNames 下的 string。如果 Item 的模板比较复杂, CityNames 也不只是个 string 的 List,那么具体情况,在 Binding 后面加上要绑定的数据路径。

5、数据绑定。

在 .cs 文件里创建个 Province 的 List,赋一些初始值,再加到 CollectionViewSource 上去。

List<Province> list = new List<Province>();
// ...
// 通过检索数据库或手动塞一些值到 list 里去
// ...
InfoList.Source = list;


6、运行程序查看效果。参照第一张图片展示。(具体效果可能有点出入,因为上图的效果里本人设置了 Panel 属性。)

XAML中 GridView 的完整代码如下:

<Page.Resources>
<CollectionViewSource x:Name="InfoList" IsSourceGrouped="True" ItemsPath="CityNames"/>
</Page.Resources>

<GridView ItemsSource="{Binding Source={StaticResource InfoList}}"><GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text="{Binding ProvinceName}"/>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>

<GridView.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"/>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>


如果对分组熟悉了的话,以上的第一步就不需要了,直接在 <GridView> 标签里写代码就是了。不需要特别的格式什么的话,ContainerStyle 和 Panel 都可以不设,如果要设的话,就写上。自己想要什么样的模板,自己去创建吧。

另外,分组功能配合 SemanticZoom 控件来用的话,效果会更好,这里暂时就不介绍了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: