开发工具:

VS2010

Blend

Prism框架

基本概念:

数据绑定,依赖属性,依赖对象

WPF 委托式命令 Icommand接口

Lambda表达式

MVVM(Model-View-ViewModel)介绍:

{

View=UI;

Model=抽象事物;

Viewmodel=Model for View;即View的建模

}

ViewMode与前台View传递的方法

{

传递数据-数据属性(双向)

传递操作-命令属性(单向,只能从View传递给ViewMode)

}

开闭原则(OCP):对于扩展是开放的(Open for extension)

对于修改是关闭的(Closed for modification)

也就是说,如果项目使用了MVVM模型,前台UI和后台代码是完全分离的,也就是说,不管前台的界面如何根据客户需求而改变,只要前台界面没有本质改变,也就是说,前台界面的输入输出映射关系没有改变,那么后台代码就是不用修改的。

后台代码应该完全与前台界面元素无关,也不引用前台界面元素的属性。后台代码只实现业务逻辑,实现与前台的分离。

通过实现INotificationt将数据的改动传递给Binding,来改变View,实际上就是Binding在监听着ViewModel是否有改变。

例子:

为了简单起见,下面的代码只实现最简单的功能,没有异常判断。按钮Add实现两个TextBox相加,并将加和显示在第三个TextBox上

Xaml实现该界面较为简单,这里不赘述。

上文中提到,使用MVVM模型应当使界面与后台代码解耦。如何实现呢?

数据属性定义:

    class NotificationObject : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}
}

  首先我们实现了NotificationObject 类,这个类派生自INotifyPropertyChanged这个接口,用来向客户端发出某一属性值已更改的通知。

这个接口中有一个PropertyChanged事件,在更改属性值时发生。我们在此类中实现RaisePropertyChanged()方法,用来对此事件进行封装。Sender=this指向自己。EventArgs=new PropertyChangedEventArgs(propertyName) 用来告诉Binding具体哪个属性发生了改变。这里即propertyName。

这个类就是ViewModel的基类。

命令属性定义:

    class DelegateCommand:ICommand
{
public bool CanExecute(object parameter)
{
if (this.CanExecuteFunc==null)
{
return true;
}
return this.CanExecuteFunc(parameter);
} public void Execute(object parameter)
{
if (this.ExecuteAction==null)
{
return;
}
this.ExecuteAction(parameter);
}
public Func<object,bool> CanExecuteFunc { get; set; } public Action<object> ExecuteAction { get; set; } public event EventHandler CanExecuteChanged;
}

  

我们实现了一个名叫DelegateCommand的委托命令。派生自ICommand接口。这个接口主要有两个方法,bool CanExecute(object parameter)和public void Execute。

我们自己声明一个Action类型的属性ExecuteAction,ExecuteAction是一种委托。并在Execute中调用它。

相当于我们把DelegateCommand这个命令所要执行的的事情委托给了ExecuteAction这个委托所指向的方法。

好了,抽象出来的ViewModel已经完成了。

下面我们来实现开头提到的,按钮Add实现两个TextBox相加,并将加和显示在第三个TextBox上

我们需要两个数据属性Input1,Input2来进行法,一个数据属性来存储加和 Result。

同样我们还需要一个命令属性来进行加法命令。

整理出这些,我们就可以MainWindow建立它的ViewModel类,代码如下

class ViewModelMainClass : NotificationObject
{
private double input1; public double Input1
{
get { return input1; }
set
{
input1 = value;
this.RaisePropertyChanged("Input1");
}
} private double input2; public double Input2
{
get { return input2; }
set
{
input2 = value;
this.RaisePropertyChanged("Input2");
}
} private double result; public double Result
{
get { return result; }
set
{
result = value;
this.RaisePropertyChanged("Result");
}
} public DelegateCommand AddCommand { get; set; } private void Add(object parameter)
{
this.Result = this.Input1 + this.Input2;
} public ViewModelMainClass()
{
this.AddCommand = new DelegateCommand();
this.AddCommand.ExecuteAction=new Action<object>(this.Add);
}
}

  如上所示,Input1,Input2,Result用来存储加法的两个数及其求和结果,同样我们定义了命令AddCommand,用来进行求和。

在构造函数中,我们为属性AddCommand新建一个DelegateCommand实例,然后为ExecuteAction委托添加Add方法。

到此为此,我们的工作已经是完成了。编译通过。下面要做的工作就是在前台界面上将前台界面元素的属性绑定上去,就OK了。

代码如下:

<Window x:Class="WpfMVVM.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="350">
    <Grid>
        <TextBox Text="{Binding Input1}" x:Name="tb1" Height="60" Background="LemonChiffon" Margin="10,0,10,240"/>
        <TextBox Text="{Binding Input2}" x:Name="tb2" Height="60" Background="LemonChiffon" Margin="10,70,10,180" />
        <TextBox Text="{Binding Result}" x:Name="tb3" Height="60" Background="LemonChiffon" Margin="10,140,10,120"/>
        <Button x:Name="bt1" Command="{Binding AddCommand}" Margin="0,240,0,0">Add</Button>
    </Grid>
