1：Win8 Metro应用开发的第一次学习1：创建一个 Metro 项目——Win8Y团队手把手教您Win8 Metro应用开发系列

Win8 Metro应用开发的第一次学习1：创建一个
Metro 项目

《Win8 Metro应用开发的第一次学习》旨在介绍 Windows 8
Metro 风格的应用的一系列《Win8Y团队手把手教您Win8 Metro应用开发系列教程》中的第一个。在本《Win8Y团队手把手教您Win8
Metro应用开发系列教程》中，您将使用 HTML
和 JavaScript
创建一个名为 Win8y Metro Study
的菜谱应用程序。在随后的《Win8Y团队手把手教您Win8 Metro应用开发系列教程》中，您将利用在这里开始的工作来改进
Metro 应用，以此了解编写引人注目和可在应用商店中销售的 Metro
应用所需的关键技能。

1.创建一个 Metro 项目

开始学习之前,win8Y说下开发环境:Windows 8 cp/rp版本+
Visual Studio11/2012.所提示的开发环境/软件可以在以下地址找到下载.



Windows8 rp下载:http://www.zglr8.com/1.htm



Visual studio 2012 RC简体中文旗舰版本iso光盘镜像下载:http://www.zglr8.com/visual-studio-2012-rc-chinese-simplified-flagship-releases-iso-cd-image-download.htm



注意：请在开始本《Win8Y团队手把手教您Win8 Metro应用开发系列教程》前，进行此步骤，否则《Win8Y团队手把手教您Win8
Metro应用开发系列教程》不能正常运行

先进入开始屏幕打开Visual Studio11





新建一个项目



按照下图进行选择



在local machine处点小三角，选择simulator，然后单击它，或按f5



出现此屏幕后开始试验



任务1 –
创建项目

第一步是创建一个新项目来容纳构成

Win8y Metro Study 应用的代码和资源，然后查看Visual Studio
在该项目中提供了什么内容。

1.

启动

Visual Studio，使用“File – New Project“命令创建一个新的

JavaScript 项目并将其命名为Win8YMetroStudy。应确保从JavaScript
模板列表中选择“Windows Metro Style”，如图

1 所示。




图

1

创建Win8YMetroStudy
项目

2.

从

Debug菜单选择Start Debugging（或按

F5），在调试器中启动应用。应用将启动，您将看到如图

2 所示的屏幕。这是应用的主页，也称为开始页面。





图

2

Win8y Metro Study
开始页面

3.

用一些时间尝试操作该应用。对于初学者来说，可使用鼠标（或手指，如果您使用的是触摸屏）水平滚动屏幕。

注意：ListView
控件提供水平滚动。如果您想知道它是如何声明的，请在该项目的html
文件夹中打开

groupedItemsPage.html，在页面底部附近寻找具有

data-win-control=”WinJS.UI.ListView” 属性的DIV。如果没有这个属性，它是一个普通

DIV。然而有了这个属性，它就是一个支持数据绑定和模板化的ListView
控件。WinJS扫描

DOM，查看data-win-control
属性，并将

DIV 转换为

ListView。该转换发生于对

default.js 中的WinJS.UI.processAll
的调用中。该调用从app.onactivated 事件处理程序发起，并且在应用每次启动时执行。

4.

查看如果您触摸或点击ListView
项目之一会发生什么。例如，点击标签为“Item Title:1″的项目可显示如图

3 所示的屏幕。这是“item-detail（项目详细信息）“页面。

注意：Windows8
通常被称为“触控优先“操作系统，但它对于鼠标和触笔等传统输入设备也有着很好的支持。因此，当文中指示您“触摸“或“点击“屏幕上的项目时，您没有触摸屏也可以完成该操作。只需点击鼠标即可！





图

3

项目详细信息页面

5.

通过点击按屏幕左上角的后退按钮（圆形左箭头），返回到应用程序的开始页面。

6.

点击开始页面左上角“Win8YMetroStudy”下的“Group Title: 1″来显示组详细信息页（图

4）。





图

4

组详细信息页面

6.

切换回

Visual Studio（如果您使用的是触摸屏，做到这一点的简单方式是从屏幕左边缘开始从左到右滑动；如果您喜欢使用键盘，按下Windows和

D组合键，也表示为Win-D），然后从

Debug 菜单中选择“Stop Debugging”停止运行应用程序。

任务2 –
熟悉项目

很显然，当

Visual Studio 生成该项目时，它无偿地给了您很多内容。具体来说，它给您提供了几个

HTML 页以及

CSS 和

JavaScript，还有用于在页之间和示例数据资源之间导航的逻辑和用户界面。为了实现Win8y Metro Study，我们将利用

