win8: ListView

简介:

ListView 是一个十分常用的控件。看看它在win8上如何添加:

Check: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 : data.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 : data.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; 
}
复制代码

 

这里就不说了。看看文档吧。

 

 

本文转自老Zhan博客园博客,原文链接:http://www.cnblogs.com/mybkn/archive/2012/09/22/2698428.html,如需转载请自行联系原作者

相关文章
|
11月前
|
Android开发
Android 中SeekBar拖动条控件的基本用法
Android 中SeekBar拖动条控件的基本用法
131 0
Android 中SeekBar拖动条控件的基本用法
|
Android开发 容器
Android动态修改ToolBar的Menu菜单
Android动态修改ToolBar的Menu菜单 效果图 实现 实现很简单,就是一个具有3个Action的Menu,在我们滑动到不同状态的时候,把对应的Action隐藏了。
1759 0
|
Java Android开发
Android Studio 使用ViewPager + Fragment实现滑动菜单Tab效果 --简易版
描述:         之前有做过一个记账本APP,拿来练手的,做的很简单,是用Eclipse开发的;         最近想把这个APP重新完善一下,添加了一些新的功能,并选用Android Studio来开发;         APP已经完善了一部分,现在就想把已经做好的功能整理一下,记录下来。
2952 0
UWP ListView
ListViewItem项填充整个宽度最大化
863 0
|
Android开发 数据格式 XML

热门文章

最新文章