Windows Store apps开发[33]Part 1：使用Grid App (XAML)模板创建第一个Windows 8 app

注：本文由BeyondVincent(破船)原创首发

        转载请注明出处：BeyondVincent(破船)@DevDiv.com

更多内容请查看下面的帖子

[DevDiv原创]Windows 8 开发Step by Step

    在本教程中，你将会学习到"Grid App（XAML）"模板的详细内容，并在理解这个模的基础上创建你的Windows 8 app。

    在开始之前：

• 你需要Windows 8 OS
• Microsoft Visual Studio Express 2012 for Windows 8，在这里可以下载到：获取工具
• 需要一个开发者证书，看这里：获取开发者证书

    摘要：

    在这里我会使用C#和XAML创建一个简单的Windows 8 style app，在创建好解决方案之后，我会深入分析Visual Studio 2012生成的XAML和代码。我将运行app，并查看它使用的示例数据和相关绑定。在更深入的层次上，你将更好的理解app内导航是如何做的，以及绑定又怎么使用。深入的理解这个模板有助于以更好的方式设计你的程序，并且可以帮助你考虑这个模板是否适用于你的app。

    下面正式开始：

•     通过输入"vis"并选择

• 这将会启动visual studio 2012

• 单击文件->新建->项目

• 你将看到新建项目对话框，选择模板->Visual C#，然后选择Windows Metro style(注：在新版本的vs中这里是Windows Store)。然后选择Grid App(XAML)模板。

• 输入BV_MyGridApp作为程序的名称。然后单击确定以创建项目。注意：在Windows 8中，所有的软件开发都将需要开发者证书。在启动Visual Studio之后，可能会提示你授权你的机器以进行开发。当提示出现时，单击同意。如果Visual Studio要求输入Microsoft账号，那么就输入Hotmail或者live账号，并单击确定。更多消息：http://msdn.microsoft.com/en-us/library/windows/apps/hh974578.aspx

• Visual Studio为你创建的目录结构如下：

    a、Properties文件夹包含一些程序集信息和项目属性。

    b、应用文件夹包含了这个项目需要引用到的其它一些程序集。

    c、Assets文件夹包含缺省的logo、SplashScreen图片，你可以在这个目录中添加自己的logo。

    d、Common文件夹包含了一些类和XAML styles，这些内容可以简化程序的开发。你可以在这个文件夹添加自己的转换类，Grid App(XAML)模板已经默认提供了两个转换类了。这里还有BindableBase.cs类，它用于所有datamodel类的基类。通过这个基类，你的数据模型类就不需要实现INotifyPropertyChanged接口了，因为BindableBase.cs已经实现了INotifyPropertyChanged接口。有关更多信息，你可以从那个目录下的ReadMe.txt文件获取。除了一般的数据和style外，这个文件夹还有个名字为“SuspensionManager.cs”的文件。SuspensionManager是一个辅助类，可以帮助我们简化app生命周期的管理。它为我们处理了许多事情。它保存和恢复app页面中Frame的导航状态。它序列化页面状态数据 并将其写入一个XML文件中，该文件存储在本地storage中。

    e、DataModel文件夹包含一个SampleDataSource.cs文件。这个文件中生成了一些示例数据。

    f、App.xaml文件包含xaml以及windows 8 style app需要的资源。App.xaml.cs文件中的App()方法它负责初始化一个Application对象。这里面的代码是首次被执行的，相当于main()或WinMain()。它同样具有这样的方法：当应用程序进入suspended阶段，以及程序被用户正常启动时调用的方法。 OnLaunched和OnSuspending方法。当程序进入suspended或者launch阶段，如果你想执行某个确定的动作，那么你可以在这两个方法中实现。

    g、GroupDetailPage.xaml显示一个集合(群组)以及在该集合中的相关项(items)。一般是这样的：用户可以在这个页面看到左边是集合的详细内容，而右边是相关的项，当选择一个项时，可以导航到选中项的全页面视图，即ItemDetailPage.xaml。

    h、GroupedItemsPages.xaml文件是当程序启动出现的第一个页面。它负责显示Group集合和对应的项。它相当于主页面。用户可以在这里查看Group集合与各个项，如果选择某项（item）择导航到项全画面视图，而选择group 标签的话择导航至group详情画面。

    i、ItemDetailPage.xaml显示单独的一项或者某项的全画面视图。

    j、Package.appxmanifest.xaml是一个特殊的文件，它描述了app如何打包、具有的功能、如何展现给用户。也使用了几个图片文件，如启动画面(初始屏幕)图片splashscreen.png,以及SmallLogo.png和Logo.png。如下图

