原文:快速构建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 Server 连接问题-命名管道

    原文:SQL Server 连接问题-命名管道 出自:http://blogs.msdn.com/b/apgcdsd/archive/2011/01/12/sql-server-1.aspx 一.前言 ...

  2. web 环境项目(intellj部署的tomcat) 重启时报 Exception in thread "HouseKeeper" java.lang.NullPointerException (转)

    Exception in thread "HouseKeeper" java.lang.NullPointerException at org.logicalcobwebs.pro ...

  3. hdoj 1506&amp;&amp;1505(City Game) dp

    // l表示从l[i]到i连续大于a[i]的最远左区间.r表示从i到r[i]连续大于a[i]的最远又区间 DP 找出 a[i] 的最远左区间和最远右区间与自己连着的比自己大的数的长度 , 然后用这个长 ...

  4. don't touch your phone in any unfamiliar way(转)

    直到这两天 Chainfire 说,他正尝试在不修改手机 /System 分区的情况下获取 Android 系统 Root 权限,我才想起他在今年 9 月轻描淡写地提到自己已经把 SuperSU 卖给 ...

  5. Cocos2d-x 文本渲染

     文本渲染: CCLabelAtlas.CCLabelBMFont.CCLabelTTF类都是继承 CCLabelProtocol类,即能够使用系统字,也能够自己定义渲染字体. CCLabelAtla ...

  6. iframe参数

    iframe参数: <iframe src="test.jsp" width="100″ height="50″ frameborder="no ...

  7. HTML5使用和实战分析HTML5 WebSocket API

    通过引入一个简单的界面(请参见下面的列表),开发替代技术,由于长轮询和"永远框架,从而进一步减少延迟. 后台代码 [Constructor(in DOMString url, optiona ...

  8. cer证书签名验证

    一个cer还需要一个签名的证书本身,这是为了防止cer证书被篡改. 有两种类型的证书: 1. 根证书 2. 由根证书颁发子证书. 特根证书.它是自签名. 而其它子证书的签名公钥都保存在它的上级证书里面 ...

  9. java中的反射,invoke方法[转]

    在施老师的项目中需要用到invoke,就是通过函数名反射相应的函数.一下代码简单地介绍了java反射中invoke方法,如果要具体的,可以参考魔乐核心课程的反射部分内容 package org.cur ...

  10. Leetcode:convert_sorted_array_to_binary_search_tree

    一.     称号 排序后的数组成二叉搜索树. 二.     分析 BST的中序遍历是一个sorted-array,再构造回去成一个BST,先将中间的元素作为根节点,这个节点的左右各自是左子树和右子树 ...