应用不只是包含textboxs和labels,还包含actions,如按钮和鼠标事件等。接下来我们加上一些像按钮这样的UI元素来看MVVM类怎么演变的。与之前的UI相比,这次我们加上一个"Cal Tax"按钮,当我们点击这个依赖于“sales amount”的按钮时,它会计算税费并显示在同窗口内。

  为了完成所述的功能,我们先在Model类中添加一个CalculateTax的方法。当这个方法被调用时,它根据工资范围来计算税费并把它储存在Tax这个属性中。

public class Customer
{ ... private double _Tax; public double Tax => _Tax; public void CalculateTax()
{
if (Amount > )
{
_Tax = ;
}
else if (Amount > )
{
_Tax = ;
}
else
{
_Tax = ;
}
}
}

  因为view model是model类的包装,我们需要在view model中创建一个方法来调用model的Calculate方法。

public void Calculate()
{
....
obj.CalculateTax();
}

  现在我们希望从界面上调用Calculate方法时使用XAML而不是后台代码。现在还不能在XAML中直接调用Calculate方法,这时我们需要用到WPF command类。

  如果你想用属性来传递数据到view model 我们需要用到bindings,如果你想要从view传递actions我们需要用到commands.  

  所有属于view的actions都被传递到command类,因此第一步就是创建command类。为了创建一个这样的command类我们需要像下面这样实现ICommand接口。

  有2个方法我们必须要实现,CanExecute和Execute。在Execute方法中,我们写当这个action发生时我们真的要执行的逻辑。在CanExecute方法中,我们写一些验证代码来确定我们的Execute方法是否应该被执行。

 public class ButtonCommand:ICommand
{
public bool CanExecute(object parameter)
{
//验证代码
} public void Execute(object parameter)
{
//执行逻辑
} public event EventHandler CanExecuteChanged;
}

  现在所有的actions调用时先来到command类然后再路由到view model 类。换句话说就是command类需要覆盖view model类。

  下面是一些简短的代码摘要。有4个重要的点需要记下来:

  1. 创建的view model对象是私有成员级别的对象。
  2. 这个对象将view model通过构造函数来传递。
  3. 暂时我们没有在CanExecute中添加验证代码,它永远返回true.
  4. 在Execute方法中我们调用了view model类的Calculate方法。
public class ButtonCommand:ICommand
{
private CustomerViewModel _obj; public ButtonCommand(CustomerViewModel obj)
{
_obj = obj;
}
public bool CanExecute(object parameter)
{
//验证代码
return true;
} public void Execute(object parameter)
{
//执行逻辑
_obj.Calculate();
} public event EventHandler CanExecuteChanged;
}

  在上面的command的代码中,view model对象通过构造函数来传递。因此view model类需要创建一个command对象并通过ICommand接口暴露这个command对象。这个ICommand接口会被利用然后在WPF XAML中调用。一些关于CustomerViewModel类去用command类的重点:

  1. command类是CustomerViewModel类的一个私有成员级别的对象。
  2. 在view model类中,当前实例通过构造函数传递给command类。当我们之前解释command类代码时,我们说command类的构造函数获取到view model类的实例。因此在这一节中,我们把当前实例传递给command类。
  3. command对象以ICommand接口的形式暴露出来,这样它就可以在XAML里面来用了。
 public class CustomerViewModel
{
private readonly ButtonCommand _objButtonCommandCommand; public CustomerViewModel()
{
_objButtonCommandCommand=new ButtonCommand(this);
} public ICommand CalClick => _objButtonCommandCommand;
.....
}

  在UI上添加一个按钮来让它把按钮的行为和暴露为ICommand的方法关联起来。现在可以打开这个按钮的属性,找到命令属性,然后点击创建数据绑定。

  然后选择static resource然后给按钮加上ButtonCommand。

  当你去点击cal tax的按钮时,它回去执行CalculateTax方法并把tax的值存在_tax变量中。

  换句话中,UI不会自动的被通知关于Tax Cal.因此我们需要传递从对象到UI的某种通知告诉它们tax值已经改变了,然后UI来重新加载新的绑定的数据。

  在View model 勒种,我们需要发送一个通知时间到view上。  

  要在VIEW MODEL类中使用通知我们需要做3件事情。所有的3件事情在下面都标出来了。

  • 像如下代码一样实现INotifyPropertyChanged接口。一旦你实现了这个接口,它就创建了一个PropertyChangedEventHandler的事件对象。
  • 在Calculate方法中用PropertyChanged对象来引发事件,并且在这里面表示哪个属性会被通知。例子中使用的是Tax属性。为了安全起见我们在使用PropertyChanged对象之前先检查它是否为空。
public class CustomerViewModel:INotifyPropertyChanged
{
  ....
public void Calculate()
{
obj.CalculateTax();
OnPropertyChanged(nameof(Tax));
} public event PropertyChangedEventHandler PropertyChanged; [NotifyPropertyChangedInvocator]
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}

  当你运行这个应用时,你应该可以看到当你点击按钮时Tax的值也发生了变化。

