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