[源码下载]

背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令

作者：webabcd

介绍
背水一战 Windows 10 之 MVVM（Model-View-ViewModel）

  • 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令

示例
1、Model
MVVM/Model/Product.cs

  1. /*
  2.  * Model 层的实体类，如果需要通知则需要实现 INotifyPropertyChanged 接口
  3.  */
  4.  
  5. using System.ComponentModel;
  6.  
  7. namespace Windows10.MVVM.Model
  8. {
  9.     public class Product : INotifyPropertyChanged
  10.     {
  11.         public Product()
  12.         {
  13.             ProductId = ;
  14.             Name = "";
  15.             Category = "";
  16.         }
  17.  
  18.         private int _productId;
  19.         public int ProductId
  20.         {
  21.             get { return _productId; }
  22.             set
  23.             {
  24.                 _productId = value;
  25.                 RaisePropertyChanged(nameof(ProductId));
  26.             }
  27.         }
  28.  
  29.         private string _name;
  30.         public string Name
  31.         {
  32.             get { return _name; }
  33.             set
  34.             {
  35.                 _name = value;
  36.                 RaisePropertyChanged(nameof(Name));
  37.             }
  38.         }
  39.  
  40.         private string _category;
  41.         public string Category
  42.         {
  43.             get { return _category; }
  44.             set
  45.             {
  46.                 _category = value;
  47.                 RaisePropertyChanged(nameof(Category));
  48.             }
  49.         }
  50.  
  51.         public event PropertyChangedEventHandler PropertyChanged;
  52.         protected void RaisePropertyChanged(string name)
  53.         {
  54.             if (PropertyChanged != null)
  55.             {
  56.                 PropertyChanged(this, new PropertyChangedEventArgs(name));
  57.             }
  58.         }
  59.     }
  60. }

MVVM/Model/ProductDatabase.cs

  1. /*
  2.  * Model 层的数据持久化操作（本地或远程）
  3.  *
  4.  * 本例只是一个演示
  5.  */
  6.  
  7. using System;
  8. using System.Collections.Generic;
  9. using System.Linq;
  10.  
  11. namespace Windows10.MVVM.Model
  12. {
  13.     public class ProductDatabase
  14.     {
  15.         private List<Product> _products = null;
  16.  
  17.         public List<Product> GetProducts()
  18.         {
  19.             if (_products == null)
  20.             {
  21.                 Random random = new Random();
  22.  
  23.                 _products = new List<Product>();
  24.  
  25.                 for (int i = ; i < ; i++)
  26.                 {
  27.                     _products.Add
  28.                     (
  29.                         new Product
  30.                         {
  31.                             ProductId = i,
  32.                             Name = "Name" + i.ToString().PadLeft(, ''),
  33.                             Category = "Category" + (char)random.Next(, )
  34.                         }
  35.                     );
  36.                 }
  37.             }
  38.  
  39.             return _products;
  40.         }
  41.  
  42.         public List<Product> GetProducts(string name, string category)
  43.         {
  44.             return GetProducts().Where(p => p.Name.Contains(name) && p.Category.Contains(category)).ToList();
  45.         }
  46.  
  47.         public void Update(Product product)
  48.         {
  49.             var oldProduct = _products.Single(p => p.ProductId == product.ProductId);
  50.             oldProduct = product;
  51.         }
  52.  
  53.         public Product Add(string name, string category)
  54.         {
  55.             Product product = new Product();
  56.             product.ProductId = _products.Max(p => p.ProductId) + ;
  57.             product.Name = name;
  58.             product.Category = category;
  59.  
  60.             _products.Insert(, product);
  61.  
  62.             return product;
  63.         }
  64.  
  65.         public void Delete(Product product)
  66.         {
  67.             _products.Remove(product);
  68.         }
  69.     }
  70. }

