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进行切换。

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

 

小 结
posted @ 2012-09-12 14:57  solan3000  阅读(17580)  评论(11编辑  收藏  举报