手把手玩轉win8開發系列課程（8）

這節，我們繼續上節的一個議程。

①添加一個主頁

現在我已經定義了一個ViewModel，我就開始整合項目。第一步就是添加主頁到添加到項目中去。我明白項目為何吧頁面創建為空白頁面，但這個空白的頁面起名字叫空白一點兒意義都沒有吧，我這里需要給新頁面起一個更有意義的頁面.原先的空白頁面，我已經吧他干掉了。

鄙人是個賤體，我更喜歡添加一些新的文件夾，使其更加的有層次。因此，我加了一個新的文件夾加做pages。在此文件夾下，我右擊我添加了一個叫做list的xaml的文件、

特別提醒，如果你是xaml的一個新手的話，就非常的總要先理解我在手把手玩轉win8開發系列課程（5），（6）講的那個空白項目的例子。你要明白，在xaml的文件支持迭代的風格來定義控件，並且添加了一些源代碼來支持他。並支持用一些樣式的定義來減少一定重復的定義。這更加的自願，就源代碼就出現在這里。當然了，我也很難只在文章中講述純的xaml語言。

對於程序，我想做這么一件事，當app加載的時候就加載這個listPage頁面，這怎么辦了，我需要在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();
//首先導航到listPage這個頁面    rootFrame.Navigate(typeof(Pages.ListPage));
      // 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
    }
  }
}

此時不明白這個類的意思，你也不用慌。在第五章的時候，我會這個類如何對整個生命周期的響應給你們做詳細的闡述。

②開始編碼了

最明了的原因解釋是我為何創建這個項目與你平時創建的項目不同。就是我對listpage.xaml。cs進行了編碼。相應的源代碼如下：

using MetroGrocer.Data;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Navigation;
namespace MetroGrocer.Pages {
  public sealed partial class ListPage : Page {
    //viewmodel 的對象
ViewModel viewModel；
  //構造函數
  public ListPage() {
       //viewmodel的實例
      viewModel = new ViewModel();
     //添加數據
      viewModel.StoreList.Add("Whole Foods");
      viewModel.StoreList.Add("Kroger");
      viewModel.StoreList.Add("Costco");
      viewModel.StoreList.Add("Walmart");
      viewModel.GroceryList.Add(new GroceryItem { Name = "Apples",
        Quantity = 4, Store = "Whole Foods" });
      viewModel.GroceryList.Add(new GroceryItem { Name = "Hotdogs",
        Quantity = 12, Store = "Costco" });
      viewModel.GroceryList.Add(new GroceryItem { Name = "Soda",
        Quantity = 2, Store = "Costco" });
      viewModel.GroceryList.Add(new GroceryItem { Name = "Eggs",
        Quantity = 12, Store = "Kroger" });
           this.InitializeComponent();
   this.DataContext = viewModel;
    }
//導航的事件
    protected override void OnNavigatedTo(NavigationEventArgs e) {
    }
//改變的索引
   private void ListSelectionChanged(object sender, SelectionChangedEventArgs e) {
      viewModel.SelectedItemIndex = groceryList.SelectedIndex;
    }
    }
}

構造函數創建了一個新的viewmodel實例，處理許多簡單的數據。這個處理了許多數據。在類中最激動人心聲明如下：

this.DataContext = viewModel;示內容在用戶界面控件的視圖模型。為此，我開始指定數據源。用戶控件的DataContext屬性是給一個用戶界面控件及其所有子控件指定源數據綁定。我使用關鍵字對其數據進行了綁定。為什么能夠這么做了，因為listpage包含所對應的所有對應的xaml的源代碼。

我在最后部分定義的方法是用於處理SelectionChanged事件了。這是一種控件是用來顯示項目的購物清單.當我定義xaml的時候，我會讓這個方法被調用時，返回用戶選擇其中的一個項。依據SelectedItem屬性，方法中的在viewmodel設置的selectedItem這個屬性、由於這個屬性是Observable的，當選擇的時候，程序也會得到了通知。

 

這節議程差不多了，如下日程繼續吧。