2、ViewModel
MVVM/ViewModel1/MyCommand.cs

  1. /*
  2.  * 为了方便使用，把 ICommand 再封装一层
  3.  */
  4.  
  5. using System;
  6. using System.Windows.Input;
  7.  
  8. namespace Windows10.MVVM.ViewModel1
  9. {
  10.     public class MyCommand : ICommand
  11.     {
  12.         // 由 public void Execute(object parameter) 调用的委托
  13.         public Action<object> MyExecute { get; set; }
  14.  
  15.         // 由 public bool CanExecute(object parameter) 调用的委托
  16.         public Func<object, bool> MyCanExecute { get; set; }
  17.  
  18.         public MyCommand(Action<object> execute, Func<object, bool> canExecute)
  19.         {
  20.             this.MyExecute = execute;
  21.             this.MyCanExecute = canExecute;
  22.         }
  23.  
  24.         // 需要发布此事件的话，则调用 RaiseCanExecuteChanged 方法即可
  25.         public event EventHandler CanExecuteChanged;
  26.         public void RaiseCanExecuteChanged()
  27.         {
  28.             if (CanExecuteChanged != null)
  29.             {
  30.                 CanExecuteChanged(this, EventArgs.Empty);
  31.             }
  32.         }
  33.  
  34.         // 用于决定当前绑定的 Command 能否被执行
  35.         // parameter 是由 ButtonBase 的 CommandParameter 传递过来的
  36.         // 如果返回 false 则对应的 ButtonBase 将变为不可用
  37.         public bool CanExecute(object parameter)
  38.         {
  39.             return this.MyCanExecute == null ? true : this.MyCanExecute(parameter);
  40.         }
  41.  
  42.         // 用于执行对应的命令，只有在 CanExecute() 返回 true 时才可以被执行
  43.         // parameter 是由 ButtonBase 的 CommandParameter 传递过来的对象
  44.         public void Execute(object parameter)
  45.         {
  46.             this.MyExecute(parameter);
  47.         }
  48.     }
  49. }

MVVM/ViewModel1/ProductViewModel.cs

  1. /*
  2.  * ViewModel 层
  3.  *
  4.  * 注：为了方便使用，此例对 ICommand 做了一层封装。如果需要了解比较原始的 MVVM 实现请参见 http://www.cnblogs.com/webabcd/archive/2013/08/29/3288304.html
  5.  */
  6.  
  7. using System;
  8. using System.Collections.ObjectModel;
  9. using System.ComponentModel;
  10. using Windows10.MVVM.Model;
  11.  
  12. namespace Windows10.MVVM.ViewModel1
  13. {
  14.     public class ProductViewModel : INotifyPropertyChanged
  15.     {
  16.         // 用于提供 Products 数据
  17.         private ObservableCollection<Product> _products;
  18.         public ObservableCollection<Product> Products
  19.         {
  20.             get { return _products; }
  21.             set
  22.             {
  23.                 _products = value;
  24.                 RaisePropertyChanged(nameof(Products));
  25.             }
  26.         }
  27.  
  28.         // 用于“添加”和“查询”的 Product 对象
  29.         private Product _product;
  30.         public Product Product
  31.         {
  32.             get { return _product; }
  33.             set
  34.             {
  35.                 _product = value;
  36.                 RaisePropertyChanged(nameof(Product));
  37.             }
  38.         }
  39.  
  40.         // 数据库对象
  41.         private ProductDatabase _context = null;
  42.  
  43.         public ProductViewModel()
  44.         {
  45.             _context = new ProductDatabase();
  46.  
  47.             Product = new Product();
  48.             Products = new ObservableCollection<Product>(_context.GetProducts());
  49.         }
  50.  
  51.         private MyCommand _getProductsCommand;
  52.         public MyCommand GetProductsCommand
  53.         {
  54.             get
  55.             {
  56.                 return _getProductsCommand ?? (_getProductsCommand = new MyCommand
  57.                   ((object obj) =>
  58.                   {
  59.                       // 从 Model 层获取数据
  60.                       Products = new ObservableCollection<Product>(_context.GetProducts(Product.Name, Product.Category));
  61.                   },
  62.                   null));
  63.             }
  64.         }
  65.  
  66.         private MyCommand _addProductCommand;
  67.         public MyCommand AddProductCommand
  68.         {
  69.             get
  70.             {
  71.                 return _addProductCommand ?? (_addProductCommand = new MyCommand
  72.                   ((object obj) =>
  73.                   {
  74.                       // 在 Model 层添加一条数据
  75.                       Product newProduct = _context.Add(Product.Name, Product.Category);
  76.  
  77.                       // 更新 ViewModel 层数据
  78.                       Products.Insert(, newProduct);
  79.                   },
  80.                   null));
  81.             }
  82.         }
  83.  
  84.         private MyCommand _updateProductCommand;
  85.         public MyCommand UpdateProductCommand
  86.         {
  87.             get
  88.             {
  89.                 return _updateProductCommand ?? (_updateProductCommand = new MyCommand
  90.                   ((object obj) =>
  91.                   {
  92.                       // 通过 CommandParameter 传递过来的数据
  93.                       Product product = obj as Product;
  94.  
  95.                       // 更新 ViewModel 层数据
  96.                       product.Name = product.Name + "U";
  97.                       product.Category = product.Category + "U";
  98.  
  99.                       // 更新 Model 层数据
  100.                       _context.Update(product);
  101.                   },
  102.                   // 对应 ICommand 的 CanExecute()，如果返回 false 则对应的 ButtonBase 将变为不可用
  103.                   (object obj) => obj != null));
  104.             }
  105.         }
  106.  
  107.         private MyCommand _deleteProductCommand;
  108.         public MyCommand DeleteProductCommand
  109.         {
  110.             get
  111.             {
  112.                 return _deleteProductCommand ?? (_deleteProductCommand = new MyCommand
  113.                   ((object obj) =>
  114.                   {
  115.                       // 通过 CommandParameter 传递过来的数据
  116.                       Product product = obj as Product;
  117.  
  118.                       // 更新 Model 层数据
  119.                       _context.Delete(product);
  120.  
  121.                       // 更新 ViewModel 层数据
  122.                       Products.Remove(product);
  123.                   },
  124.                   // 对应 ICommand 的 CanExecute()，如果返回 false 则对应的 ButtonBase 将变为不可用
  125.                   (object obj) => obj != null));
  126.             }
  127.         }
  128.  
  129.         public event PropertyChangedEventHandler PropertyChanged;
  130.         protected void RaisePropertyChanged(string name)
  131.         {
  132.             if (PropertyChanged != null)
  133.             {
  134.                 PropertyChanged(this, new PropertyChangedEventArgs(name));
  135.             }
  136.         }
  137.     }
  138. }

