手把手玩转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 application17       }18       // Create a Frame to act navigation context and navigate to the first page19       var rootFrame = new Frame();20 //首先导航到listPage这个页面    rootFrame.Navigate(typeof(Pages.ListPage));21       // Place the frame in the current Window and ensure that it is active22       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 activity27     }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的，当选择的时候，程序也会得到了通知。

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