注：本系列学习帖子我在DevDiv.com移动开发社区原创首发
转载请注明出处：BeyondVincent(破船)@DevDiv.com
如果你有什么问题也可以前往交流
下面是首发地址：
今天我们展开Windows 8 Metro App开发之HelloWorld。本次主题会包含以下内容：
1、Windows 8 Metro App开发环境的搭建
2、HelloWorld创建与相关介绍
3、运行和调试
4、应用程序包的创建和安装（本地，不通过商店）
更多内容请查看下面的帖子
Windows
8 Metro App开发Step by Step
1、Windows 8 Metro App开发环境的搭建
在这里安装Windows 8 Release Preview操作系统和Windows Visual Studio 2012 RC就可以进行Metro App开发了。
操作系统安装[我安装的是32位的]
Windows 8 Release Preview（发行预览版，Windows 8系列的最后一个测试版本）：
产品密钥：TK8TP-9JN6P-7X7WW-RFFTV-B7QPF
开发工具(只需要安装Windows Visual Studio 2012 RC就可以进行metro app开发)[我安装的是ULtimate旗舰版]
2、HelloWorld创建与相关介绍
为了更加形象直观，下面我以图文的形式进行介绍
a、从开始画面启动VS2012
b、在起始页选项卡中，选择新建项目来创建HelloWorld，也可以从文件菜单->新建->项目来创建。
如下图，模版选择Visual C# Windows Metro style，右边选择Blank App(XAML)，然后在下面输入项目名称，路径和解决方案名称，最后点击确定，就创建好了一个最简单的Metro App。
c、创建好的HelloWorld工程如下图，熟悉VS的开发者可能对此画面不陌生，左边主要是代码编辑，右边三项目文件目录组织。当然，这些界面也是可以配置的。
d、右侧，我们可以看到工程的文件组织，如下图所示，下面我会对其中的重要文件进行介绍。
从上图中，可以看到有如下文件和目录：
1)Properties
2)引用
3)Assets
4)Common
5)App.xaml
6)MainPage.xaml
7)Package.appemanifest
1)Properties目录下的文件Assembly.cs主要存放有关程序集的常规信息和程序的版本信息
using System.Reflection;
using System.Runtime.CompilerServices;
using System.Runtime.InteropServices;
// 有关程序集的常规信息通过下列特性集
// 控制。更改这些特性值可修改
// 与程序集关联的信息。
[assembly: AssemblyTitle("DevDiv_HelloWorld")]
[assembly: AssemblyDescription("")]
[assembly: AssemblyConfiguration("")]
[assembly: AssemblyCompany("")]
[assembly: AssemblyProduct("DevDiv_HelloWorld")]
[assembly: AssemblyCopyright("Copyright ©2012")]
[assembly: AssemblyTrademark("")]
[assembly: AssemblyCulture("")]
// 程序集的版本信息由下面四个值组成:
//
// 主版本
// 次版本
// 生成号
// 修订号
//
// 可以指定所有这些值，也可以使用“生成号”和“修订号”的默认值，
// 方法是按如下所示使用“*”:
// [assembly: AssemblyVersion("1.0.*")]
[assembly: AssemblyVersion("1.0.0.0")]
[assembly: AssemblyFileVersion("1.0.0.0")]
[assembly: ComVisible(false)]
2)引用，从上面的图中，我们看到默认有两个引用：.NET for Metro style apps和Windows
Metro 应用使用简装版的.NET框架库。我们可以双击Reference查看看到他们对应的命名空间。
3)Assets，该目录下主要存放程序使用到的Logo，启动画面等信息。
4)Common里面有一个文件：
StandardStyles.xaml，它是一个资源文件，它与App.xaml文件进行关联的。其中包含了一些Style和Template，通过这个文件，我们创建应用会变得更容易。下面我分别摘取了一个Style和Template。<Style x:Key="BasicRichTextStyle" TargetType="RichTextBlock">
<Setter Property="Foreground" Value="{StaticResource ApplicationForegroundThemeBrush}"/>
<Setter Property="FontSize" Value="{StaticResource ControlContentThemeFontSize}"/>
<Setter Property="FontFamily" Value="{StaticResource ContentControlThemeFontFamily}"/>
<Setter Property="TextTrimming" Value="WordEllipsis"/>
<Setter Property="TextWrapping" Value="Wrap"/>
<Setter Property="Typography.StylisticSet20" Value="True"/>
<Setter Property="Typography.DiscretionaryLigatures" Value="True"/>
<Setter Property="Typography.CaseSensitiveForms" Value="True"/>
</Style>
<DataTemplate x:Key="Standard130ItemTemplate">
<Grid Height="110" Margin="6">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="110" Height="110">
<Image Source="{Binding Image}" Stretch="UniformToFill"/>
</Border>
<StackPanel Grid.Column="1" VerticalAlignment="Top" Margin="10,0,0,0">
<TextBlock Text="{Binding Title}" Style="{StaticResource TitleTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Subtitle}" Style="{StaticResource CaptionTextStyle}" TextWrapping="NoWrap"/>
<TextBlock Text="{Binding Description}" Style="{StaticResource BodyTextStyle}" MaxHeight="60"/>
</StackPanel>
</Grid>
</DataTemplate>
5)App.axmlApp.xaml 文件和它对应的代码文件是 App.xaml.cs，用于启动 Metro App。这个 XAML 文件的主要用途是与 Common 文件夹中的StandardStyles.xaml进行关联。如下代码所示<Application
x:Class="DevDiv_HelloWorld.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DevDiv_HelloWorld">
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<!--
Styles that define common aspects of the platform look and feel
Required by Visual Studio project and item templates
-->
<ResourceDictionary Source="Common/StandardStyles.xaml"/>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
</Application>
下面我们来看看 App.xaml.cs文件中的代码方便阅读，我们其中的注视去掉了。using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace DevDiv_HelloWorld
{
sealed partial class App : Application
{
public App()
{
this.InitializeComponent();
this.Suspending += OnSuspending;
}
protected override void OnLaunched(LaunchActivatedEventArgs args)
{
if (args.PreviousExecutionState == ApplicationExecutionState.Running)
{
Window.Current.Activate();
return;
}
if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)
{
}
var rootFrame = new Frame();
if (!rootFrame.Navigate(typeof(MainPage)))
{
throw new Exception("Failed to create initial page");
}
Window.Current.Content = rootFrame;
Window.Current.Activate();
}
private void OnSuspending(object sender, SuspendingEventArgs e)
{
var deferral = e.SuspendingOperation.GetDeferral();
deferral.Complete();
}
}
}
在上面的代码中，有三个方法public App() 该方法用于初始化一个应用程序，我们所写的代码，这里是首先被执行的，逻辑上等价于main() 或WinMain()。protected override void OnLaunched(LaunchActivatedEventArgs args) 当用户正常情况下启动完毕了程序，该方法会被调用。当然，也有其它情况下，该方法会被调用，例如：当启动程序以打开指定的文件，或者显示搜索结果，等等。private void OnSuspending(object sender, SuspendingEventArgs e) 当程序被中止时，该方法会被调用。应用程序的生命周期主要就是通过App.xaml.cs文件进行处理的，关于Metro App的生命周期，在后面的学习中，我会进行介绍。现在你只需要知道OnLanunched方法是在程序启动的时候被调用的。在该方法中，会创建并加载MainPage的一个实例，作为应用程序的主入口。
6)MainPage.xaml
下面我们就来看看MainPage.xaml。
我们在刚开始创建Blank App时，VS就会为我们创建一个空白的页面，也就是MainPage.xaml。
如下代码：
<Page
x:Class="DevDiv_HelloWorld.MainPage"
IsTabStop="false"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:DevDiv_HelloWorld"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
</Grid>
</Page>
可以看出，其中包含一个Grid控件。而MainPage.xaml.cs的代码则如下[同样，为了代码简洁，我把注视去掉了：
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Windows.Foundation;
using Windows.Foundation.Collections;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Controls.Primitives;
using Windows.UI.Xaml.Data;
using Windows.UI.Xaml.Input;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Navigation;
namespace DevDiv_HelloWorld
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
protected override void OnNavigatedTo(NavigationEventArgs e)
{
}
}
}
其中MainPage是初始化函数。OnNavigatedTo方法则是当该页面显示在某个位置的时候，会被调用。
7)Package.appemanifest
最后我们来看看文件Package.appemanifest 。
这是一个提供Metro App信息给Windows runtime的XML文件。信息主要包括：程序显示名称、入口点、支持的旋转、徽标等。
3、运行和调试
看下面这个图，我在MainPage页面分别添加了Button,Image和TextBox
下面我给点击按钮添加单击事件，如下图所示，选选中button，然后点击右边的事件按钮，在click中输入ClickButton,然后回车。
就可以在MainPage.xaml.cs中看到对应的函数了。如下图所示。
下面我们就可以运行并调试代码了,首先，我们在ClickButton处打上断点，稍后运行程序，点击button，就会运行到该方法里面来。在运行程序之前，我先介绍一下Metro App的调试方法：如下图所示，程序调试有三种方法：模拟器、本地计算机和远程计算机。其中远程计算机一般就是连接到本机的win8平半电脑了。
在这里，我选择模拟器（Simulator）进行调试程序。点击上图中绿色的三角，或者按F5就可以启动程序进行调试了。程序在模拟器中的运行画面如下所示。当我们点击button的时候，也会运行到我们之前设置好的断点出。
至此，HelloWorld程序的介绍和运行调试就介绍完毕了。代码文件在此，欢迎下载：
DevDiv_HelloWorld.rar
4、应用程序包的创建和安装（本地，不通过商店）
有时候我们在开发Metro App过程中，或开发完毕，我们的用户想要立即体验一下，这时，我们可以不通过微软的商店进行发布，而是通过本地安装就可以。
这里，我就跟大家分享一下，如何创建应用程序包和在本地安装程序。
a）创建应用程序包
右键单击项目工程文件，如下图所示，选择应用商店->创建应用程序包
然后会出现如下画面，询问是否创建一个上传至商店的包，这里选择No，我们创建本地使用的包。
注意，下面有文字提示，大概意思是：安装的电脑需要有开发者许可证。
然后点击下一步，会让你选择包的路径，版本信息，还有就是相关的配置信息，根据需求选择即可。如下图所示
最后我们点击创建,过一会，会弹出如下提示框，表示创建完毕
我们打开创建的路径,，会看到如下文件，因为在创建的时候，配置信息我选择了四种包类型，所以这里生成了对应的四种包。
至此，应用程序包就生成好了，附件在这里，大家可以下载了去尝试安装：AppPackages.rar
b）程序包的本地安装
下面我们介绍如何在本地进行程序的安装
如下图，由于我在x86机器上安装，所以我选择DevDiv_HelloWorld_1.0.0.2_x86_Debug_Test该文件，然后右键单击Add-AppDevPackage.ps1，选择使用PowerShell运行
看到如下画面：提示需要管理员权限，
输入Enter键，并输入管理员账号密码，来到如下画面,提示是否继续
上面这个画面中，输入Y，并Enter,稍等片刻，就会提示安装成功，如下画面。
我们可以在开始画面中看到刚刚安装的程序，如下图
至此，应用程序包的创建和本地安装就完成了。
谢谢大家的观看。让我们期待下一次的学习吧。
分享到：
相关推荐
《Windows 8 Metro App开发》是Windows 8 Metro App开发的帮助文档
Windows 8 Metro App设计指导
Windows8 Metro实例
Windows8 Modern（Metro）界面程序管理工具。集离线部署、卸载、清理和破解于一身，并可对metro界面程序设置代理访问Internet，功能超强！
Windows 8 Developer Preview Metro style app samples.zip
自己学习使用，简单的Windows8下的HelloWorld项目源码
Windows8 Metro HubTile 控件 详细sample
windows8 metro style
Windows8 Metro
用来修改Windows 8 Metro背景的软件.
使用C# & WPF呼叫Win8 Metro APP,sample code
全局鼠标钩子 可以在win8 Metro app 以上显示，如何能够显示在Metro App以上，请参照tools中的Windows 8 TopMost window.docx，均在x86模式下验证过. vs2015/vs2013打开
js代码 [removed][removed] [removed] $(document).ready(function () { ...这是一款基于jQuery CSS3实现的仿windows8 Metro风格界面布局效果，Win8 Metro系统风格面板点击全屏打开展示内容。
windows8应用开发 c# 超详细,超经典
黑色个性仿Windows 8 Metro界面网站模板_黑色 个性 窄 相册 摄影 简历 案例 metro界面 windows8 黑色个性仿Windows 8 Metro界面网站模板_黑色 个性 窄 相册 摄影 简历 案例 metro界面 windows8
大量windows8 metro风格图标，可以用在你的应用中，也可以用于效果图渲染。
VB.NET制作Windows8 MetroUI Form 风格界面！供大家参考！
windows8 Metro-UI-CSS-master 完整的WINDWOS8风格界面样式
Win8 Metro Style App Automation Implement Source code. 封装成了DLL,可以根据需要来做Metro App 的automation case。