Win10系列：WinJS库控件

在介绍了如何使用标准的HTML控件以及WinJS库中提供的新控件之后，下面来着重介绍WinJS库中几种常用的控件。

（1）ListView控件

在开发Windows应用商店应用时可以使用ListView控件以网格或列表的方式显示多条数据。ListView控件的常用属性有：

• groupDataSource属性，用来设置分组的数据源。
• groupHeaderTemplate属性，用来为分组的头部设置模板。
• itemDataSource属性，用来为组中的数据项设置数据源。
• itemTemplate属性，用来为组中的数据项设置模板。
• selectionMode属性，用来设置数据项的选择模式，属性值有"none"、"single"和"multi"。当该属性的值为"none"时表示不允许选择数据项；当值为"single"时表示只可以选择一个数据项；当值为"multi"时表示可以选择多个数据项。
• layout属性，用来设置ListView控件的布局，该属性的值是Object类型，属性值有"{type:WinJS.UI.GridLayout}"和"{ type:WinJS.UI.ListLayout}"。当该属性的值为"{type:WinJS.UI.GridLayout}"时，ListView控件会以网格形式显示数据；当值为"{ type:WinJS.UI.ListLayout}"时，ListView控件会以列表形式显示数据。

在应用程序中使用ListView控件来显示多条数据时，对ListView控件的不同操作会触发不同的事件，该控件的常用事件有：

• oniteminvoked事件，当单击数据项时会触发该事件。
• onkeyboardnavigating事件，使用键盘上的方向键改变选区内的焦点时会触发该事件。
• onselectionchanged事件，当选择发生改变时会触发该事件。

在介绍了ListView控件的常用属性和事件后，下面来看一下如何向页面中添加ListView控件，以及如何为ListView控件设置属性和注册事件处理函数。

可以通过在页面中定义一个div元素并将data-win-control属性设置为"WinJS.UI.ListView"来向页面中添加ListView控件，同时可以通过div元素的data-win-options属性设置ListView控件的属性。例如，要在一个页面中添加一个ListView控件并以网格形式显示数据，那么可以在这个页面的body元素内定义一个div元素，并将data-win-control属性设置为"WinJS.UI.ListView"，同时通过data-win-options属性设置ListView控件的layout属性值为"{type:WinJS.UI.GridLayout}"，相应的HTML代码片段如下所示：

<div id="listviewID" data-win-control="WinJS.UI.ListView" data-win-options="{layout: {type: WinJS.UI.GridLayout}}"></div>

添加了ListView控件之后，可以在后台使用addEventListener函数来为其注册相关事件的处理函数。例如为上面示例中的ListView控件注册oniteminvoked事件的处理函数InvokeItemHandler，相应的JavaScript代码片段如下所示：

var listview = document.getElementById("listviewID").winControl;

listview.addEventListener("iteminvoked", InvokeItemHandler);

function InvokeItemHandler() {

/* 在此处编写事件处理过程的代码 */

}

在上面的代码中，首先以"listviewID"作为参数调用document对象的getElementById函数并使用winControl属性获得id属性值为listviewID的元素对象，并赋值给变量listview。然后通过listview变量调用元素对象的addEventListener函数为oniteminvoked事件注册事件处理函数InvokeItemHandler，在InvokeItemHandler函数中编写处理这个事件的过程代码。

（2）HtmlControl控件

可以在一个页面中使用HtmlControl控件来显示另一个页面的内容。这个控件有一个uri属性，该属性的值为被显示页面的地址，通过赋予该属性不同的值，可在HtmlControl控件所在的位置加载不同的页面。与ListView控件类似，可以通过在一个页面的body元素中定义一个div元素并将data-win-control属性设置成"WinJS.UI.HtmlControl"来向这个页面中添加HtmlControl控件，同时可以通过div元素的data-win-options属性设置HtmlControl控件的属性。

