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

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

  但是在上面的架构中有一个问题,command类和view model有很严重的耦合。如果你记得command类的代码(在下面也有展示),在构造函数中传递view model对象,意味着这个command 类不能再其他的view model中重用。

public class ButtonCommand:ICommand
{
        private CustomerViewModel _obj;

        public ButtonCommand(CustomerViewModel obj)
        {
            _obj = obj;
        }
......
......
}

  但是我们现在思考下什么是一个行为。它是一个来自于最终用户的像鼠标点击,按钮点击,菜单点击,按功能键等这样的事件。因此应该有一个方法去总结这些行为并且把他们用一个更通用的方式附加到view model里。

  如果你认为逻辑行为是包含在方法和函数中的逻辑,那么什么是一个公用的方法去指向方法和函数呢?想想,那就是委托。

  我们需要2个委托,一个用来CanExecute,另一个用来Execute。CanExecute返回一个布尔类型的值,因此用来验证,然后基于验证来允许和禁止用户接口。Execute当canexecute为真时执行。

public class ButtonCommand:ICommand
    {
        public bool CanExecute(object parameter)
        {
            //验证代码
        }

        public void Execute(object parameter)
        {
            //执行逻辑
        }
    }

  换句话来说,我们需要2个委托,1个返回布尔值的函数其他一个action返回空。因此正好我们可以创建一个func和一个action。通过用委托的方式,我们试着来创建一个通用的类。在command类中我们做了如下3个改变:

  • 我们把构造函数中移走view model的对象,输入变为2个委托,一个是Func一个是Action。Func用来验证,Action用来执行。2个委托的值都通过构造函数来传递再传给类的私有变量。
  • Func 委托 = CanExecute
  • Action 委托 = What To Execute
public class ButtonCommand:ICommand
    {
        private Action _whatToExecute;
        private Func<bool> _whenToExecute;
        public ButtonCommand(Action what,Func<bool> when )
        {
            _whatToExecute = what;
            _whenToExecute = when;
        }
        public bool CanExecute(object parameter)
        {
            return _whenToExecute();
        }

        public void Execute(object parameter)
        {
            _whatToExecute();
        }

        public event EventHandler CanExecuteChanged;
    }

  在model中,我们已经知道What to execute - CalculateTax,我们用了一个简单的函数(IsValid)用来验证customer类是否可用。

 public class Customer
    {
        public void CalculateTax()
        {
            if (Amount > 2000)
            {
                _Tax = 20;
            }
            else if (Amount > 1000)
            {
                _Tax = 10;
            }
            else
            {
                _Tax = 5;
            }
        }

        public bool IsValid()
        {
            return Amount != 0;
        }
    }

  在view model类,我们传递2个参数,一个Func,一个Action。

public class CustomerViewModel:INotifyPropertyChanged
{
        private readonly ButtonCommand _objButtonCommandCommand;

        public CustomerViewModel()
        {
            _objButtonCommandCommand=new ButtonCommand(obj.CalculateTax,obj.IsValid);
        }

        public ICommand CalClick => _objButtonCommandCommand;

        private Customer obj = new Customer();
}

  这让架构变得更好而且因为command类能用通用的方法和任何view model来结合使用而解耦。下面就是改善后的架构,注意现在view model怎么和command类通过委托来通信的。

  PRISM是一个MVVM架构中不错的框架。PRISM主要的用处是用来模块化开发,它有一个不错的delegateCommand类,比我们自己创建自己的command类要好不少。

  PRISM: http://www.microsoft.com/en-in/download/details.aspx?id=42537

  WPF MVVM Step By Step 原文: http://www.codeproject.com/Articles/819294/WPF-MVVM-step-by-step-Basics-to-Advance-Level

时间: 2024-11-08 20:07:16

WPF MVVM 架构 Step By Step(6)(把actions从view model解耦)的相关文章

[译]WPF MVVM 架构 Step By Step(5)(添加actions和INotifyPropertyChanged接口)

原文:[译]WPF MVVM 架构 Step By Step(5)(添加actions和INotifyPropertyChanged接口) 应用不只是包含textboxs和labels,还包含actions,如按钮和鼠标事件等.接下来我们加上一些像按钮这样的UI元素来看MVVM类怎么演变的.与之前的UI相比,这次我们加上一个"Cal Tax"按钮,当我们点击这个依赖于“sales amount”的按钮时,它会计算税费并显示在同窗口内. 为了完成所述的功能,我们先在Model类中添加一个

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

