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

依然饭跑跑

　　这节，我们继续上节的一个议程。
　　①添加一个主页
　　现在我已经定义了一个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的，当选择的时候，程序也会得到了通知。
　　
　　这节议程差不多了，如下日程继续吧。