快速构建Windows 8风格应用5-ListView数据控件
原文:快速构建Windows 8风格应用5-ListView数据控件
本篇博文主要介绍什么是ListView数据控件、如何构建ListView数据控件。
什么是ListView数据控件?
1) ListView数据控件用来显示数据集合。
2) 继承自ItemsControl。
3) 大多数情况是纵向显示数据,显示的数据通常是排序过的。
4) 在切换到Snap View(贴靠视图)时,通常使用ListView显示数据集合。
如何构建ListView数据控件?
首先我们需要了解一下ListView控件中一些重要属性和事件:
1) IsItemClickEnabled属性:获取或设置点击列表项是否会触发Click事件;
2) SelectionMode属性:获取或设置选择的模式;
3) HeaderTemplate属性:获取或设置列表标题的模版,改变标题的外观;
4) GroupStyle属性:获取GroupStyle对象集合,定义每组的外观;
5) SelectionChanged事件:当选择的项改变时触发;
6) ItemClick事件:当点击列表项,并且IsItemClickEnabled属性值为true时,将触发该事件;
另外我们在使用ListView进行数据呈现的时候,需要考虑ListView控件的交互模式:
ListView的SelectionMode属性为枚举类型,其中包含值有:
1) None:没有已选择项;
2) Single:只有一项可选择;
3) Multiple:有多项可选择;
4) Extended:有多项可选择并且选择项可以不连续;
下面我们来看一下几种常用ListView呈现数据的样式效果:
效果一:静态列表。
那么我们如何在应用程序中实现这种ListView样式呢?
XAML代码中:
可以看到ListView控件中ItemTemplate引用了名字为StoreFrontTitleTemplate的静态资源,并且设置SelectionMode值为None。StoreFrontTitleTemplate的静态资源代码如下:
C#代码中将数据绑定到ListView控件上,代码如下:
效果二:点击左侧列表某一项,右侧显示详细信息。
这种效果是点击左边列表中某一项,右边显示该项的详细信息,那么我们如何在代码中实现这种样式效果呢?
首先我们来看左侧列表实现ListView的XAML代码:
其中设置ListView控件的ItemTemplate为名称为MessageListImageTemplate的静态资源,ItemPanel为名称为MessageListItemsPanelTemplate的静态资源。
MessageListImageTemplate静态资源XAML代码如下:
MessageListItemsPanelTemplate静态资源XAML代码如下:
我们了解了如何实现ListView的XAML后,下面来看一下效果图中右侧XAML代码是如何实现的。
其实效果图中右侧定义了一个ScrollViewer控件,它的DataContext属性值设置为ListView的SelectedItem属性。
最后我们在C#代码中将数据绑定到ListView控件上:
效果三:左侧列表只能进行单选,右侧列表可以进行多项选择。
这里我们想实现列表中项能够进行单选或者多选,只需要设置ListView的SelectionMode属性值为Single;Multiple或Extended。
我们可以设置ListView列表中的Header,XAML代码如下:
实现效果:红色框体内是我们设定的ListView控件Hearder。
当然我们也可以将数据在ListView控件进行分组呈现。XAML代码设置如下:
实现效果:红色框体内是我们设定的ListView控件分组。
快速构建Windows 8风格应用5-ListView数据控件的更多相关文章
- 快速构建Windows 8风格应用8-贴靠视图
原文:快速构建Windows 8风格应用8-贴靠视图 本篇博文主要介绍如何切换出贴靠视图.关于贴靠视图的设计.关于贴靠视图的应用程序栏和如何实现贴靠视图. 如何切换出贴靠视图 第一步:水平方向全屏视图 ...
- 快速构建Windows 8风格应用4-FlipView数据控件
原文:快速构建Windows 8风格应用4-FlipView数据控件 本篇博文主要介绍为什么使用FlipView控件.什么是FlipView控件.如何使用FlipView控件和FlipView控件最佳 ...
- 快速构建Windows 8风格应用17-布局控件
原文:快速构建Windows 8风格应用17-布局控件 本篇博文主要介绍三种常用的布局控件:Canvas.Grid.StackPanel. Panel类是开发Windows 8 Store应用中一个重 ...
- 快速构建Windows 8风格应用15-ShareContract构建
原文:快速构建Windows 8风格应用15-ShareContract构建 本篇博文主要介绍共享数据包.如何构建共享源.如何构建共享目标.DataTransferManager类. 共享数据包 Da ...
- 快速构建Windows 8风格应用14-ShareContract概述及原理
原文:快速构建Windows 8风格应用14-ShareContract概述及原理 本篇博文主要介绍Share Contract概述.Share Contract实现原理.实现Share Contra ...
- 快速构建Windows 8风格应用13-SearchContract构建
原文:快速构建Windows 8风格应用13-SearchContract构建 本篇博文主要介绍如何在应用中构建SearchContract,相应的原理已经在博文<快速构建Windows 8风格 ...
- 快速构建Windows 8风格应用9-竖直视图
原文:快速构建Windows 8风格应用9-竖直视图 本篇博文主要介绍竖直视图概览.关于竖直视图设计.如何构建竖直视图 竖直视图概览 Windows 8为了支持旋转的设备提供了竖屏视图,我们开发的应用 ...
- 快速构建Windows 8风格应用10-设备方向
原文:快速构建Windows 8风格应用10-设备方向 本篇博文主要介绍常用支持Windows 8操作系统设备的方向.如何获取当前设备方向.DisplayProperties类. 常用支持Window ...
- 快速构建Windows 8风格应用11-语义缩放
原文:快速构建Windows 8风格应用11-语义缩放 本篇博文主要介绍为什么需要语义缩放.什么是语义缩放.如何构建语义缩放. 为什么需要语义缩放 如果用过Windows 8系统的开发者都知道在Win ...
随机推荐
- MVC中使用SignalR
MVC中使用SignalR打造酷炫实用的即时通讯功能附源码 前言,现在这世道写篇帖子没个前言真不好意思发出来.本贴的主要内容来自于本人在之前项目中所开发的一个小功能,用于OA中的即时通讯.由于当时 ...
- Javascript设计模式与开发实践读书笔记(1-3章)
第一章 面向对象的Javascript 1.1 多态在面向对象设计中的应用 多态最根本好处在于,你不必询问对象“你是什么类型”而后根据得到的答案调用对象的某个行为--你只管调用行为就好,剩下的一切 ...
- 大数据下的数据分析平台架构zz
转自http://www.cnblogs.com/end/archive/2012/02/05/2339152.html 随着互联网.移动互联网和物联网的发展,谁也无法否认,我们已经切实地迎来了一个海 ...
- SendRedirect和forward差分
(1)重定向JSP实现JSP/Servlet跳转到目标资源的方法中,基本的想法是:server目标资源完成URL通过HTTP 在回答本报发client浏览器.收到的浏览器URL更新到地址栏后,而目标资 ...
- ZOJ3822 ACM-ICPC 2014 亚洲杯赛事现场牡丹江司D称号Domination 可能性DP
Domination Time Limit: 8 Seconds Memory Limit: 131072 KB Special Judge Edward is the headm ...
- 移动web开发经验总结(1) (转)
1.<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-sca ...
- JavaScript之事件处理详解
一.事件传播机制 客户端JavaScript程序(就是浏览器啦)采用了异步事件驱动编程模型.当文档.浏览器.元素或与之相关的对象发生某些有趣的事情时,Web浏览器就会产生事件(event).如果Jav ...
- 我的MYSQL学习心得(六)
原文:我的MYSQL学习心得(六) 我的MYSQL学习心得(六) 我的MYSQL学习心得(一) 我的MYSQL学习心得(二) 我的MYSQL学习心得(三) 我的MYSQL学习心得(四) 我的MYSQL ...
- Access Toke调用受保护的API
ASP.NET Web API与Owin OAuth:使用Access Toke调用受保护的API 在前一篇博文中,我们使用OAuth的Client Credential Grant授权方式,在服务端 ...
- Appium键盘操作
方法1 AppiumDriver实现了在上述功能,代码如下(java版本) driver.sendKeyEvent(66);方法2 HashMap<String, Integer> key ...