这节，我们继续上节的一个议程。
①添加一个主页
现在我已经定义了一个ViewModel，我就开始整合项目。第一步就是添加主页到添加到项目中去。我明白项目为何吧页面创建为空白页面，但这个空白的页面起名字叫空白一点儿意义都没有吧，我这里需要给新页面起一个更有意义的页面.原先的空白页面，我已经吧他干掉了。
鄙人是个贱体，我更喜欢添加一些新的文件夹，使其更加的有层次。因此，我加了一个新的文件夹加做pages。在此文件夹下，我右击我添加了一个叫做list的xaml的文件、
特别提醒，如果你是xaml的一个新手的话，就非常的总要先理解我在手把手玩转win8开发系列课程（5），（6）讲的那个空白项目的例子。你要明白，在xaml的文件支持迭代的风格来定义控件，并且添加了一些源代码来支持他。并支持用一些样式的定义来减少一定重复的定义。这更加的自愿，就源代码就出现在这里。当然了，我也很难只在文章中讲述纯的xaml语言。
对于程序，我想做这么一件事，当app加载的时候就加载这个listPage页面，这怎么办了，我需要在app.xaml的源文件中做一定更改。怎么更改的啊！源代码如下：
1 using Windows.ApplicationModel;
2 using Windows.ApplicationModel.Activation;
3 using Windows.UI.Xaml;
4 using Windows.UI.Xaml.Controls;
5 namespace MetroGrocer {
6 sealed partial class App : Application {
7 //构造函数 控件的初始化
8 public App() {
9 //初始化相应的控件
10 this.InitializeComponent();
11 this.Suspending += OnSuspending;
12 }
13 //开始加载时间
14 protected override void OnLaunched(LaunchActivatedEventArgs args) {
15 if (args.PreviousExecutionState == ApplicationExecutionState.Terminated) {
16 //TODO: Load state from previously suspended application
17 }
18 // Create a Frame to act navigation context and navigate to the first page
19 var rootFrame = new Frame();
20 //首先导航到listPage这个页面 rootFrame.Navigate(typeof(Pages.ListPage));
21 // Place the frame in the current Window and ensure that it is active
22 Window.Current.Content = rootFrame;
23 Window.Current.Activate();
24 }
25 void OnSuspending(object sender, SuspendingEventArgs e) {
26 //TODO: Save application state and stop any background activity
27 }
28 }
29 }此时不明白这个类的意思，你也不用慌。在第五章的时候，我会这个类如何对整个生命周期的响应给你们做详细的阐述。
②开始编码了
最明了的原因解释是我为何创建这个项目与你平时创建的项目不同。就是我对listpage.xaml。cs进行了编码。相应的源代码如下：
1 using MetroGrocer.Data;
2 using Windows.UI.Xaml.Controls;
3 using Windows.UI.Xaml.Navigation;
4 namespace MetroGrocer.Pages {
5 public sealed partial class ListPage : Page {
6 //viewmodel 的对象
7 ViewModel viewModel；
8 //构造函数
9 public ListPage() {
10 //viewmodel的实例
11 viewModel = new ViewModel();
12 //添加数据
13 viewModel.StoreList.Add("Whole Foods");
14 viewModel.StoreList.Add("Kroger");
15 viewModel.StoreList.Add("Costco");
16 viewModel.StoreList.Add("Walmart");
17 viewModel.GroceryList.Add(new GroceryItem { Name = "Apples",
18 Quantity = 4, Store = "Whole Foods" });
19 viewModel.GroceryList.Add(new GroceryItem { Name = "Hotdogs",
20 Quantity = 12, Store = "Costco" });
21 viewModel.GroceryList.Add(new GroceryItem { Name = "Soda",
22 Quantity = 2, Store = "Costco" });
23 viewModel.GroceryList.Add(new GroceryItem { Name = "Eggs",
24 Quantity = 12, Store = "Kroger" });
25 this.InitializeComponent();
26 this.DataContext = viewModel;
27 }
28 //导航的事件
29 protected override void OnNavigatedTo(NavigationEventArgs e) {
30 }
31 //改变的索引
32 private void ListSelectionChanged(object sender, SelectionChangedEventArgs e) {
33 viewModel.SelectedItemIndex = groceryList.SelectedIndex;
34 }
35 }
36 }构造函数创建了一个新的viewmodel实例，处理许多简单的数据。这个处理了许多数据。在类中最激动人心声明如下：
this.DataContext = viewModel;示内容在用户界面控件的视图模型。为此，我开始指定数据源。用户控件的DataContext属性是给一个用户界面控件及其所有子控件指定源数据绑定。我使用关键字对其数据进行了绑定。为什么能够这么做了，因为listpage包含所对应的所有对应的xaml的源代码。
我在最后部分定义的方法是用于处理SelectionChanged事件了。这是一种控件是用来显示项目的购物清单.当我定义xaml的时候，我会让这个方法被调用时，返回用户选择其中的一个项。依据SelectedItem属性，方法中的在viewmodel设置的selectedItem这个属性、由于这个属性是Observable的，当选择的时候，程序也会得到了通知。
这节议程差不多了，如下日程继续吧。