3、View
MVVM/View/Demo1_2.xaml

  1. <Page
  2.     x:Class="Windows10.MVVM.View.Demo1_2"
  3.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5.     xmlns:local="using:Windows10.MVVM.View"
  6.     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7.     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8.     mc:Ignorable="d"
  9.  
  10.     xmlns:Interactivity="using:Microsoft.Xaml.Interactivity"
  11.     xmlns:Core="using:Microsoft.Xaml.Interactions.Core"
  12.  
  13.     xmlns:vm="using:Windows10.MVVM.ViewModel1">
  14.  
  15.     <Grid Background="Transparent">
  16.         <StackPanel Margin="10 0 10 10">
  17.  
  18.             <!--
  19.                 View 层
  20.             -->
  21.  
  22.             <!--
  23.                 本例通过 Binding 结合 Command 实现 MVVM（用 x:Bind 结合 Command 实现 MVVM 也是一样的），通过非 ButtonBase 触发命令
  24.             -->
  25.  
  26.             <StackPanel.DataContext>
  27.                 <vm:ProductViewModel />
  28.             </StackPanel.DataContext>
  29.  
  30.             <ListView Name="listView" ItemsSource="{Binding Products}" Width="300" Height="300" HorizontalAlignment="Left" VerticalAlignment="Top">
  31.                 <ListView.ItemTemplate>
  32.                     <DataTemplate>
  33.                         <StackPanel Orientation="Horizontal">
  34.                             <TextBlock Text="{Binding Name}" HorizontalAlignment="Left" />
  35.                             <TextBlock Text="{Binding Category}" HorizontalAlignment="Left" Margin="10 0 0 0" />
  36.                         </StackPanel>
  37.                     </DataTemplate>
  38.                 </ListView.ItemTemplate>
  39.             </ListView>
  40.  
  41.             <StackPanel Orientation="Horizontal" Margin="0 10 0 0" DataContext="{Binding Product}">
  42.                 <TextBlock Text="Name：" VerticalAlignment="Center" />
  43.                 <TextBox Name="txtName" Text="{Binding Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="100" />
  44.                 <TextBlock Text="Category：" VerticalAlignment="Center" Margin="20 0 0 0" />
  45.                 <TextBox Name="txtCategory" Text="{Binding Category, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Width="100" />
  46.             </StackPanel>
  47.  
  48.             <!--
  49.                 需要引用 Microsoft.Xaml.Interactions.dll 和 Microsoft.Xaml.Interactivity.dll
  50.  
  51.                 Microsoft.Xaml.Interactions.Core:EventTriggerBehavior
  52.                     EventName - 关联的事件名称
  53.  
  54.                 Microsoft.Xaml.Interactions.Core:InvokeCommandAction
  55.                     Command - 指定关联的 ICommand
  56.                     CommandParameter - 传递给 ICommand 的参数
  57.             -->
  58.             <StackPanel Orientation="Horizontal" Margin="0 10 0 0">
  59.                 <TextBlock Text="查询">
  60.                      <Interactivity:Interaction.Behaviors>
  61.                          <Core:EventTriggerBehavior EventName="Tapped">
  62.                              <Core:InvokeCommandAction Command="{Binding GetProductsCommand}" />
  63.                          </Core:EventTriggerBehavior>
  64.                      </Interactivity:Interaction.Behaviors>
  65.                 </TextBlock>
  66.  
  67.                 <TextBlock Text="添加" Margin="10 0 0 0">
  68.                      <Interactivity:Interaction.Behaviors>
  69.                          <Core:EventTriggerBehavior EventName="Tapped">
  70.                              <Core:InvokeCommandAction Command="{Binding AddProductCommand}" />
  71.                          </Core:EventTriggerBehavior>
  72.                      </Interactivity:Interaction.Behaviors>
  73.                 </TextBlock>
  74.  
  75.                 <TextBlock Text="更新" Margin="10 0 0 0">
  76.                      <Interactivity:Interaction.Behaviors>
  77.                          <Core:EventTriggerBehavior EventName="Tapped">
  78.                              <Core:InvokeCommandAction Command="{Binding UpdateProductCommand}" CommandParameter="{Binding SelectedItem, ElementName=listView}"/>
  79.                          </Core:EventTriggerBehavior>
  80.                      </Interactivity:Interaction.Behaviors>
  81.                 </TextBlock>
  82.  
  83.                 <TextBlock Text="删除" Margin="10 0 0 0">
  84.                      <Interactivity:Interaction.Behaviors>
  85.                          <Core:EventTriggerBehavior EventName="Tapped">
  86.                              <Core:InvokeCommandAction Command="{Binding DeleteProductCommand}" CommandParameter="{Binding SelectedItem, ElementName=listView}"/>
  87.                          </Core:EventTriggerBehavior>
  88.                      </Interactivity:Interaction.Behaviors>
  89.                 </TextBlock>
  90.             </StackPanel>
  91.  
  92.         </StackPanel>
  93.     </Grid>
  94. </Page>

