win8 ListView基础

在win8应用中,ListView是非常常见的一种组织数据的容器,本文简单地介绍LisiView的一些基本使用.

首先是在显示ListView的html中加入ListView的标签

<div id="basicListView" 
    data-win-control="WinJS.UI.ListView">  
</div>

接下来是需要定义listView中的数据,一般是另外定义一个js文件进行管理.新建一个dataExample的js文件,然后在该文件中,实现一个匿名并且是strict mode 的function.

(function () {
    "use strict";

})();

接下来实现数据的定义,并生成可以供listView使用的类型

(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); 

})();

由于我们是用匿名的function,所以在function中的所有成员都是私有的,为了让html文件可以使用这个数据,我们需要让dataList是可访问的,可以使用WinJS.Namespace.define方法来构建一个名空间,并将dataList作为他的成员.

var publicMembers =
        {
            itemList: dataList 
        };
    WinJS.Namespace.define("DataExample", publicMembers); 

定义好数据之后,接下来就是在html中进行绑定了

首先需要先在html中声明引用这个js文件

<script src="/js/dataExample.js"></script>

下面便是在ListView中绑定数据源

div id="basicListView"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ itemDataSource : DataExample.itemList.dataSource }">
</div>  

itemDataSource需要的参数是一个 IListDataSource对象.我们的DataList并不是这样一个对象,不过DataList有一个dataSource属性,就是用来返回一个IListDataSource对象的.

到这里 就已经把数据绑定好了 现在运行程序的话  不会像我们预想中的那样 显示图片和文字 而是显示下面这样的东西

    { 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" }

显示的就是这些数据,之所以会这样的原因,是因为我们并没有定义ListView中的item应该要这么样来展示数据,下面就来定义Item.

定义Item使用到Template,也就是每个item都是以这个模版作为显示的,和ios中的cell一样的.

<div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template">
        <div>

        </div>
    </div>

模版的声明就是这样子的其中在内部加一个div是因为WinJS.Binding.Template必须要有一个单个的根元素.

下面是完整定义item Template 显示的内容要与DataSource中的数据对应,在DataSource中.有三个部分要显示,分别是title text img,所以item中也需要有这三个,并且和DataSource中的每一个数据名相对应

    <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>  

其中也定义了一些style,先放在这里,后面再使用class 统一放到css中

这样就定义好item模版了,下面要做的就是在ListView中使用这个模版

    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource,
                            itemTemplate: select('#mediumListIconTextTemplate'),
                            layout: {type: WinJS.UI.GridLayout}}">
    </div>

现在运行 就可以看到图片还有文字了

下面进行一些样式的简单定制,首先是为要定制样式的标签加上class 修改后如下

<body>
    <div id="mediumListIconTextTemplate" data-win-control="WinJS.Binding.Template" style="display: none">
        <div class="mediumListIconTextItem">
            <img src="#" class="mediumListIconTextItem-Image"
                 data-win-bind="alt: title; src: picture"/>
            <div class="mediumListIconTextItem-Detail">
                <h4 data-win-bind="innerText: title"></h4>

                <h6 data-win-bind="innerText: text"></h6>
            </div>
        </div>
    </div>

    <div id="basicListView" 
        data-win-control="WinJS.UI.ListView" 
        data-win-options="{ itemDataSource : DataExample.itemList.dataSource,
                            itemTemplate: select('#mediumListIconTextTemplate'),
                            layout: {type: WinJS.UI.GridLayout}}">
    </div>
</body>

下面是css文件中对item和ListView的一些定制

#basicListView.win-listview {
    height: 650px;
    width: 600px;
    border: 2px solid gray;
}

    #basicListView.win-listview .win-container {
        margin: 10px;
    }

        #basicListView.win-listview .win-container:hover {
            background-color: red;
            border-color: red;
        }
.mediumListIconTextItem {
    width: 282px;
    height: 70px;
    padding: 5px;
    overflow: hidden;
    display: -ms-grid;
}

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

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

最后显示的效果就是这样的