例如，要在一个现有项目的default.html页面中显示项目根目录下的IncludedPage.html页面的内容，那么可以在default.html页面的body元素中定义一个div元素并将data-win-control属性设置成"WinJS.UI.HtmlControl"，同时通过div元素的data-win-options属性设置HtmlControl控件的uri属性值为IncludedPage.html页面的地址，相应的HTML代码片段如下所示：

<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/IncludedPage.html'}"></div>

（3）PageControl控件

PageControl控件是一种自定义控件，可以将一个页面的内容和逻辑功能定义成一个PageControl控件，然后通过在其他页面中添加这个PageControl控件来加载相应的页面内容，这样就方便了在多个页面中加载相同的页面内容。

可以使用WinJS.UI.Pages命名空间下的define函数来将一个页面定义成PageControl控件，该函数有uri和members两个参数，其中uri表示页面的地址，members是对这个页面中的成员进行的一些初始化操作，该函数执行完成后会返回一个PageControl类型的对象，语法格式如下所示：

var pageControlObject = WinJS.UI.Pages.define(uri, members);

定义了PageControl控件后，如果想要向一个页面中添加这个控件，可以在该页面的body元素中定义一个div元素并将data-win-control属性设置为define函数所返回的PageControl对象，同时还需要在这个页面的head元素中引用定义PageControl控件的Javscript文件。

（4）Menu控件

在开发应用程序时使用Menu控件可以创建命令菜单弹出窗口。Menu控件的常用属性有：

• alignment属性，用于设置命令项的对齐方式，属性值有"center"、"left"和"right"，默认值为"center"。
• commands属性，用于向菜单弹出窗口中添加命令。
• hidden属性，用于判断Menu控件是否隐藏。
• placement属性，用于设置菜单弹出窗口的默认位置，属性值有"auto"、"top"、"bottom"、"left"和"right"，默认值为"auto"。

当对Menu控件进行操作时，不同的操作会触发不同的事件，该控件的事件有：

• onafterhide事件，命令菜单弹出窗口被隐藏之后会触发该事件。
• onaftershow事件，命令菜单弹出窗口显示后会触发该事件。
• onbeforehide事件，命令菜单弹出窗口被隐藏之前会触发该事件。
• onbeforeshow事件，已被隐藏的命令菜单弹出窗口显示前会触发该事件。

  在介绍了Menu控件的常用属性和事件后，下面来看一下如何向页面中添加Menu控件，以及如何为Menu控件设置属性和注册事件处理函数。

通过在页面中定义一个div元素并将data-win-control属性设置为"WinJS.UI.Menu"可以向页面中添加Menu控件，但只能通过编写JavaScript代码的方式为Menu控件设置属性。例如，要向一个页面中添加一个Menu控件并设置命令项的对齐方式为左对齐，那么可以在这个页面的body元素内定义一个div元素并将div元素的data-win-control属性设置成"WinJS.UI. Menu"，为了能检索到这个div元素，设置它的id属性值为"menuID"。相应的HTML代码片段如下所示：

<div id="menuID" data-win-control="WinJS.UI.Menu"></div>

这样就向这个页面中添加了Menu控件，然后在后台编写JavaScript代码来设置这个Menu控件的alignment属性值为"left"，JavaScript代码片段如下所示：

var menuControl = document.getElementById("menuID").winControl;

menuControl.alignment = "left";

添加了Menu控件之后，除了能够后台设置控件的属性之外，还可以在后台使用addEventListener函数来为其注册相关事件的处理函数。例如，为上面示例中的Menu控件注册onafterhide事件的处理函数HideMenuHandler，相应的JavaScript代码片段如下所示：

var menuControl= document.getElementById("menuID").winControl;

menuControl.addEventListener("afterhide", HideMenuHandler);

function HideMenuHandler() {

/* 在此处编写事件处理过程的代码 */

}

在上面的代码中，首先以"menuID"作为参数调用document对象的getElementById函数并使用winControl属性获得id属性值为menuID的元素对象，并赋给变量menuControl。然后通过menuControl变量调用元素对象的addEventListener函数为onafterhide事件注册处理函数HideMenuHandler，在HideMenuHandler函数中编写处理这个事件的过程代码。