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

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

实现appBar Button的功能

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

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

using MetroGrocer.Data;
using Windows.UI.Xaml;
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 = new ViewModel();
      // …test data removed for brevity
this.InitializeComponent();
      this.DataContext = viewModel;
      ItemDetailFrame.Navigate(typeof(NoItemSelected));
       //PropertyChanged  属性改变的事件
      viewModel.PropertyChanged += (sender, args) => {
        if (args.PropertyName == “SelectedItemIndex") {
          if (viewModel.SelectedItemIndex == -1) {
        //导航到哪儿    ItemDetailFrame.Navigate(typeof(NoItemSelected));
      AppBarDoneButton.IsEnabled = false;
          } else {
            ItemDetailFrame.Navigate(typeof(ItemDetail), viewModel);
      AppBarDoneButton.IsEnabled = true;
          }
        }
      };
    }
     
    protected override void OnNavigatedTo(NavigationEventArgs e) {
    }
   //选择改变的事件    
private void ListSelectionChanged(object sender, SelectionChangedEventArgs e) {
      viewModel.SelectedItemIndex = groceryList.SelectedIndex;
    }
      //点击事件
  private void AppBarButtonClick(object sender, RoutedEventArgs e) {
    if (e.OriginalSource == AppBarDoneButton
        && viewModel.SelectedItemIndex > -1) {
      viewModel.GroceryList.RemoveAt(viewModel.SelectedItemIndex);
      viewModel.SelectedItemIndex = -1;
    }
   }
  }
}

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

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

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