[译]WPF MVVM 架构 Step By Step(5)(添加actions和INotifyPropertyChanged接口)的更多相关文章

  1. WPF MVVM 架构 Step By Step(6)(把actions从view model解耦)

    到现在为止,我们创建了一个简单的MVVM的例子,包含了实现了的属性和命令.我们现在有这样一个包含了例如textbox类似的输入元素的视图,textbox用绑定来和view model联系,像点击but ...

  2. WPF MVVM架构 EF、WCF、IOC 设计示例经典

    概要 该演示项目利用WPF应用程序构建的MVVM架构示例, 运用了Unity容器接口注入, MVVM的经典设计, 后台利用的EF+WCF. 后台实现: 从数据库生成的emdx 结合上下文进行数据交互, ...

  3. WPF MVVM 架构 Step By Step(2)(简单的三层架构示例及粘合代码GLUE code)

    我们第一步就是去了解三层架构和问题然后去看MVVM是怎么去解决这些问题的. 现在,感觉和事实是完全不同的两个东西.当你看到三层架构的框图的时候,你会觉得每层的职责被分配的很好.但是当你你真的去写代码的 ...

  4. WPF MVVM 架构 Step By Step(1)(介绍)

    生命就是我们从孩子开始,经过不断的学习成为成熟的成年人的进化过程.这和软件的架构有着异曲同工之妙,我们从基础的架构开始,随着需求和环境的变化不断的进化. 如果你去问任何一个.net开发者,什么是最基础 ...

  5. WPF MVVM 架构 Step By Step(4)(添加bindings - 完全去掉后台代码)

    之前的改进已经挺棒的,但是我们现在知道了后台代码的问题,那是否可能把后台代码全部去除呢?这时候就该WPF binding 和 commands 来做的事情了. WPF就是以超吊的binding,com ...

  6. WPF MVVM 架构 Step By Step(3)(把后台代码移到一个类中)

    我觉得大部分开发者应该已经知道怎么去解决这个问题.一般都是把后台代码(GLUE code)移动到一个类库.这个类库用来代表UI的属性和行为.任何代码当被移到一个类库中时都可以被编译成一个DLL,然后可 ...

  7. WPF学习笔记:(二)数据绑定模式与INotifyPropertyChanged接口

    数据绑定模式共有四种:OneTime.OneWay.OneWayToSource和TwoWay,默认是TwoWay.一般来说,完成数据绑定要有三个要点:目标属性是依赖属性.绑定设置和实现了INotif ...

  8. C# WPF - MVVM实现OPC Client管理系统

    前言 本文主要讲解采用WPF MVVM模式设计OPC Client的过程,算作对于WPF MVVM架构的学习记录吧!不足之处请不吝赐教,感谢! 涉及知识点 C#基础 Xaml基础 命令.通知和数据绑定 ...

  9. WPF Step By Step 系列-Prism框架在项目中使用

    WPF Step By Step 系列-Prism框架在项目中使用 回顾 上一篇,我们介绍了关于控件模板的用法,本节我们将继续说明WPF更加实用的内容,在大型的项目中如何使用Prism框架,并给予Pr ...

随机推荐

  1. Lambda表达式和Lambda表达式树

    LINQ的基本功能就是创建操作管道,以及这些操作需要的任何状态. 为了富有效率的使用数据库和其他查询引擎,我们需要一种不同的方式表示管道中的各个操作.即把代码当作可在编程中进行检查的数据. Lambd ...

  2. Activiti引擎启动失败

    今天部署项目测试时发现activiti启动失败,研究了会才把问题解决!! 错误信息:SEVERE: problem during schema create, statement create seq ...

  3. 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字。 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值。这里保证n小于10的100次幂。 输出格式:在一行内输出n的各位数字之和的每一位,拼音数字间有1 空格,但一行中最后一个拼音数字后没有空格。 输入样例: 1234567890987654321123456789 输出样例: yi san wu

    这是PAT中的一道练习题 刚开始的时候我想着直接定义正整数n,结果走了很大的弯路,因为题目中要求n小于10的100次幂,即最大的正整数n有100位,而C语言中整型数字最大占8个字节的存储空间,如果按无 ...

  4. OC中Foundation框架之NSDictionary、NSMutableDictionary

    NSDictionary概述 NSDictionary的作用类似:通过一个key ,就能找到对应的value 同样 NSDictionary是不可变的,一旦初始化完毕,里面的内容就无法修改 NSDic ...

  5. MNIST机器学习

    MNIST是一个入门级的计算机视觉数据集,它包含各种手写数字图片: 1. MNIST数据集 MNIST,是不是听起来特高端大气,不知道这个是什么东西? == 手写数字分类问题所要用到的(经典)MNIS ...

  6. 深入浅出新一代云网络——VPC中的那些功能与基于OpenStack Neutron的实现(一)

    VPC的概念与基于vxlan的overlay实现很早就有了,标题中的"新"只是一个和传统网络的相对概念.但从前年开始,不同于以往基础网络架构的新一代SDN网络才真正越来越多的走进国 ...

  7. 【JAVAWEB学习笔记】22_ajax

    Js原生Ajax和Jquery的Ajax 学习目标 案例1-异步校验用户名是否存在 案例2-站内查询 一.Ajax概述 1.什么是同步,什么是异步 同步现象:客户端发送请求到服务器端,当服务器返回响应 ...

  8. 用C语言模仿Python函数

    首先得说明一点,C 语言不是函数式编程语言,要想进行完全的函数式编程,还得先写个虚拟机,然后再写个解释器才行(相当于 CPython ). 下面我们提供一个例子,说明 C 语言函数可以"适度 ...

  9. 回归-LDA与QDA

    作者:桂. 时间:2017-05-23  06:37:31 链接:http://www.cnblogs.com/xingshansi/p/6892317.html 前言 仍然是python库函数sci ...

  10. 如何在Elasticsearch中安装中文分词器(IK)和拼音分词器?

    声明:我使用的Elasticsearch的版本是5.4.0,安装分词器前请先安装maven 一:安装maven https://github.com/apache/maven 说明: 安装maven需 ...