Visual Studio 生成的内容。但您首先要花点时间熟悉项目结构以及

Visual Studio 创建的资产。

1.

在

Solution Explorer 窗口中，检查该项目

html 文件夹的内容。您会发现有三个文件：

l
groupedItemsPage.html，代表开始页面

l
itemDetailPage.html，代表项目详细信息页面

l
groupDetailPage.html，代表组详细信息页面

2.

除了html 文件夹中的三个页面，该项目包含一个名为

default.html 的页面，它托管其他页面。打开

default.html 并查看

BODY 元素中的

DIV。它定义了显示其他页面的内容区域。

注意：BODY元素包含第二个

DIV（已注释掉）。该

DIV 的

ID是“appbar”，表示一个应用程序栏，其中包含与用户可以在应用题程序中执行的常见命令对应的按钮或“命令“。在随后的《Win8Y团队手把手教您Win8
Metro应用开发系列教程》中，您将撤消该

DIV 的注释并对其添加命令。

3.

检查项目的

js 文件夹的内容。下面是此处所存在文件的概述：

·

data.js：其中包含示例数据以及将数据绑定到

ListView 控件的代码

·

default.js：其中包含default.html
和代码隐藏

·

groupDetailPage.js：其中包含groupDetailPage.html
的代码隐藏

·

groupedItemsPage.js：其中包含groupedItemsPage.html
的代码隐藏

·

itemDetailPage.js：其中包含itemDetailPage.html
的代码隐藏

·

navigator.js：其中包含在default.html
中声明的

PageControlNavigatorcontrol 的实现，并负责当用户在应用中导航时加载其他页面。

4.

查看项目的

css文件夹。您看到了什么？css
文件夹中的文件和应用程序中的页之间是否存在相关性？

5.

查看项目的image文件夹，在这里您会找到用于为应用程序添加品牌标识的图像资产。

任务3 –
自定义开始页面

目前项目名称Win8YMetroStudy
出现在开始页面的顶部。让我们将其修改为“Win8y Metro Study”。

1.

在

Visual Studio 中打开groupedItemsPage.html。

2.

找到其类为pagetitle的SPAN
元素，将“Win8YMetroStudy”更改为“Win8YMetroStudy”，如下所示：

HTML

<span class=”pagetitle”>Win8y Metro Study</span>

3.

按

F5 在调试器中启动应用程序，然后确认开始页面顶部的标题文本是否已更改（图

5）。





图

5

修改后的开始页面

4.

返回到

Visual Studio，使用Stop Debugging
命令关闭该应用。

任务4 –
自定义品牌标识

如果您现在立即转到

Metro 开始屏幕，会看到有一个Win8YMetroStudy
磁贴。该磁贴是应用的主磁贴。它通常在安装应用时创建，但在我们的例子中，正好是从

Visual Studio 第一次启动应用时创建的。磁贴上的图像来自图像文件夹中的

logo.png。在该任务中，您需要将

VisualStudio 生成的徽标替换为更适合电子菜谱的徽标。届时您将更换图像文件夹中的其他

PNG 格式文件来为应用添加具有唯一性的品牌标识，最后修改应用清单。

1.

在

Metro 开始屏幕上，右键单击Win8YMetroStudy
磁贴（或用手指将其向下拖动半英寸左右再放手），然后选择“Uninstall”卸载应用并删除磁贴。

2.

回到

Visual Studio 中，右键单击

images 文件夹。然后使用“Add – Existing Item“命令，从《Win8Y团队手把手教您Win8
Metro应用开发系列教程》原始材料的

images 文件夹导入logo.png、smalllogo.png、splashscreen.png和

storelogo.png。当出现提示时，允许这些文件覆盖现有的具有相同名称的文件。

3.

在

Solution Explorer 中，双击

package.appxmanifest 来打开应用清单。

注意：应用清单包含与

Metro 风格的应用有关的元数据，并嵌入到您构建的每个应用中。在运行时，该清单为Windows 8
提供所需的有关应用的一切信息，如应用名称、发布人以及该应用要求什么“功能“，包括对网络摄像机、麦克风、Internet和文件系统各部分（具体来说是用户的文档、音乐和视频库）的访问。

4.

将应用的显示名称更改为“Win8y Metro Study”，将其描述更改为“Win8y Metro Study application”，如图

6 所示。





图

6

在清单中更改显示名称和描述

5.

按

F5 启动应用程序。

6.

在应用启动时观看。闪屏（应用加载时短暂显示的屏幕）是否与以前不同？

7.

转到Metro 开始屏幕，确认它是否包含如下所示的磁贴。





图7

新的应用磁贴

8.

返回

Visual Studio 并停止调试。