Windows 8 Metro 应用开发入门一：开发环境介绍

 

Windows 8 Metro 应用开发入门一：开发环境介绍

 

摘 要

Windows8已经发布，随之而来的基于WinRT的Metro应用也正向我们走来，正像它所宣传的：光滑、快、现代。看习惯了玻璃、立体风格的应用，或许Metro的简洁能给你留下不一样的体验。Visual Studio 2012为Metro应用提供了强有力的开发支持。磨刀不误砍柴工！这一章我们先来介绍一下开发环境的搭建及可能遇到的问题，最后再来一个简单的应用体验一下Metro的开发。

第1节 搭建开发环境

Windows8不但支持传统的桌面应用，并且推出一个专为触摸而设计的最新Metro风格应用，对于Metro应用必须要求在Visual Studio 2012下开发，随之一起发布的是.NET Framework 4.5。所以，为了开发及调试方便，我们推荐的开发环境是：Windows8 + Visual Studio 2012。

Metro支持三种开发模式：

如果你有Web前台开发功底，你可以选择HTML5+CSS3+JavaScript进行开发；

如果你熟悉Silverlight或WPF开发，可以选择XAML+C#/VB.NET/C++进行开发；

如果你比较关注渲染性能，当然可以选择C++和DirectX进行开发。

本入门系列会以XAML+C#为基于进行演示，当然在后文中也可能会进行其他另两个开发模型的演示。在安装Visual Studio 2012过程中，可以选择安装相应版本的Blend For Visual Studio为XAML提供可视化设计，不过我个人的习惯是在VS中手写XAML，毕竟VS中也提供了对XAML的智能感知，在调色或动画部分会借助Blend进行辅助工作。

我的测试开发环境是部署在虚拟机中，如果你还没有安装Windows8和Visual Studio 2012，可以去微软网站上下载相应的预览及试用版。至于安装，这里就不再演示了，提醒一下，在安装Windows8时，一定要创建一个新用户，另外还要提前注册一个Windows Live ID，现在已被更名为Microsoft 帐户。正确安装，启动后，可以看到如下两个分别是VS2012和Blend的界面，怎么样？有没有Metro的感觉？

 

 

 

 

 

第2节 创建项目

在新建项目中是以Windows应用商店表示Metro应用，选择Windows应用商店项目类型，默认是.NET Framework 4.5版本。

在首次创建Windows应用商店项目时候，VS会要求你先获取Windows8应用开发许可证，现在这个许可证可用期限是一个月，以后不知道会不会收费。

选择某一项目类型后，点击“确定”按钮，在创建过程中，会弹出如下询问：

 

 

很明显，义无反顾地选择“我同意”，接着是连接许可证服务器，然后是要求输入可用的Microsoft账户信息：

 

 

输入完了之后，点击“登录”，如果账户可用，正常情况下会提示获取许可证成功，如下：

 

 

我是2012年9月12日获取的，许可证到期日期是2012年10月12日。到此一系列的身份认证表示你已经得到创建Windows8 Metro应用的许可，点击“关闭”按钮，接着才是真正的创建项目。以后再创建Windows商店项目就不会再弹出这些获取许可证消息的窗口了，当然要看微软对许可证策略。如果你是以Administrator登录，还有麻烦，在VS中打开xaml文件设计器时可能会收到如下设计器异常：

 

 

明确指出了不能用内置管理员激活此应用，如果你是很固执地尝试调试程序，可能会收到以下异常：

 

 

所以，同志，请切换到其他系统账户吧，这就是在上一节中提到的，在安装Windows8时一定要创建一个新用户，以这个新用户登录Windows然后是进行Metro应用开发。

 

第3节 项目类型

在Windows8商店项目类型中有几个模板，如下：

 

 

创建任何一个模板的应用，都会默认创建几个必要的文件夹及目录，如下图是创建空白应用程序模板的项目：

 

 

Assets 文件夹，放置图片等资源文件，默认里面有四个与Windows商店应用程序相关的必须的图片，也可以将自己的资源文件放进去。

Common 文件夹，默认里面有一个样式文件StandardStyles.xaml，是Windows商店应用程序的基础样式，强烈建议不要修改它，因为它与一些控件有关联，如果有自己的样式，可以在这里新建一个自己的样式，然后在App.xaml 里做引用即可。

App.xaml/App.xaml.cs 熟悉Silverlight开发的都知道这个是应用程序的初始入点。App.xaml里仅仅有一个对标准样式的引用：

<ResourceDictionary Source="Common/StandardStyles.xaml"/>

App类与Silverlight里的App类相似，这里有一个重要的方法：

        protected override void OnLaunched(LaunchActivatedEventArgs args)         {             Frame rootFrame = Window.Current.Content as Frame;             if (rootFrame == null)             {                 rootFrame = new Frame();                 if (args.PreviousExecutionState == ApplicationExecutionState.Terminated)                 {                     //TODO: 从之前挂起的应用程序加载状态
                }                 Window.Current.Content = rootFrame;             }             if (rootFrame.Content == null)             {                 if (!rootFrame.Navigate(typeof(MainPage), args.Arguments))                 {                     throw new Exception("Failed to create initial page");                 }             }             Window.Current.Activate();         }

