Windows 8 Metro中对GridView或ListView使用分组功能详解
2012-11-23 11:29
483 查看
在应用中使用GridView或ListView可以页面上很多信息能更明朗化,如果再加上分组的话那就更清晰了。以下是本人查阅资料整理的关于Group化的知识点。
先来张效果图:
以GridView为例,步骤如下:
1、在XAML中先放一个GridView控件,然后右击该控件,选择添加分组。
添加以后,<GridView>标签里会自动添加一长串代码,如下:
2、修改代码,改成自己想要的样式。
1)分析下代码,发现代码里多的是一个叫GroupStyle的属性,下面又分别有ContainerStyle(容器属性,以上图为例,包括省和城市的一整块区域)、HeaderTemplate(标题模板,以上图为例,显示省的区域的模板)、Panel(排版,设置每个Container横向还是竖向排列,每行或每列的最大数)。
其中HeaderTemplate是必要的,保留并修改<DataTemplate>标签里的控件即可。其他两个属性不需要修改的话可以直接删掉。
2)接下来添加ItemTemplate,此时的ItemTemplate还是和往常一样代表每一个具体子模板(以上图为例,表示城市的区域的模板)。修改成自己想要的样式即可。
3、数据源。
这里要绑定的数据源不能是普通的 List 之类的 source,也要有分组的结构。即 List 下的每一个 object 包含一个Key(对应Header,如省)和一个 List (对应该Key下的 Items,如该省的城市)。如:
4、控件绑定。
先定义个CollectionViewSource。
其中,IsSourceGrouped要设为 true,ItemsPath对应各 ItemTemplate 的数据源路径。
给GridView绑定 CollectionViewSource。
给Header(标题)绑定。
这里要要绑定数据源的Key,即 ProvinceName 。
给 Item 绑定。
这里因为 CollectionViewSource 里指定了Path 为CityNames ,故在此只写 Binding 即可,每个 Item 会自动去取 CityNames 下的 string。如果 Item 的模板比较复杂, CityNames 也不只是个 string 的 List,那么具体情况,在 Binding 后面加上要绑定的数据路径。
5、数据绑定。
在 .cs 文件里创建个 Province 的 List,赋一些初始值,再加到 CollectionViewSource 上去。
6、运行程序查看效果。参照第一张图片展示。(具体效果可能有点出入,因为上图的效果里本人设置了 Panel 属性。)
XAML中 GridView 的完整代码如下:
如果对分组熟悉了的话,以上的第一步就不需要了,直接在 <GridView> 标签里写代码就是了。不需要特别的格式什么的话,ContainerStyle 和 Panel 都可以不设,如果要设的话,就写上。自己想要什么样的模板,自己去创建吧。
另外,分组功能配合 SemanticZoom 控件来用的话,效果会更好,这里暂时就不介绍了。
先来张效果图:
以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 控件来用的话,效果会更好,这里暂时就不介绍了。
相关文章推荐
- ListView嵌套GridView使用详解及注意事项
- Android PullToRefresh (ListView GridView 下拉刷新) 使用详解
- Android PullToRefresh (ListView GridView 下拉刷新) 使用详解
- Android PullToRefresh (ListView GridView 下拉刷新) 使用详解 Hongyang 转载
- Android PullToRefresh (ListView GridView 上下拉刷新) 使用详解
- Android PullToRefresh (ListView GridView 下拉刷新) 使用详解
- Android PullToRefresh (ListView GridView 下拉刷新) 使用详解
- Android PullToRefresh (ListView GridView 下拉刷新) 使用详解
- 【万里征程——Windows App开发】ListView&GridView之分组
- Android之PullToRefresh(ListView 、GridView 、WebView)使用详解和总结
- 【VB技巧】VB ListView 控件功能使用详解
- ListView嵌套GridView使用详解及注意事项
- ListView嵌套GridView使用详解及注意事项
- Android PullToRefresh (ListView GridView 下拉刷新) 使用详解
- ListView嵌套GridView使用详解
- ListView嵌套GridView使用详解及注意事项
- Android研究之手PullToRefresh(ListView GridView 下拉刷新)使用详解
- ListView嵌套GridView使用详解
- ListView嵌套GridView使用详解
- Android PullToRefresh (ListView GridView 下拉刷新) 使用详解