手把手玩轉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頁面，夜已經靜悄悄的，揭秘的過程，明天繼續。