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 文件夹的内容。您会发现有三个文件：

lgroupedItemsPage.html，代表开始页面

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

lgroupDetailPage.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 并停止调试。