快速构建Windows 8风格应用6-GridView数据控件

原文:快速构建Windows 8风格应用6-GridView数据控件

本篇博文主要介绍什么是GridView数据控件、如何构建常用的GridView数据呈现样式。

 

什么是GridView数据控件?

GridView控件用来显示数据集合。它继承自ItemsControl。通常使用GridView控件来横向显示数据,并且显示的数据通常是排序过的。另外我们一般开发水平视图时,通常使用GridView显示数据集合。 

GridView数据控件包含的重要属性和事件:

1)  IsItemClickEnabled属性:获取或设置点击列表项是否会触发Click事件;

2)  SelectionMode属性:获取或设置选择的模式;

3)  HeaderTemplate属性:获取或设置列表标题的模版,改变标题的外观;

4)  GroupStyle属性:获取GroupStyle对象集合,定义每组的外观;

5)  ItemsPanel属性:获取或设置放置内容的面板(通常用来改变GridView的呈现数据的方向);

6)  SelectionChanged事件:当选择的项改变时触发;

7)  ItemClick事件:当点击列表项,且IsItemClickEnabled属性值为true时将触发该事件;

 

如何构建常用的GridView数据呈现样式?

样式1 

样式1只是将数据全部呈现出来,并没有其他任何的用户操作,那么我们该如何构建这种样式的GridView呢?

XAML代码中声明GridView控件,并设置GridView控件的SelectionMode属性值为None,ItemTemplate属性引用名字为StoreFrontTileTemplate的静态资源。具体代码如下:

StoreFrontTileTemplate的静态资源具体代码如下: 

C#代码中将数据绑定到GridView控件上。具体代码如下: 

 

样式2 

样式2中选择列表中某一项,左上角显示我们选中了哪一项的信息,那么我们该如何构建这种样式的GridView呢?

XAML代码中声明GridView控件,并设置GridView控件的IsItemClickEnabled属性值为true(点击某一项时触发ItemClick事件),注册ItemClick事件。具体代码如下:

C#代码中将数据绑定到GridView控件上,具体代码如下: 

ItemClick事件代码如下: 

 

样式3 

样式3种将数据进行了分组呈现,其中组与组之间是水平方向呈现,组中数据项是竖直方向呈现,那么我们该如何构建这种样式的GridView呢?

XAML代码中声明GridView数据控件,并设置ItemsSource属性绑定为名称为cvs1的CollectionViewSource上,同时设置ItemsPanel,ItemTemplate和GroupStyle属性。具体代码如下: 

设置GridView的ItemsPanel属性,来控制数据显示的方向,具体代码如下: 

设置GridView的ItemTemplate属性,来控制显示数据的样式等,具体代码如下: 

设置GridView的GroupStyle属性,来控制显示数据组的样式,同时也可以控制组中数据项显示的方向,具体代码如下:

C#代码中将数据绑定到名称为cvs1的CollectionViewSource上,具体代码如下: 

 

最后我们也可设置GridView控件的Header属性来呈现不同的样式效果,例如:

呈现的效果可以为: 

时间: 2024-09-20 19:31:45

快速构建Windows 8风格应用6-GridView数据控件的相关文章

快速构建Windows 8风格应用8-贴靠视图

