在项目中添加一个名为pages的文件夹，并在pages文件夹里面再添加一个名为mainPage的文件夹，接着在mainPage文件夹里添加一个"页面控制"项，命名为mainPage，添加完成之后会同时生成mainPage.html、mainPage.css和mainPage.js这三个文件。
这里将mainPage.html作为应用程序的主页面，打开mainPage.html文件，在body元素中添加一个div元素，并在元素内部添加一个h1元素和一个ListView控件，其中h1元素用于显示页面的标题，ListView控件用于按类别显示菜肴。然后再在body元素中添加两个Template控件，分别用于格式化显示类别名称和菜肴。在用于显示类别名称的Template控件中放置一个p元素，并在p元素内部指定onclick事件由函数WinJS.Navigation.navigate处理。这样当单击某个类别的名称时，就会导航到相应的分类页面。在用于格式化显示菜肴的Template控件中添加一个用来显示菜肴图片的img控件和一个用来显示菜肴名称的h3元素，相关代码如下所示：
<body>
<div class="fragment mainPage">
<header aria-label="Header content" role="banner">
<h1 class="titlearea win-type-ellipsis">
<!--定义页面标题-->
<span class="pagetitle">菜谱</span>
</h1>
</header>
<!--定义ListView控件-->
<div class="groupeditemslist" aria-label="List of groups" data-win-control="WinJS.UI.ListView" data-win-options="{selectionMode: ‘multi‘}"></div>
</div>
<!--用于显示类别名称的模板-->
<div class="headerTemplate" data-win-control="WinJS.Binding.Template">
<p class="group-title win-type-x-large" data-win-bind="textContent: title; groupKey: key" onclick="WinJS.Navigation.navigate(‘/pages/classDetail/classDetail.html‘, { groupKey: event.srcElement.groupKey })"></p>
</div>
<!--用于显示菜肴的模板-->
<div class="multisizebaseitemtemplate" data-win-control="WinJS.Binding.Template">
<img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
<div class="item-overlay">
<h3 class="item-title" data-win-bind="textContent: title"></h3>
</div>
</div>
</body>
为了控制应用程序整体的外观，在default.css文件中定义一些页面样式，相关代码如下所示：
/*页面的基本样式*/
#contenthost {
height: 100%;
width: 100%;
}
/* 定义包含header和section的布局*/
.fragment {
-ms-grid-columns: 1fr;
-ms-grid-rows: 128px 1fr;
display: -ms-grid;
height: 100%;
width: 100%;
}
/*设置页面头部的布局*/
.fragment header[role=banner] {
-ms-grid-columns: 120px 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
}
/* 进一步设置后退按钮的样式*/
.fragment header[role=banner] .win-backbutton {
margin-left: 39px;
margin-top: 59px;
}
.fragment header[role=banner] .titlearea {
-ms-grid-column: 2;
margin-top: 37px;
}
/* 进一步设置页面标题的样式*/
.fragment header[role=banner] .titlearea .pagetitle {
width: calc(100% - 20px);
}
/*设置页面中section元素的样式*/
.fragment section[role=main] {
-ms-grid-row: 2;
height: 100%;
width: 100%;
}