Windows8 dev - 学习使用ListView (一)

Windows8已经出了Release Preview,国内开始做win8中应用开发的也越来越多了。本文介绍一下Win8提供的API中有关ListView的使用。文中主要参考内容为MSDN上的文章及samples。

数据展示是大多数应用程序都会遇到的问题,比如GTALK等即时通讯程序,需要显示所有联系人信息,某些商户应用程序需要显示众多的商品信息,后台获取数据之后如何对数据进行排版显示是每个应用程序都会关系的话题。在Win8提供的Metro API中提供了ListView这样一个方便的控件。如何方便,使用一下就能体会到了。为了简单起见,我们使用JS+HTML5的开发平台。

1)新建工程
在Win8中打开VS,新建工程时选择javascript的任一模板都可以,为了自己多写点,可以选择比较简单的空模板或者navigation模板。

2)定义数据
数据定义,可以直接新建一个data.js,里面包含数据的定义。定义一个列表需要用到WinJS.Binding.List。我们使用JSON格式来定义,每条记录需要包含哪些内容自己可以随意决定,这也是JSON格式的方便支持。
var contacts = [{ name: "a", icon: "../images/people.png"},
{ name: "b", icon: "../images/people.png"},
{ name: "c", icon: "../images/people.png"},
{ name: "d", icon: "../images/people.png"},
......
];
var contactsList = new WinJS.Binding.List(contacts);

3)在HTML文件中简单列表,使用ListView,并设置数据源。使用方式很简单,定义一个div,设置其data-win-control属性为“WinJS.UI.ListView”,并设置对应的data-win-options属性值即可。data-win-options中可以去填充对应控件所需的属性值。 对于ListView,最重要的就是itemDataSource属性,它代表数据源,如果数据源都没有设置,那启动之后将是一片空白或者漆黑。 这里我们设置为刚刚创建的list。
这样一个简单的列表就创建好了,直接运行,我们可以看到类似下面的界面。
simple list show without template and CSS control

由于实际数据不同,可能会有一些差异,但大体类似,一个简单到有些丑陋的列表已经完成了,是不很简单方便的用法。

4)简单排版数据
现在我们想将其简单排版一下,做法也很简单,首先需要先定义一个供每个数据显示样式的模板,之后在data-win-options中将其赋给itemTemplate属性即可。
在HTML文件中新建一个div,将其data-win-control属性赋值为"WinJS.Binding.Template",即可声明其为一个数据显示模板,设置style="display: none"这样就不会出现多余的div。 可以通过data-win-bind控制哪些值需要显示,如何显示。

当然我们还要借助于CSS才可以将其真正排版。
在对于的CSS文件中,使用如下样式控制:
.contactlisttemplate
{
width: 300px;
height: 70px;
padding: 5px;
overflow: hidden;
display: -ms-grid;
}

img.contactlisttemplate_icon
{
width: 60px;
height: 60px;
margin: 5px;
-ms-grid-column: 1;
}

.contactlisttemplate_text
{
margin: 5px;
-ms-grid-column: 2;
}

以上是一些CSS的简单属性,其中-ms-grid -ms-grid-column等就可以控制到哪个元素显示在哪个行列中。

定义模板完毕,之后将itemTemplate属性赋值即可。

简单的修饰之后,我们便可以得到如下类似的界面。
after using template and CSS control

这样一个简单的listview使用就结束了,后面我们可以将继续对其进行完善,有关文中的简单示例代码,大部分都可以在官网的samples中找到原型,如果有需要,我也将会在这个小系列介绍完毕后上传。
有关编译器优化的更完整信息,请参阅优化通知