手把手玩转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界面能够做出反应了。