原文:快速构建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属性来呈现不同的样式效果,例如:

呈现的效果可以为:

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

  1. 快速构建Windows 8风格应用9-竖直视图

    原文:快速构建Windows 8风格应用9-竖直视图 本篇博文主要介绍竖直视图概览.关于竖直视图设计.如何构建竖直视图 竖直视图概览 Windows 8为了支持旋转的设备提供了竖屏视图,我们开发的应用 ...

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

    原文:快速构建Windows 8风格应用8-贴靠视图 本篇博文主要介绍如何切换出贴靠视图.关于贴靠视图的设计.关于贴靠视图的应用程序栏和如何实现贴靠视图. 如何切换出贴靠视图 第一步:水平方向全屏视图 ...

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

    原文:快速构建Windows 8风格应用4-FlipView数据控件 本篇博文主要介绍为什么使用FlipView控件.什么是FlipView控件.如何使用FlipView控件和FlipView控件最佳 ...

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

    原文:快速构建Windows 8风格应用17-布局控件 本篇博文主要介绍三种常用的布局控件:Canvas.Grid.StackPanel. Panel类是开发Windows 8 Store应用中一个重 ...

  5. 快速构建Windows 8风格应用15-ShareContract构建

    原文:快速构建Windows 8风格应用15-ShareContract构建 本篇博文主要介绍共享数据包.如何构建共享源.如何构建共享目标.DataTransferManager类. 共享数据包 Da ...

  6. 快速构建Windows 8风格应用14-ShareContract概述及原理

    原文:快速构建Windows 8风格应用14-ShareContract概述及原理 本篇博文主要介绍Share Contract概述.Share Contract实现原理.实现Share Contra ...

  7. 快速构建Windows 8风格应用13-SearchContract构建

    原文:快速构建Windows 8风格应用13-SearchContract构建 本篇博文主要介绍如何在应用中构建SearchContract,相应的原理已经在博文<快速构建Windows 8风格 ...

  8. 快速构建Windows 8风格应用10-设备方向

    原文:快速构建Windows 8风格应用10-设备方向 本篇博文主要介绍常用支持Windows 8操作系统设备的方向.如何获取当前设备方向.DisplayProperties类. 常用支持Window ...

  9. 快速构建Windows 8风格应用11-语义缩放

    原文:快速构建Windows 8风格应用11-语义缩放 本篇博文主要介绍为什么需要语义缩放.什么是语义缩放.如何构建语义缩放. 为什么需要语义缩放 如果用过Windows 8系统的开发者都知道在Win ...

随机推荐

  1. SQL 2008 SP2 找不到SQL Server Engine

    原文:SQL 2008 SP2 找不到SQL Server Engine 最近我有个客户碰到一个很奇怪的问题.他安装SQL server 2008 SP2的时候, SP2的安装程序无法找到SQL se ...

  2. SVN与eclipse整合和利用、SVN与Apache综合

    SVN与eclipse综合 下载SVN插入(http://subclipse.tigris.org) http://subclipse.tigris.org/servlets/ProjectDocum ...

  3. 使用EasyUI实现加入和删除功能

    增删该查是不论什么一个项目都少不了的功能操作.这篇博文主要简单介绍一下怎样使用EasyUI实现加入和删除功能. 首先.导入EasyUI的js代码: <link href="~/Easy ...

  4. mysql 解压缩和赋权

    拉开拉链mysql紧凑根文件夹 注意ini配置文件的内容 basedir = D:\mysql-5.6.17-winx64  datadir = D:\mysql-5.6.17-winx64  por ...

  5. Laravel nginx 伪静态规则

    最近的各种调查PHP相框(CI, Cake, ThinkPHP, Laravel, Yii)情绪Laravel它看起来很漂亮,下一个深入了解.用发展机Apache,Stage在运行nginx,一旦部署 ...

  6. atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl窗体身份验证规则

    atittit.表单验证性质的原则和实施,以及选择和定义自己的兼容easyui dsl规则的表单验证 1. 需求,表单验证须要弹框式,但眼下easyui ms绑定死了tooltip式样 1 2. 表单 ...

  7. Oracle 树操作

    Oracle 树操作(select…start with…connect by…prior) oracle树查询的最重要的就是select…start with…connect by…prior语法了 ...

  8. Tips & Tricks:Apache log4j简明教程(二)

    在上一讲Apache log4j简明教程(一)中介绍了log4j的基本概念,配置文件,以及将日志写入文件的方法,并给出了一个详细的示例.这一讲,我在继续谈一谈如何使用log4j将日志写入MySQL数据 ...

  9. SD3.0四个协议解读

    前面的文章提到过SD卡主要分为两个操作模式,一是初始化和识别操作模式.还有一种就是这篇文章须要分析的传输数据模式啦. 传输数据模式: 传输数据模式主要有六种状态,各自是Stand-by状态.Trans ...

  10. 解决:&lt;net.sf.ehcache.util.UpdateChecker&gt; : New update(s) found: 2.6.5

    由于该项目采用ehcache,所以tomcat每次登录你开始打印net.sf.ehcache.util.UpdateChecker doCheck 一旦有没有特别关注.从今天开始 Tomcat 什么时 ...