您有数据， 很多数据。 您需要以如下方式呈现这些数据，即用户可以毫不费 力地在应用程序中访问和理解数据。 应用程序以新闻文章、配方、赛事比分、财 务图表等形式公开其数据，所有数据都呈现在屏幕上大小不同的区域中，尽量吸 引使用者的注意。 由于小型到中型数据网格便于人们使用、搜索和筛选，现在市 场上众多应用程序大都以较为合理的网格或列表格式呈现数据。 无论是企业应用 程序、个人应用程序还是其他应用程序，网格都是支撑数据快速浏览的基本框架 。
在 Windows 应用商店的应用中，通过使用 ListView 控件可以设置这种数据 呈现结构。 如果您是开发 Windows 应用商店的应用的新手，可以阅读我 2013 年 2 月的文章“使用 HTML5 和 JavaScript 创建 Windows 应用商店的应 用”(msdn.microsoft.com/magazine/jj891058) 和我 2013 年 7 月的文章 “精通用 JavaScript 构建的 Windows 应用商店应用中的控件和设置 ”(msdn.microsoft.com/magazine/dn296546)，了解相关信息。
ListView 控件基础知识
HTML 和 XAML 中都提供了 ListView 控件，该控件以网格或列表格式呈现数 据。 在 Windows JavaScript 库 (WinJS) 应用程序（本文的重点）中，通过将 主机 <div> 元素上的 data-win-control 属性设置为 “WinJS.UI.ListView”，可以使用 ListView 控件，如下所示：
<div id="listView" data-win-control= "WinJS.UI.ListView"></div>
承载 ListView 的 <div> 不包含任何子元素。 不过，它在一个名为 data-win-options 的属性中包含基本配置信息。 通过 data-win-options，可以 使用声明性语法在 HTML 页面中设置 ListView 控件的任何属性。 要正确使用 ListView，需要向它应用以下特征：
ListView 的组和项模板。
ListView 的组和项数据源。
ListView 是使 用网格还是使用列表布局（默认为网格）。
此外，还应指定 ListView 的项选择模式是单个还是多个（默认为多个）。 在 data-win-options 属性中设置了布局和 selectionMode 属性的基本 ListView 如下所示：
<div id="listView" data-win-control= "WinJS.UI.ListView" data-win-options=
"{ selectionMode: 'single', layout : {type: WinJS.UI.GridLayout} }" ></div>
尽管上面的代码定义了一个 ListView，但是该 ListView 光靠自身是无法工 作的。 它需要借助于 WinJS.Binding.List 对象。 List 对象将填充有对象的数 组绑定到项和组模板中定义的 HTML 元素。 这意味着 List 对象定义要显示的数 据，模板定义数据的显示方式。
创建 ListView 模板
为 ListView 设置 <div> 后，接下来可以为其创建模板。 ListView 依赖于 HTML 模板来显示用户可读的数据。 幸运的是，Grid、Split 和 Hub （Windows 8.1 中提供了 Hub）Windows 应用商店应用程序模板包含以网格或列 表格式呈现数据所需的一切，包括示例数据、预定义 ListView 控件和预定义 CSS 类。 您可以修改这些模板，也可以根据需要创建自己的模板。 但是请注意 ，如果您创建自己的模板，应遵循新型 UI 设计原则，按 bit.ly/IkosnL 的 Windows 应用商店的应用开发中心所述实现 Windows 8 轮廓。 在您使用内置 Visual Studio 模板时，这一工作已为您完成。
ListView 需要一个项模板，如果要对数据分组，则还需要一个页眉模板。 项 和组模板的父元素是 data-win-control 属性已设置为 “WinJS.Binding.Template”的简单 <div> 元素。
页眉模板应包含每个组的链接，用户单击这些链接，则会转到列出属于该组的 项的页面。 下面是十分常见的母版/详细信息导航模式的示例。 在图 1 中，分 类为“headertemplate”的 <div> 包含一个与该组的键绑定的 <button> 元素。 当用户点击或单击该按钮时，会转到一个显示该组成员 的页面。
图 1 ListView 控件的页眉和项模板
<div class="headertemplate" data-win-
control="WinJS.Binding.Template">
<button class="group-header win-type-x-large win-type-
interactive"
data-win-bind="groupKey: key"
onclick
="Application.
navigator.pageControl
.
navigateToGroup(event.srcElement.groupKey)"
role="link" tabindex="-1"
type="button">
<span class="group-title win-type-ellipsis" data-win-
bind=
"textContent: title"></span>
<span class="group-chevron"></span>
</button>
</div>
<div class="itemtemplate" data-win-
control="WinJS.Binding.Template">
<div class="item">
<img class="item-image" src="#" data-win-
bind=
"src: backgroundImage; alt: title" />
<div class="item-overlay">
<h4 class="item-title" data-win-
bind="textContent: title"></h4>
<h6 class="item-subtitle win-type-ellipsis" data-
win-bind=
"textContent: subtitle"></h6>
</div>
</div>
</div>
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索listview
， 数据
， 应用
， 控件
， 网格
， 模板
， listview中数据的获取
， listview布局设置
， 移动listview数据
， listview控件
， listview数据下载
， listview上拉加载
， listview分组
上拉加载ListView
expandlistview详解、android listview详解、listview用法详解、listview详解、listview使用详解，以便于您获取更多的相关知识。