在WPF的MVVM模式中,View和ViewModel之间数据和命令的关联都是通过绑定实现的,绑定后View和ViewModel并不产生直接的依赖。具体就是View中出现数据变化时会尝试修改绑定的目标。同样View执行命令时也会去寻找绑定的Command并执行。反过来,ViewModel在Property发生改变时会发个通知说“名字叫XXX的Property改变了,你们这些View中谁绑定了XXX也要跟着变啊!”,至于有没有View收到是不是做出变化也不关心。ViewModel中的Command脱离View就更简单了,因为Command在执行操作过程中操作数据时,根本不需要操作View中的数据,只需要操作ViewModel中的Property就可以了,Property的变化通过绑定就可以反映到View上。这样在测试Command时也不需要View的参与。这也是我在接触WPF初期时根本理解不了的所谓数据驱动。

这样一来ViewMode可以在完全没有View的情况下测试,View也可以在完全没有ViewModel的情况下测试(当然只是测试界面布局和动画等业务无关的内容)。

1、App中的代码:

public App()

{

    CalculatorView view = new CalculatorView();

    view.DataContext = new CalculatorViewModel();

    view.Show();

}

2、Model层中CauculatorModel的代码

class CauculatorModel

{

     public string FirstOperand { getset; }

     public string SecondOperand { getset; }

     public string Operation { getset; }

     public string Result { getset; }

}

3、Command

public class DeletgateCommand<T>:ICommand

 {

     private readonly Action<T> _executeMethod = null;

     private readonly Func<T,bool> _canExecuteMethod = null;

     public DeletgateCommand(Action<T> executeMethod)

         this(executeMethod, null)

     { }

     public DeletgateCommand(Action<T> executeMethod, Func<T,bool> canExecuteMethod) 

     {

         if (executeMethod == null)

             throw new ArgumentNullException("executeMetnod");

         _executeMethod = executeMethod;

         _canExecuteMethod = canExecuteMethod;

     }

     #region ICommand 成员

     /// <summary>

     ///  Method to determine if the command can be executed

     /// </summary>

     public bool CanExecute(T parameter)

     {

         if (_canExecuteMethod != null)

         {

             return _canExecuteMethod(parameter);

         }

         return true;

     }

     /// <summary>

     ///  Execution of the command

     /// </summary>

     public void Execute(T parameter)

     {

         if (_executeMethod != null)

         {

             _executeMethod(parameter);

         }

     }

     #endregion

     event EventHandler ICommand.CanExecuteChanged

     {

         add { CommandManager.RequerySuggested += value; }

         remove { CommandManager.RequerySuggested -= value; }

     }

     #region ICommand 成员

     public bool CanExecute(object parameter)

     {

         if (parameter == null && typeof(T).IsValueType)

         {

             return (_canExecuteMethod == null);

         }

         

         return CanExecute((T)parameter);

     }

     public void Execute(object parameter)

     {

         Execute((T)parameter);

     }

     #endregion

 }

4、ViewModwl层,为了简化,此处Add方法采用硬编码的形式

public class CalculatorViewModel

 {

     CauculatorModel calculatorModel;

     private DeletgateCommand<string> addCommand;

     

     public CalculatorViewModel()

     {

         calculatorModel = new CauculatorModel();

     }

     #region Public Properties

     public string FirstOperand

     {

         get {  return calculatorModel.FirstOperand;  }

         set { calculatorModel.FirstOperand = value;  }

     }

     public string SecondOperand

     {

         get return calculatorModel.SecondOperand; }

         set { calculatorModel.SecondOperand = value; }

     }

     public string Operation

     {

         get return calculatorModel.Operation; }

         set { calculatorModel.Operation = value; }

     }

     public string Result

     {

         get return calculatorModel.Result; }

         set { calculatorModel.Result = value; }

     }

     #endregion

     public ICommand AddCommand

     {

         get

         {

             if (addCommand == null)

             {

                 addCommand = new DeletgateCommand<string>(Add, CanAdd);

             }

             return addCommand;

         }

     }

        

     public  void Add(string x)

     {

         FirstOperand = x;

         SecondOperand = x;

         Result = (double.Parse(FirstOperand) + double.Parse(SecondOperand)).ToString();

         Operation = "+";

         MessageBox.Show( FirstOperand+ Operation +SecondOperand +"=" + Result);

     }

     private static bool CanAdd(string num)

     {

         return true;

     }

 }

ViewModelBase中的代码:

public abstract class ViewModelBase : INotifyPropertyChanged

 {

     public event PropertyChangedEventHandler PropertyChanged;

     protected void OnPropertyChanged(string propertyName)

     {

         PropertyChangedEventHandler handler = PropertyChanged;

         if (handler != null)

         {

             handler(thisnew PropertyChangedEventArgs(propertyName));

         }

     }

 }

