win8: ListView

heberoxx

　　ListView 是一个十分常用的控件。看看它在win8上如何添加：
　　Check：http://msdn.microsoft.com/en-us/library/windows/apps/hh465496.aspx

　　简单的demo：新建一个空白项目，在default.html中添加：



  

　　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中的控件进行绑定了





记住，要记得添加引用：  
若这个时候运行，程序是这样子的：


　　因为我们还没有对ListView添加模板。
　　在listView之前定义 item template



   










   
　　
　　使用模板：使用 select 语法将 ListView 的 itemTemplate 属性设置为你的模板



   

　　现在运行，就是这样啦：

　　
　　还可以在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;
}
　　
　　这里就不说了。看看文档吧。