应用程序启动时会进入这个方法，然后导航到第一个主页面，Frame的Navigate方法很有意思，它只是接收一个目标页的类型，在其内部创建目标页的实例进而加载可视。这里还会涉及到程序挂起、恢复等，建议参考应用程序生命周期的相关资料。

AppXXX_TemporaryKey.pfx 应用程序签名证书

Package.appxmanifest 应用程序配置相关，比如Logo、应用程序名等，如果你的程序将来要提交到Windows商店，可得好好配置一下这里面的东西，在VS中可以双击打开它进行可视化编辑，也可以用记事本打开它进行编辑，其实它就是一个XML文档。

以上是项目的基础配置，对于Windows商店项目有几个模板可供选择。

（1） 空白应用程序（XAML） 创建没有预定义的控件或布局的Windows应用商店应用程序的单页项目，该模板会创建一个空的主页面MainPage.xaml，如下：

<Page     x:Class="App1.MainPage"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:local="using:App1"     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里放置总局及控件。这一模板是最基础的模板，我们可以根据需要自定义各种各样的页面。

（2） 网络应用程序（XAML）创建在以网格形式排列的分组项之间导航的Windows商店应用程序的三页项目，专用页将显示组合项的详细信息。如下图分别对应：GroupedItemsPage，GroupDetailPage和ItemDetailPage页，这些页都已经有相应的总局元素。

 

 

基于组、项、详细的导航可以加快我们的开发速度，当然如果这些页达不到我们项目的要求，也可以自定义其他页面布局。此模板的项目会在Common文件夹下创建几个支持导航和消息通知等类，并且在DataModel文件夹下创建一个示例数据源SampleDataSource。

（3） 拆分布局应用程序（XAML）在已分组的项之间导航的Windows商店应用程序的两页项目，如下图分别表示组页ItemsPage，和项及选择列表项页SplitPage：

 

 

 

 

如果你的应用程序有类似主-从（包含列表项）展现应用，这个模板非常适合。

（4） 类库项目（Windows应用商店应用程序）这个基于Metro应用的托管项目，这个项目大家都很熟悉了，里面通常就是放一些Class。

（5） 还有两个Windows运行时组件和单元测试项目模板就不再介绍了，有需要可以参考相关资料。

在每个项目中可以添加对应的项：空白页BlankPage、基本页BasicPage、拆分页SplitPage、项页ItemsPage、项详细信息页ItemDetailPage、分组项页GroupedItemPage、组详细信息页GroupDetailPage、资源字典Dictionary、模板化控制CustomControl、用户控件MyUserControl、文件打开选取器协定FileOpenPickerPage、搜索协定SearchResultsPage、共享目标协定ShareTargetPage。

 

第4节 示例项目及调试

接下来我们创建一个经典的HelloWorld项目。首先我们创建一个空的HelloWorld项目，如下：

 

 

编辑主页面MainPage，放置一个TextBox和一个Button，当我们点击按钮时，弹出对话框，来显示用户输入和其他字符。编辑完成的MainPage页如下：

<Page     x:Class="HelloWorld.MainPage"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:local="using: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}">
        <StackPanel Orientation="Horizontal" Height="100" HorizontalAlignment="Center" Margin="0,120,0,0" VerticalAlignment="Top">
            <TextBox x:Name="tbInput" TextWrapping="Wrap" Text="" Width="380" Height="60" FontSize="26" />
            <Button x:Name="btnOK" Content="确定" Width="100" Height="64" Click="btnOK_Click_1" FontSize="22"/>
        </StackPanel>
    </Grid>
</Page>

确定按钮事件如下：

        private void btnOK_Click_1(object sender, RoutedEventArgs e)         {             string msg = string.Format("You say: {0}.", this.tbInput.Text);             MessageDialog dialg = new MessageDialog(msg, "Hello world");             dialg.ShowAsync();         }

调试Metro项目有三种方式：模拟器、本发计算机和远程计算机。对于模拟器运行效果如下：

 

 

模拟器模式下是一个单独的窗体，所以对于调试比较方便，但是对于本地计算机模式下调试，由于是全屏幕且在Metro风格下运行，所以调试比较不方便，通常当运行起来后，有三种方式可以切换：

（1） 可以使用快捷键Alt+F4退出当前程序；

（2） 将鼠标移动屏幕左上角位置，然后在左上角会出现其他程序界面的缩略图，点击即可切换；

（3） Alt+Tab进行切换。

（4）鼠标放于屏幕顶端，变成手型形状时按住鼠标拖到屏幕底端。

如果在代码窗口中有断点，在程序运行到断点位置会自动切换到VS代码窗口的断点命中位置。