原文:快速构建Windows 8风格应用8-贴靠视图 本篇博文主要介绍如何切换出贴靠视图.关于贴靠视图的设计.关于贴靠视图的应用程序栏和如何实现贴靠视图. 如何切换出贴靠视图 第一步:水平方向全屏视图 第二步:通过边缘轻扫手势,向设备左端或右端进行贴靠  第三步:实现贴靠视图的效果  我们知道如何通过手势的操作切换出一个应用的贴靠视图了. 关于开发贴靠视图,对于我们开发者需要注意哪些呢?如下几点: 所有的应用程序都是支持贴靠视图的. 根据应用的业务需求,最好为贴靠视图量身定做页面效果(也就是说需

快速构建Windows 8风格应用4-FlipView数据控件

原文:快速构建Windows 8风格应用4-FlipView数据控件 本篇博文主要介绍为什么使用FlipView控件.什么是FlipView控件.如何使用FlipView控件和FlipView控件最佳实践.   为什么使用FlipView控件? 如果我们开发一个购物类应用,希望在产品详细页面中显示产品的多个图像,对于这种小型数据集合可以使用FlipView控件. 如果我们开发一个房地产类应用,希望针对每间房屋显示许多图像,以展示各个房间,对于这种中型数据集合可以包括FlipView控件,以便让用

快速构建Windows 8风格应用17-布局控件

原文:快速构建Windows 8风格应用17-布局控件 本篇博文主要介绍三种常用的布局控件:Canvas.Grid.StackPanel. Panel类是开发Windows 8 Store应用中一个重要类,它在Windows 8 Store应用布局系统中扮演非常重要角色. Panel可以承载多个子元素,面板类可以把子元素存放在栈中.或网格里面.或把子元素停靠在其边缘等. Panel类自身是一个抽象类,下面是Panel类的层次结构: Windows 8 Store应用中包含的三个标准布局控件:Ca

快速构建Windows 8风格应用21-构建简单媒体播放器

原文:快速构建Windows 8风格应用21-构建简单媒体播放器 本篇博文主要介绍如何构建一个简单的媒体播放器. <快速构建Windows 8风格应用20-MediaElement>博文中提到了如何使用MediaElement对象进行播放视频的简单功能,但是在实际应用中需要更复杂的功能,例如:控制视频播放的控件.全屏模式.进度条等等其他功能. 本篇博文中示例使用应用程序中包含的媒体文件,当然我们也可以通过网络或者本地[使用FileOpenPicker]进行加载某一媒体文件. MSDN中关于媒体

快速构建Windows 8风格应用2-创建调试应用

原文:快速构建Windows 8风格应用2-创建调试应用 本篇博文主要介绍的是创建应用时可以选择哪些模版,生成默认的Windows 8风格应用解决方案中含哪些文件,最后是如何调试Windows 8风格应用. 我们如何使用Visual Studio 2012创建Windows 8风格应用呢?可归结为以下几步: 1.选择我们要使用的开发语言,例如:JavaScript.C++.C#.Visual Basic. 2.选择项目模版,可以选择以下常用的项目模版: 1)拆分应用(Split App)模版  

快速构建Windows 8风格应用25-数据绑定

原文:快速构建Windows 8风格应用25-数据绑定 本篇博文主要介绍如何将UI元素与数据进行绑定.数据绑定的方向.数据更改通知.数据转换.数据绑定支持的绑定方案. 数据绑定是一种简单方式来显示数据,UI元素与数据对象之间的连接或绑定是允许数据在两者之间流动的.另外建立了绑定且数据发生变化时,相应的UI元素会自动显示变化.   如何将UI元素与数据进行绑定   从上面图可以知道,每个绑定必须指定一个源和一个目标. 其中源对象可以是任何CLR对象,包括目标元素自身和其他UI元素.目标可以是Fra

快速构建Windows 8风格应用20-MediaElement

原文:快速构建Windows 8风格应用20-MediaElement 本篇博文主要介绍MediaElement概述.MediaElement对象介绍.MediaElement常用属性.如何控制媒体播放.   MediaElement概述 通常在Windows 8风格应用中播放音频或视频文件时是使用MediaElement类进行构建的. MediaElement对象提供了用于播放视频或音频的属性和方法. 相关MediaElement的开发示例可参考该链接:XAML media playback

快速构建Windows 8风格应用36-商店应用发布流程

原文:快速构建Windows 8风格应用36-商店应用发布流程 引言 在发布应用之前,我们需要注册开发者账号才能够发布应用.我们可以登录https://appdev.microsoft.com/StorePortals/ 该网址进行注册开发者账号,同时我们也可以点击这里来浏览MSDN给到的开发者账号注册的详细步骤.那么注册完成开发者账号后,如何发布Windows Store 应用程序呢? Windows Store App 发布流程 1,使用Visual Studio 2012打开要上传的应用,

快速构建Windows 8风格应用29-捕获图片与视频

原文:快速构建Windows 8风格应用29-捕获图片与视频 引言 本篇博文主要介绍Windows 8中相机的概念.捕获图片与视频的基本原理.如何实现捕获图片与视频.相机最佳实践. 一.相机 关于相机 1.相机对话框提供了触屏优化的全屏体验,你可从嵌入的或附加的相机中捕获照片和视频. 2.全屏对话框处理显示相机 UI 的工作. 3.通过此对话框,你可以使用对 Windows.Media.Capture.CameraCaptureUI.captureFileAsyncAPI 的一种方法调用捕获照片