ListView 是一个十分常用的控件。看看它在win8上如何添加:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx
简单的demo:新建一个空白项目,在default.html中添加:
<div id="basicListView"
data-win-control="WinJS.UI.ListView">
</div>
listView要有相应的list数据和其绑定。所以我们要建一个data.js
在data.js中 创建一个匿名函数并打开严格模式,即:
(function () {
"use strict";
})();
然后加数据:
var dataArray = [
{ title: "Basic banana", text: "Low-fat frozen yogurt", picture: "images/60banana.png" },
{ title: "Banana blast", text: "Ice cream", picture: "images/60banana.png" },
{ title: "Brilliant banana", text: "Frozen custard", picture: "images/60banana.png" },
{ title: "Orange surprise", text: "Sherbet", picture: "images/60orange.png" },
{ title: "Original orange", text: "Sherbet", picture: "images/60orange.png" },
{ title: "Vanilla", text: "Ice cream", picture: "images/60vanilla.png" },
{ title: "Very vanilla", text: "Frozen custard", picture: "images/60vanilla.png" },
{ title: "Marvelous mint", text: "Gelato", picture: "images/60mint.png" },
{ title: "Succulent strawberry", text: "Sorbet", picture: "images/60strawberry.png" }
];
var dataList = new WinJS.Binding.List(dataArray);
// Create a namespace to make the data publicly
// accessible.
var publicMembers =
{
itemList: dataList
};
WinJS.Namespace.define("DataExample", publicMembers);
稍微解释上面代码:创建数组dataArray,再创建List对象,通过声明命名空间并添加 List 作为其公共成员来公开 List(因为数据是在我们的匿名函数中创建的,所以要使用WinJS.Namespace.define 使其公开可被使用)。
然后就可以对html中的控件进行绑定了
<div id="basicListView"
data-win-control="WinJS.UI.ListView"
data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>
记住,要记得添加引用: <script src="/js/data.js"></script> 若这个时候运行,程序是这样子的:
因为我们还没有对ListView添加模板。 在listView之前定义 item template
<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template"> <div style="width: 150px; height: 100px;"> <!-- Displays the "picture" field. --> <img src="#" style="width: 60px; height: 60px;" data-win-bind="alt: title; src: picture" /> <div> <!-- Displays the "title" field. --> <h4 data-win-bind="innerText: title"></h4> <!-- Displays the "text" field. --> <h6 data-win-bind="innerText: text"></h6> </div> </div> </div>
使用模板:使用 select 语法将 ListView 的 itemTemplate 属性设置为你的模板<div id="basicListView" data-win-control ="WinJS.UI.ListView" data-win-options ="{ itemDataSource : DataExample.itemList.dataSource , itemTemplate:select('#mediumListIconTextTemplate')}"> </div>
现在运行,就是这样啦:
还可以在default.css中通过 #basicListView.win-listview #basicListView.win-listview .win-container #basicListView.win-listview .win-container:hover
设置样式:
.win-listview { height: 500px; width: 500px; border: 2px solid gray; } #basicListView.win-listview { height: 500px; width: 500px; border: 2px solid gray; } #basicListView.win-listview .win-container { margin: 10px; }
这里就不说了。看看文档吧。
本文来自yuge的博客,原文地址:http://www.cnblogs.com/mybkn/archive/2012/09/22/2698428.html