OK
[源码下载]

背水一战 Windows 10 (24) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令的更多相关文章

  1. 背水一战 Windows 10 (23) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过 ButtonBase 触发命令

    [源码下载] 背水一战 Windows 10 (23) - MVVM: 通过 Binding 或 x:Bind 结合 Command 实现,通过 ButtonBase 触发命令 作者:webabcd ...

  2. MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过 ButtonBase 触发命令

    介绍背水一战 Windows 10 之 MVVM(Model-View-ViewModel) 通过 Binding 或 x:Bind 结合 Command 实现,通过 ButtonBase 触发命令 ...

  3. 背水一战 Windows 10 (25) - MVVM: 通过 x:Bind 实现 MVVM（不用 Command）

    [源码下载] 背水一战 Windows 10 (25) - MVVM: 通过 x:Bind 实现 MVVM(不用 Command) 作者:webabcd 介绍背水一战 Windows 10 之 MVV ...

  4. 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合

    [源码下载] 背水一战 Windows 10 (22) - 绑定: 通过 Binding 绑定对象, 通过 x:Bind 绑定对象, 通过 Binding 绑定集合, 通过 x:Bind 绑定集合 作 ...

  5. MVVM: 通过 Binding 或 x:Bind 结合 Command 实现，通过非 ButtonBase 触发命令

    介绍背水一战 Windows 10 之 MVVM(Model-View-ViewModel) 通过 Binding 或 x:Bind 结合 Command 实现,通过非 ButtonBase 触发命令 ...

  6. 背水一战 Windows 10 (29) - 控件（文本类）: RichTextBlock, RichTextBlockOverflow, RichEditBox

    [源码下载] 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox 作者:webabcd ...

  7. 背水一战 Windows 10 (10) - 资源: StaticResource, ThemeResource

    [源码下载] 背水一战 Windows 10 (10) - 资源: StaticResource, ThemeResource 作者:webabcd 介绍背水一战 Windows 10 之 资源 St ...

  8. 背水一战 Windows 10 (8) - 控件 UI: StateTrigger

    [源码下载] 背水一战 Windows 10 (8) - 控件 UI: StateTrigger 作者:webabcd 介绍背水一战 Windows 10 之 控件 UI VisualState 之 ...

  9. 背水一战 Windows 10 (6) - 控件 UI: 字体的自动继承的特性, Style, ControlTemplate

    [源码下载] 背水一战 Windows 10 (6) - 控件 UI: 字体的自动继承的特性, Style, ControlTemplate 作者:webabcd 介绍背水一战 Windows 10 ...

