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

上节，已经为appBar换上皮肤了,显然不够。我这里要使她有一定的功能。

实现appBar Button的功能

现在 app Bar上面的控件只是像一些梨一样“好看不好吃”，我必须实现他的功能，因此，我实现功能的源代码就如下所示：

下面，我要做的事情，就是实现这样一个功能——当用户点击此按钮的时候，要界面上某一项从数组中移去，这样才能像普通购物车一样用户才能对商品自由的选择。下面就是实现这个功能的源代码:

 1 using MetroGrocer.Data;
 2 using Windows.UI.Xaml;
 3 using Windows.UI.Xaml.Controls;
 4 using Windows.UI.Xaml.Navigation;
 5 namespace MetroGrocer.Pages {
 6   public sealed partial class ListPage : Page {
 7     //ViewModel数据对象
 8     ViewModel viewModel;
 9     public ListPage() {
10       //进行对象的实例化
11       viewModel = new ViewModel();
12       // …test data removed for brevity
13 this.InitializeComponent();
14       this.DataContext = viewModel;
15       ItemDetailFrame.Navigate(typeof(NoItemSelected));
16        //PropertyChanged  属性改变的事件
17       viewModel.PropertyChanged += (sender, args) => {
18         if (args.PropertyName == “SelectedItemIndex") {
19           if (viewModel.SelectedItemIndex == -1) {
20         //导航到哪儿    ItemDetailFrame.Navigate(typeof(NoItemSelected));
21       AppBarDoneButton.IsEnabled = false;
22           } else {
23             ItemDetailFrame.Navigate(typeof(ItemDetail), viewModel);
24       AppBarDoneButton.IsEnabled = true;
25           }
26         }
27       };
28     }
29
30     protected override void OnNavigatedTo(NavigationEventArgs e) {
31     }
32    //选择改变的事件
33 private void ListSelectionChanged(object sender, SelectionChangedEventArgs e) {
34       viewModel.SelectedItemIndex = groceryList.SelectedIndex;
35     }
      //点击事件
36   private void AppBarButtonClick(object sender, RoutedEventArgs e) {
37     if (e.OriginalSource == AppBarDoneButton
38         && viewModel.SelectedItemIndex > -1) {
39       viewModel.GroceryList.RemoveAt(viewModel.SelectedItemIndex);
40       viewModel.SelectedItemIndex = -1;
41     }
42    }
43   }
44 }

对于上述的源代码，我要强调这么两点，第一点所谓appBar 能够做出相应相应，只不过是通过了某个点击的事件，在其事件中实现某种功能。

第二点就是这里我们又一次见识到了viewModel传递的数据带来的好处，在这个AppbarButtonClick事件中，当没有某个项的时候，你并不需要跳转到NoItemSelected页面，或者使按钮失效。我这里指简单的更新ViewModel以后，这样的所谓后台的变化也能方便的呈现给前台。

哝——点击appBar Button界面能够做出反应了。