5、View层

<Grid>   

       <TextBox  Height="23" Margin="12,63,0,0" Name="textBox1" VerticalAlignment="Top" HorizontalAlignment="Left"  Width="120" />

       <Label Margin="12,25,95,0" Name="label2" Height="32" VerticalAlignment="Top">请输入x的值! x+x=? </Label>

       <Button Height="23" Command="{Binding AddCommand}"

               CommandParameter="{Binding ElementName=textBox1,Path=Text}"   HorizontalAlignment="Left" Margin="12,102,0,0" Name="button1" VerticalAlignment="Top" Width="75">

           确定</Button>

   </Grid>

CommandParameter里传递的是一个参数,当然可以传递多个参数。

MVVM MVC的更多相关文章

  1. MVP MVVM MVC

    上一篇得到大家的关注,非常感谢.由于自己对于这些模式的理解也是有限,对于MVC,MVP,MVVM这些模式的比较,是结合自己的理解,一些地方不一定准确,需要的朋友可以参考下 上一篇得到大家的关注,非常感 ...

  2. 转: GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean

    十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...

  3. Extjs6官方文档译文——应用架构简介(MVC,MVVM)

    应用架构简介 Extjs 同时提供对于MVC和MVVM应用架构的支持.这两个架构方式共享某些概念,而且都旨在沿着逻辑层面划分应用程序代码.每种方法在选择如何划分应用组件上都有其各自的优势. 本指南的目 ...

  4. [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan ------------------ ...

  5. MVC,MVP,MVVM区别联系

    本质上都是MVC,MVC在不同技术中的应用衍生出MVP,MVVM MVC:b/s MVP:c/s,尤其winform MVVM:wpf http://www.codeproject.com/Artic ...

  6. 浅谈MVC和MVVM模式

    MVC I’m dating with a model… and a view, and a controller. 众所周知,MVC 是开发客户端最经典的设计模式,iOS 开发也不例外,但是 MVC ...

  7. 架构模式:MVC与MVVM

    本文探讨如下几个问题: 什么是MVC 什么是MVVM MVC与MVVM对架构属性的影响 MVC实例SpringMVC MVVM实例Vue MVC.MVVM与Layer中的Model,Controlle ...

  8. GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean

    十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...

  9. [ExtJS5学习笔记]第九节 Extjs5的mvc与mvvm框架结构简单介绍

    本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan ------------------ ...

随机推荐

  1. 关于linq中的dbml文件中的对象加s去s的问题

    点击工具->选项->数据库工具->O/R Designer ,右面有个启用,如果是true

  2. javascript-object对象属性操作之Object.defineProperty

    一.基本用法简介 声明一个简单的对象,如下 var obj = { name: 'ldld' } 我们可以用Object.defineProperty来声明这个对象 var obj = {} Obje ...

  3. python web自动化测试框架搭建(功能&接口)——功能测试模块

    功能测试使用selenium,模块有: 1.futil: 公共方法,如元素高亮显示 # coding=utf-8 """高亮显示元素""" ...

  4. sysbench - 数据库功能及性能测试工具

    sysbench 的 GitHub 参考资料 1.0 之后的版本使用方法跟之前的有所区别,下面所有内容基于 1.0.9 版本. 另外,为了方便管理测试,最好不要通过命令直接运行测试,而是写成脚本自动化 ...

  5. vue双花括号的使用

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 《JAVA设计模式》之组合模式(Composite)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述合成(Composite)模式的: 合成模式属于对象的结构模式,有时又叫做“部分——整体”模式.合成模式将对象组织到树结构中,可以用来描述 ...

  7. Python入门习题9.数码管时间

    #七段数码管.py import turtle,datetime def drawGap(): #绘制数码管间隔 turtle.penup() turtle.fd(5) def drawLine(dr ...

  8. P3452 [POI2007]BIU-Offices(链表+bfs)

    P3452 [POI2007]BIU-Offices 新姿势:链表存图快速删除 显然两个没有直接相连的点要放到同一个集合里 但是直接搞一个图的补图会挂掉 考虑用链表维护点序列 每次bfs删除一个点和与 ...

  9. 华为Android手机打开Log

    华为Android手机打开Log, 显示日志方法 今天在华为u8650上调试应用程序时,发现Eclipse的log始终无法显示,在网上找了好多资料,甚至stack overflow也查了,最后终于找到 ...

  10. 74.Maximal Rectangle(数组中的最大矩阵)

    Level:   Hard 题目描述: Given a 2D binary matrix filled with 0's and 1's, find the largest rectangle con ...