随机推荐

  1. linux系统编程之进程（八）：守护进程详解及创建，daemon()使用

    一,守护进程概述 Linux Daemon(守护进程)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.它不需要用户输入就能运行而且提供某种服务,不是对整个 ...

  2. 从阿里巴巴IPO联想到创始人和资方关系

    [小九的学堂,致力于以平凡的语言描述不平凡的技术.如要转载,请注明来源:小九的学堂.cnblogs.com/xfuture] 5月7日,阿里巴巴于今日向美国证券交易委员会(SEC)提交了IPO(首次公 ...

  3. 使用border做三角形

    网站上经常会使用一些三角形,除了图片的方式,实际上利用border我们可以做出纯CSS的三角形.我们知道border是个边抖可以单独设置,当四个边相交的时候他们是什么时候改变的? .t0{ margi ...

  4. 分区函数Partition By的与row_number()的用法以及与排序rank()的用法详解(获取分组(分区)中前几条记录)

    partition by关键字是分析性函数的一部分,它和聚合函数不同的地方在于它能返回一个分组中的多条记录,而聚合函数一般只有一条反映统计值的记录,partition by用于给结果集分组,如果没有指 ...

  5. 理解javascript中的浏览器窗口——窗口基本操作

    × 目录 [1]窗口位置 [2]窗口大小 [3]打开窗口[4]关闭窗口 前面的话 BOM全称是brower object model(浏览器对象模型),主要用于管理窗口及窗口间的通讯,其核心对象是wi ...

  6. Web APi之捕获请求原始内容的实现方法以及接受POST请求多个参数多种解决方案（十四）

    前言 我们知道在Web APi中捕获原始请求的内容是肯定是很容易的,但是这句话并不是完全正确,前面我们是不是讨论过,在Web APi中,如果对于字符串发出非Get请求我们则会出错,为何?因为Web A ...

  7. ECMAScript5之Array

    在ECMAScript5中对Array新增的些方法,以前没注意的同志们,嘻嘻,下面我们一起来边看边学. 1.Array之isArray(element) 看到isArray,不言而喻,就是判断一个对象 ...

  8. 如何用Pivot实现行列转换

    在Oracle中,如果要实现行列转换,较为常见的是用DECODE和CASE语句.对于简单的行列转行,DECODE和CASE语句尚能应付.在逻辑比较复杂,分组聚合较多的场景中,DECODE和CASE语句 ...

  9. Windows 搭建 .NET 跨平台环境并运行应用程序

    写在前面 阅读目录: Install .NET Version Manager (DNVM) Install .NET Core Execution Environment (DNX) Write t ...

  10. ZOJ Problem Set - 1383 Binary Numbers

    水题,输出的时候注意下 #include <stdio.h> #include <math.h> int main() { int d; scanf("%d" ...