• 我们来运行一下程序,看看默认情况下是什么样子的。选择生成->生成解决方案，然后按F5运行app[注意，再在这里我选择模拟器调试]。

    模拟器是本地计算机中的一个终端服务会话.你可以打开任务管理器,然后选择用户tab,将看到有两个会话.如下图...........注意:即使你停止调试和,也不能关闭模拟器,这有利于你多次调试.当然,问题来了:如何关闭模拟器呢?在模拟器窗口上没有关闭按钮:单击最小化按钮不能推出模拟器.你可以在任务管理器中关闭它.

• 程序运行起来，可以看到在Package.appmanifest文件中提到的"启动画面"。

• 等一会，程序将被加载，主页面显示集合以及items。这里有6个集合，可以左右滚动来显示查看它们。

• 单击ItemTitle:1矩形框，你会看到Item Title：1的详细页面。

• 现在如果你想移动到item2,那么你可以在画面右边移动/徘徊鼠标，将会看到一个带右箭头的按钮。单击它，会滚动制集合中的下一个item。在左手边，可以单击左箭头按钮往回滚。同样的，如果在触屏设备上，可以水平轻拂画面,以移动到下一项。

• 点击或者触摸右上角的返回按钮,将回到主画面。
• 现在单击“Group Title：1”进入Group Title:1详情,你会看到Group的一个概要画面.

    至此，你应该明白了整个工程的结构和其中不同文件的作用,并且知道如何在VS2012中启动app.下面我们开始讲解下一部分:解释这个模板中的每个文件的作用。

• 从App.xaml开始吧:打开App.xaml文件。看看它是如何包含"Common/StandardStyles.xaml"的。这个文件包含的style可以用在整个app中.一旦将style文件添加到ResourceDictionary中,那么在当前项目中的所有文件中都可以使用它.它相当于一个全局变量.

• 打开App.xaml.cs文件，App.xaml.cs是App.xaml文件的code-behind文件，它是一个partial类.XAML和code-behind一起组成了一个完整的类。App.xaml.cs是程序的入口。它有一个构造函数，调用一个名为InitializeComponent的函数，该函数是由VS自动生成的，它的主要目的是初始化在XAML文件中声明的元素。App.xaml.cs文件同样包含2个处理激活和休眠app的方法：OnLaunched和OnSuspending。如名字所示，当程序进入启动状态时，OnLaunched方法被调用，而程序进入休眠状态时调用OnSuspending方法。

•     据了解，SuspensionManager类有导航的功能，要使用这个类提供的导航功能，必须注册main app Frame。我们在Onlaunched方法中注册Frame

• LayoutAwarePage文件：在平板电脑中，加速度计是一个重要的功能，可以帮助用户确定它们想要的任何方向。开发者必须在每一个页面中处理这些方向的改变，在code-behind中方向事件会被触发。然而，现在这个功能已经被放到LayoutAwarepage.cs文件中了。LayoutAwarePage类作为每一个页面的基类，它提供了dataViewModel功能。下面是其中的一些方法：

    在LayoutAwarePage类中，这有一个DefaultViewModel属性。这个类用于xaml控件的数据绑定。你可以去看看GroupedItemPage.xaml.cs文件。

• GroupedItemsPage.xaml.cs：打开这个页面，你会看到示例数据中的group集合被添加到DevaultViewModel属性tag中。

• 现在打开GroupedItemsPage.xaml文件，你可以看到在Page.Resources标签中，将“Groups”当做CollectionViewSource。这个资源的名称是groupedItemsViewSource

    这个页面使用GridView来显示集合与各项。你可以在这里看到GridView的ItemsSource绑定到groupedItemsViewSource上。

    在GrouedItemsPage.xaml.cs文件中，当用户点击某个item时，代码使用frame的Navigate方法，导航至ItemDetailPage页面

    同样在GroupedItemsPage.xaml.cs文件中，当用户点击Group标题，代码使用frame的Navigate方法，导航至GroupDetailPage页面

• 打开ItemDetailPage.xaml文件，这个页面使用FlipView控件，可以往前或者往回滚动集合中的items。

• 打开ItemDetailPage.xaml.cs文件；它继承自LayoutAwarePage，LayoutAwarePage实现了在页面栈中GoHome和GoBack导航的功能。在LoadState方法中，它绑定了最后一次单击的item（group和group items）。

• 打开GroupDetailPage.xaml文件，这个页面的左边显示了分类/群组的图片和文字信息，然后用GridView显示分类/群组的的items。

• 开发GroupDetailPage.xaml.cs文件，它同样继承自LayoutAwarePage，从父类中继承了GoHome和GoBack方法。最后，打开SampleDataSource.cs文件，移至SampleDataSource类的定义。这个类使用假数据创建了集合和items。

总结

    在本文中，介绍了GridView(XAML)模板创建工程的结构，各个文件作用，不同页面间导航，数据如何绑定至Grid控件。希望在Windows 8开发中，对你有帮助。

在下一篇文章中，我将解释如何修改SampleDataSource，来使用真实的数据。