原文:WPF MVVM 架构 Step By Step(4)(添加bindings - 完全去掉后台代码) 之前的改进已经挺棒的,但是我们现在知道了后台代码的问题,那是否可能把后台代码全部去除呢?这时候就该WPF binding 和 commands 来做的事情了. WPF就是以超吊的binding,commans和声明式编程而闻名的.声明式编程意思就是相比于全部用C#代码来写,我们也可以用XAML来表示c#代码.Binding可以帮助我们把2个不同的WPF对象连接起来来发送和接收数据. 你看到

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

我们第一步就是去了解三层架构和问题然后去看MVVM是怎么去解决这些问题的. 现在,感觉和事实是完全不同的两个东西.当你看到三层架构的框图的时候,你会觉得每层的职责被分配的很好.但是当你你真的去写代码的时候你会发现其实一些层被迫去做本不应该他们做的额外的事情(违反了SOLID原则的S). 这个额外的工作就是在UI-Model和Model-Data access之间的代码.让我们就把这些代码称为“GLUE”代码.有两种主要的逻辑会造成“GLUE”代码(也许我知道的并不够多,其他的可以自己发现): 1

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

WPF Step By Step 系列-Prism框架在项目中使用 回顾 上一篇,我们介绍了关于控件模板的用法,本节我们将继续说明WPF更加实用的内容,在大型的项目中如何使用Prism框架,并给予Prism框架来构建基础的应用框架,并且如何来设计项目的架构和模块,下面我们就来一步步开始吧. 本文大纲 1.Prism框架下载和说明 2.Prism项目预览及简单介绍. 3.Prism框架如何在项目中使用. Prism框架下载和说明 Prism框架是针对WPF和Silverlight的MVVM框架,这

WPF Step By Step 自定义模板

WPF Step By Step 自定义模板 回顾 上一篇,我们简单介绍了几个基本的控件,本节我们将讲解每个控件的样式的自定义和数据模板的自定义,我们会结合项目中的具体的要求和场景来分析,给出我们实现的方案和最终的运行效果. 本文大纲 1.控件模板及数据模板 2.ListBox深度定制模板. 3.TreeView高级模板使用实例. 控件模板及数据模板 控件模板 什么是控件模板,指定可以在控件的多个实例之间共享 Control 的可视结构和性能方面的方面.控件模板其实就是我们在可视方面的自定义模板

WPF Step By Step 控件介绍

WPF Step By Step 控件介绍 回顾 上一篇,我们主要讨论了WPF的几个重点的基本知识的介绍,本篇,我们将会简单的介绍几个基本控件的简单用法,本文会举几个项目中的具体的例子,结合这些 例子,希望我们可以对WPF的掌握会更深刻.本文涉及的内容可能较多.请大家慢慢看看.错误之处,还请指出. 本文大纲 1.基本控件介绍与用法. 基本控件介绍与用法 文本控件 Label控件 label控件:一般用户描述性文字显示. 在Label控件使用时,一般给予用户提示.用法上没有什么很特殊的,label

C++开发WPF,Step by Step

示例代码 使用C++来开发WPF,主要是如何在MFC(Win32)的窗口中Host WPF的Page.下面我就做个详细的介绍. 一.创建工程, 由于MFC的Wizard会生成很多用不到的代码,所以我准备从一个空的工程开始创建一个MFC的工程. a)         打开VS2005,菜单File->New->Projects-, 左面选择Visual C++->Win32,右面选择Win32 Console Application,给工程起个名字CPlusPlus_WPF, Ok进入下一

WPF Step By Step 完整布局介绍

WPF Step By Step 完整布局介绍 回顾 上一篇,我们介绍了基本控件及控件的重要属性和用法,我们本篇详细介绍WPF中的几种布局容器及每种布局容器的使用场景,当 然这些都是本人在实际项目中的使用经验,可能还存在错误之处,还请大家指出. 本文大纲 1.Grid 2.StackPanel 3.DockPanel 4.WrapPanel Grid 1.Row和Column 我们下面来介绍Grid的行的用法,及我们在UI设计过程中需要注意的细节. 由于前面我们在第一章中已经介绍了基本的关于Gr

e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (四) Q 反回调

上一篇文章“e2e 自动化集成测试 架构 京东 商品搜索 实例 WebStorm Node.js Mocha WebDriverIO Selenium Step by step (三) SqlServer数据库的访问” 下面讲一下,对于在写Node.js自动化测试脚本过程中,的编写回调问题, 大家可能会发现, Node.js对于高并发处理的性能非常不错, 即使是在使用单核的情况下, 那是因为它是基于事情,说白了就是callback, 回调. 这样的话,对于写代码的人来说, 回调的深度一深就会晕了