手把手玩转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的，当选择的时候，程序也会得到了通知。

这节议程差不多了，如下日程继续吧。