手把手玩转win8开发系列课程（5）

  前面第三节，我们对ui层大一统的技术——xaml技术有了一个概览。

  这节中的我们正式以一个项目——食品管理程序从头到尾的开发的过程，来真真正正手把手进行win8开发。别看这是简简单单的项目，麻雀虽小，能够学win8的开发的方方面面——数据的绑定，各种各样的控件和xaml样式的引用等等。

  在下图1，你会看到这个项目最终运行的效果（在模拟器中运行的）。

项目的开篇介绍。

针对项目，首先，可以肯定告诉大家我写的这个项目的内容是针对程序猿们而不是对于这些设计妹妹，而且这个食品管理器不是一个完整的程序，非常抱歉，我甚至没有把所有的功能实现。只是通过这个程序展示了背后源代码实现。如果你是一名的设计人员，我这些内容对你来说可能是一坨shit。

以后内容，是不是有许许多多的源代码？.

那确实，对于这些源代码我确定是可以运行，并且进行优化过的，具有一定的可读性。 对于项目的介绍，我是这么做的，当我开始的新的一节时候或是发生了大的变化之时，我会把所有的xaml和C#源代码都统统的展示出来。当我源代码与上文只发生过小小的变动的之时或是用来强调关键源代码的时候，我只会展示其中的改动代码部分和高亮显示xaml中很重要的变化。对于最终源代码介绍效果如下所示，有注释有源码

 protected override void OnLaunched(LaunchActivatedEventArgs args) {
   if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) {
      //TODO: Load state from previously suspended application
    }
    // Create a Frame to act navigation context and navigate to the first page
    var rootFrame = new Frame();
    rootFrame.Navigate(typeof(Pages.MainPage));
   // Place the frame in the current Window and ensure that it is active
    Window.Current.Content = rootFrame;
   Window.Current.Activate();

介绍项目的基本架构

在这部分内容，我将通过一个简单的例子(食品管理程序)空白过程来告诉大家vs各工程中所包括的元素，我这样一步步分解项目来阐述的目的，是倘若你是一个的初学者，也能跟上我的进度。

创立这个例子，你只需要在在vs中选择文件新建工程，在新建工程对话框中，你选择C#windows应用商店程序→空白程序（这种做法在手把手玩转win8开发系列课程（1）)中说到过。具体情况，如图2所示：

这里注意啊，.net有许多现成的模板，但花里胡哨的，我不喜欢。原生态才是最好的。

下图展示了在vs的解决方案浏览器的内容，在这部分内容中，我可以肯定的告诉大家，这些文件及其目录是整个项目最重要。

温馨提示，你如果对这些文件的内容和目的不要清楚你也不要特别的担心，我将会在以后的内容对这个的例子解码的面面俱到，在这节中，我只是使你对整个的项目的文件如何柔和在一起有一个整体的印象就可以了。

 温馨提示， 这里开发metroapp的.netframework是一个阉割的精简版.nerframe work.而且在解决方案资源管理器中，你可以过双击来查看哪些能用命名空间其引用。

 我们这里先揭秘一下app.xaml 文件，如果是 asp.net程序员，就应该熟悉这个web.config文件，文件就类似与web.config文件。应该就熟悉了。

app文件和app.cs文件是干什么啊？他是用于启动Metro 程序的。xaml文件的主要是把StandardStyles.xaml加载在程序中，app.xaml源代码显示如下：

using Windows.ApplicationModel;
using Windows.ApplicationModel.Activation;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace MetroGrocer {
  sealed partial class App : Application {
    public App() {
      this.InitializeComponent();
      this.Suspending += OnSuspending;
    }
    protected override void OnLaunched(LaunchActivatedEventArgs args) {
      if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) {
        //TODO: Load state from previously suspended application
      }
      // Create a Frame to act navigation context and navigate to the first page
   var rootFrame = new Frame();
   rootFrame.Navigate(typeof(BlankPage));
   // Place the frame in the current Window and ensure that it is active
   Window.Current.Content = rootFrame;
   Window.Current.Activate();
    }
    void OnSuspending(object sender, SuspendingEventArgs e) {
      //TODO: Save application state and stop any background activity
    }
  }
}

对于StandardStyles.xaml这里，我不用太多了篇幅来赘述，至于什么样的原因吗？主要在以后的章节中，我会做详细的介绍。我们发现app.xaml.cs里面的内容更加有趣,在这里我可以定义了许多资源字典在里面，他的源代码如下：

<Application
  x:Class="MetroGrocer.App"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:MetroGrocer">
  <Application.Resources>
    <ResourceDictionary>
 <ResourceDictionary.MergedDictionaries>
    <ResourceDictionary Source="Common/StandardStyles.xaml"/>
      </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
  </Application.Resources>
</Application>

metro apps有一个特别完全的生命周期的模型，这个app.xaml.cs文件记录了相应这些东西。明白他们的生命周期是对我们非常重要，我们在以后的内容会详细的介绍。在这节中，你只需要了解在加载（OnLauched）的方法中所做的就是创建一个blankpage的实例，整个程序由此开始就ok了。

特别提醒，为简单起见，我已经删除了绝大多数的注释和屏蔽了大多数的一些命名空间中无用的源代码。

解码blankpage.xaml文件

这个网页是metro app的基本模块。当你创建一个项目，使用空白应用模板，vs会自动给你创建一个空白页，默认起名叫blankPage面。相应的源代码如下所示：

<Page
  x:Class="MetroGrocer.BlankPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="using:MetroGrocer"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d">
  <Grid Background="{StaticResource ApplicationPageBackgroundBrush}">
  </Grid>
</Page>

 倘若你前面对xaml技术有所了解的话，你会认识列表控件（Grid）的。win8 metro UI的模式下的页面也会像silverlight与wpf一样自动产生这些源代码，并且有界面的架构。对于这里产生的源代码只不过没有他们那么雍总，这是因为干掉了silverlight中页面自动生成的高级布局和无用的数据绑定的xaml源代码，在接下来中，我会创建更加复杂的页面，开始那个食品管理程序的编写。倘若你有编写xaml的经验，至于blankpage.xaml源代码后置的页面的c#源代码你也不会太陌生吧!源代码如下所示：

using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace MetroGrocer {
  public sealed partial class BlankPage : Page {
    public BlankPage() {
      this.InitializeComponent();
    }
    protected override void OnNavigatedTo(NavigationEventArgs e) {
    }
  }
}

这节，我们揭秘了过程中的app。xaml页面 和blank。xaml页面，夜已经静悄悄的，揭秘的过程，明天继续。