</Window>

  最后,我们为Window设置DateContext,绑定会自动去查找并设置为自己的Source

        public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModelMainClass();
}

  再次编译,运行,可以看到:

代码下载:http://download.csdn.net/detail/wudidagou/6324185

Prism - WPF MVVM(Model-View-ViewModel)设计模式【学习】的更多相关文章

  1. WPF MVVM 如何在ViewModel中操作View中的控件事件

    (在学习Wpf的时候,做一个小例子,想在TextBox改变后,检验合法性,并弹出提示.在找了很多贴后,发现这个小例子,抄袭过来,仅供参考. 最后也找到了适合自己例子的办法:在出发TextChanged ...

  2. WPF MVVM中在ViewModel中关闭或者打开Window

    这篇博客将介绍在MVVM模式ViewModel中关闭和打开View的方法. 1. ViewModel中关闭View public class MainViewModel { public Delega ...

  3. WPF MVVM 关闭View

    在ViewModel中定义一个变量: private Action _closeAction; 在ViewModel的构造函数中这样定义:public MainWindowViewModel(Acti ...

  4. WPF/MVVM Quick Start Tutorial - WPF/MVVM 快速入门教程 -原文,翻译及一点自己的补充

    转载自 https://www.codeproject.com/articles/165368/wpf-mvvm-quick-start-tutorial WPF/MVVM Quick Start T ...

  5. WPF/MVVM 快速开发

    http://www.codeproject.com/Articles/165368/WPF-MVVM-Quick-Start-Tutorial 这篇文章醍醐灌顶,入门良药啊! Introductio ...

  6. WPF MVVM 验证

    WPF MVVM(Caliburn.Micro) 数据验证 书接前文 前文中仅是WPF验证中的一种,我们暂且称之为View端的验证(因为其验证规是写在Xaml文件中的). 还有一种我们称之为Model ...

  7. [转]WPF/MVVM快速开始手册

    I will quickly introduce some topics, then show an example that explains or demonstrates each point. ...

  8. WPF MVVM(Caliburn.Micro) 数据验证

    书接前文 前文中仅是WPF验证中的一种,我们暂且称之为View端的验证(因为其验证规是写在Xaml文件中的). 还有一种我们称之为Model端验证,Model通过继承IDataErrorInfo接口来 ...

  9. WPF MVVM 从Prism中学习设计模式之Event Aggregator 模式

    Prism简介 Prism是由微软Patterns & Practices团队开发的项目,目的在于帮助开发人员构建松散耦合的.更灵活.更易于维护并且更易于测试的WPF应用或是Silverlig ...

随机推荐

  1. Chrome 建立SOCKS5代理

    前提是putty已经在7090端口和远程服务器建立隧道. 假设你的chrome浏览器位于"C:\Program Files (x86)\Google\Chrome\Application\c ...

  2. VPN client on linux debian

    Install the pptp-linux and pptp-linux-client: sudo apt-get install pptp-linux pptp-linux-client Crea ...

  3. MembershipProvider的Initialize

    背景 前几天为公司的登陆写密码校验,因为是老系统的东西了,数据已经存在了,所以我要知道密码的校验规则是啥,然后业务经理告诉我了是用Membership去做的加密,让我自己去看.之后我又去问了技术经理, ...

  4. php 开启缓冲,页面纯静态化

    服务器默认不开启php缓冲区 两种方法开启 1.php.ini out_put_buffer = on 2.ob_start(); 页面纯静态化 file_put_contents()写文件 ob_s ...

  5. Django操作数据库

    引入models的定义 from app.models import  myclass class  myclass():      aa =  models. CharField (max_leng ...

  6. About building ant & install ant on centos7 {ant source code 1.94}

                  hamcrest-junit-2.0.0.0.jar java-hamcrest-2.0.0.0.jar   copy to ant-sourceCodeDir/lib/o ...

  7. Nginx+uWSGI+bottle 在Linux上部署

    在/data/lujianxing/bottle 文件夹中创建三个文件: bottle.py bottle的源文件 a.py from bottle import Bottle, run mybott ...

  8. 对 APM 用户的一次真实调查分析(上)

    一.前言 国内的 APM 行业这两年刚刚起步,但是在国外却比较成熟了,并且由于这两年人力成本的快速提高,国内外涌现了几家非常不错的 APM 企业,例如,OneAPM,APPdynamic,Dynami ...

  9. maven 项目编译时候提示:Error building POM (may not be this project's POM).

    编译时候提示Error building POM (may not be this project's POM)的错误,具体信息如下: [0] 'dependencies.dependency.ver ...

  10. Linux中断处理流程

    http://blog.csdn.net/dianhuiren/article/details/7468956