页面导航是在开发应用的过程中使用频率较高的技术，其中比较常用的导航方式有多页导航和页内导航，采用多页导航方式的应用程序包含一系列的页面，在一个页面中加入另一个页面的链接地址后，单击链接将跳转到指定页面，从而实现页面之间的导航。而页内导航方式是在一个页面内根据需要加载其他页面，使用页内导航方式的应用程序仍然包含一系列的页面，不同的是，这些页面是顺序被加载到一个选定的页面区域中，而不是从一个页面跳转到另一个页面。在传统的网站开发中，通常使用多页导航的方式，在开发基于JavaScript的Windows应用商店应用时多采用默认的页内导航方式。在本节内容中，将首先讲解两种加载页面的方法，然后介绍如何实现页内导航。
19.2.1 页面加载
使用HtmlControl控件加载页面的方式如下：首先在一个HTML页面中添加一个HtmlControl控件，然后将HtmlControl控件的uri属性设置为被加载的地址。代码片段如下所示：
<div data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/contentpage.html'}"></div>
首先在ContentPage.html文件中布局应用的前台界面，打开ContentPage.html文件，可以发现body元素内已经默认包含了导航按钮、页面标题等内容，删除body元素内的代码然后添加一个按钮和一个画布，画布作为一个图形容器，当点击按钮时将在画布上绘制一个图形。代码片段如下所示：
<button id="ShowRectangleButton">显示矩形</button><br /> <br />
<canvas id="ContentCanvas"></canvas>
var contentPageControl = WinJS.UI.Pages.define("/ContentPage/ContentPage.html", {
ready: function (element, options) {
var showRectangleButton = document.getElementById("ShowRectangleButton");
showRectangleButton.addEventListener("click", ShowRectangleButton_Click);
下面实现ShowRectangleButton_Click函数，用于在ContentPage.html页面的画布中绘制一个矩形，代码片段如下所示：
function ShowRectangleButton_Click(eventInfo) {
var contentCanvas = document.getElementById('ContentCanvas');
var canvasContext = contentCanvas.getContext('2d');
canvasContext.fillStyle = '#FF0000';
canvasContext.fillRect(0, 0, 90, 100);
WinJS.Namespace.define("ContentPage", {
pageControlName: contentPageControl
<script src="/ContentPage/ContentPage.js"></script>
<div data-win-control="ContentPage.pageControlName"}"></div>
在上面的代码中，通过将div元素的data-win-control属性设置为命名空间ContentPage下的pageControlName成员，添加一个PageControl控件。
启动调试，应用程序界面上显示"default页面"文本和"显示矩形"按钮，单击"显示矩形"按钮，将在按钮的下方显示一个红色的矩形，如图19-7所示：
