- 浏览: 194116 次
- 性别:
- 来自: 成都
文章分类
- 全部博客 (231)
- C++学习 (41)
- vc学习 (25)
- vc异常 (4)
- Flex (2)
- Ext (0)
- java学习笔记 (15)
- mysql学习笔记 (1)
- ibatis学习笔记 (7)
- struts1学习笔记 (1)
- hibernate学习笔记 (3)
- javascript学习笔记 (8)
- eclipse快捷键 (2)
- 英语学习 (1)
- cmd (1)
- eclipse 配置 (2)
- 其他 (4)
- JAVASE (34)
- firefox (1)
- linux (8)
- Apache (6)
- cms (22)
- jsuc (10)
- html (3)
- css (1)
- 作图 (2)
- vs2012 (2)
- 编码转换 (12)
- work_unicode (1)
- work_webbrowser (1)
- work_trade_quotes_login (1)
- c#学习 (38)
- wpf学习 (31)
- wpf快速学习 (1)
- VB学习 (1)
- NSIS (4)
- log4cpp (3)
- 学习web (1)
- 经验 (1)
- c_汇编 (1)
最新评论
WPF经典编程模式-MVVM示例讲解
本篇从两个方面来讨论MVVM模式:
1. MVVM理论知识
2. MVVM示例讲解
一,MVVM理论知识
从上一篇文章中,我们已经知道,WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的,WPF提供了数据绑定机制,当数据发生变化时,WPF会自动发出通知去更新UI。
我们使用模式,一般是想达到高内聚低耦合。在WPF开发中,经典的编程模式是MVVM,是为WPF量身定做的模式,该模式充分利用了WPF的数据绑定机制,最大限度地降低了Xmal文件和CS文件的耦合度,也就是UI显示和逻辑代码的耦合度,如需要更换界面时,逻辑代码修改很少,甚至不用修改。与WinForm开发相比,我们一般在后置代码中会使用控件的名字来操作控件的属性来更新UI,而在WPF中通常是通过数据绑定来更新UI;在响应用户操作上,WinForm是通过控件的事件来处理,而WPF可以使用命令绑定的方式来处理,耦合度将降低。
我们可以通过下图来直观的理解MVVM模式:
User Input
View
View Model
Model
View就是用xaml实现的界面,负责与用户交互,接收用户输入,把数据展现给用户。
ViewModel,一个C#类,负责收集需要绑定的数据和命令,聚合Model对象,通过View类的DataContext属性绑定到View,同时也可以处理一些UI逻辑。
Model,就是系统中的对象,可包含属性和行为。
一般,View对应一个ViewModel,ViewModel可以聚合N个Model,ViewModel可以对应多个View,Model不知道View和ViewModel的存在。
二,MVVM示例讲解
这个示例是为了让大家直观地了解MVVM的编程模式,关于其中用到的数据绑定和命令等知识,在后面的文章会专门讨论。
1. 首先定义NotificationObject类。目的是绑定数据属性。这个类的作用是实现了INotifyPropertyChanged接口。WPF中类要实现这个接口,其属性成员才具备通知UI的能力,数据绑定的知识,后面详细讨论。
using System.ComponentModel;
namespace WpfFirst
{
class NotificationObject : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
2.定义DelegateCommand类。目的是绑定命令属性。这个类的作用是实现了ICommand接口,WPF中实现了ICommand接口的类,才能作为命令绑定到UI。命令的知识,后面详细讨论。
using System;
using System.Collections.Generic;
using System.Windows.Input;
namespace WpfFirst
{
class DelegateCommand : ICommand
{
//A method prototype without return value.
public Action<object> ExecuteCommand = null;
//A method prototype return a bool type.
public Func<object, bool> CanExecuteCommand = null;
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
if (CanExecuteCommand != null)
{
return this.CanExecuteCommand(parameter);
}
else
{
return true;
}
}
public void Execute(object parameter)
{
if (this.ExecuteCommand != null) this.ExecuteCommand(parameter);
}
public void RaiseCanExecuteChanged()
{
if (CanExecuteChanged != null)
{
CanExecuteChanged(this, EventArgs.Empty);
}
}
}
}
3.开始定义Model类。一个属性成员"WPF",它就是数据属性,的有通知功能,它改变后,会知道通知UI更新。一个方法“Copy”,用来改变属性“WPF”的值,它通过命令的方式相应UI事件。
using System.ComponentModel;
using System.Windows.Input;
namespace WpfFirst
{
class Model : NotificationObject
{
private string _wpf = "WPF";
public string WPF
{
get { return _wpf; }
set
{
_wpf = value;
this.RaisePropertyChanged("WPF");
}
}
public void Copy(object obj)
{
this.WPF += " WPF";
}
}
}
4.定义ViewModel类。定义了一个命令属性"CopyCmd",聚合了一个Model对象"model"。这里的关键是,给CopyCmd命令指定响应命令的方法是model对象的“Copy”方法。
using System;
namespace WpfFirst
{
class ViewModel
{
public DelegateCommand CopyCmd { get; set; }
public Model model { get; set; }
public ViewModel()
{
this.model = new Model();
this.CopyCmd = new DelegateCommand();
this.CopyCmd.ExecuteCommand = new Action<object>(this.model.Copy);
}
}
}
5.定义View.
MainWindow.xaml代码:我们能看到,TextBlock控件的text属性,绑定在model对象的WPF属性上; Button的click事件通过命令绑定到CopyCmd命令属性。
<Window x:Class="WpfFirst.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<StackPanel VerticalAlignment="Center" >
<TextBlock Text="{Binding model.WPF}" Height="208" TextWrapping="WrapWithOverflow"></TextBlock>
<Button Command="{Binding CopyCmd}" Height="93" Width="232">Copy</Button>
</StackPanel>
</Grid>
</Window>
MainWindow.xaml.cs代码:它的工作知识把ViewModel对象赋值到DataContext属性,指定View的数据源就是这个ViewModel。
using System.Windows;
namespace WpfFirst
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
}
}
6.运行结果。每当我们点击按钮,界面就是被更新了,因为Copy方法改变了WFP属性的值。
写这个简单的例子,就是为了直观地了解MVVM的编程模式。在实际开发中,不管程序有多复杂,也就是增加Model, View, ViewModel,和其他的一些辅助类(Helpers or Services)了,模式不会改变。
本篇从两个方面来讨论MVVM模式:
1. MVVM理论知识
2. MVVM示例讲解
一,MVVM理论知识
从上一篇文章中,我们已经知道,WPF技术的主要特点是数据驱动UI,所以在使用WPF技术开发的过程中是以数据为核心的,WPF提供了数据绑定机制,当数据发生变化时,WPF会自动发出通知去更新UI。
我们使用模式,一般是想达到高内聚低耦合。在WPF开发中,经典的编程模式是MVVM,是为WPF量身定做的模式,该模式充分利用了WPF的数据绑定机制,最大限度地降低了Xmal文件和CS文件的耦合度,也就是UI显示和逻辑代码的耦合度,如需要更换界面时,逻辑代码修改很少,甚至不用修改。与WinForm开发相比,我们一般在后置代码中会使用控件的名字来操作控件的属性来更新UI,而在WPF中通常是通过数据绑定来更新UI;在响应用户操作上,WinForm是通过控件的事件来处理,而WPF可以使用命令绑定的方式来处理,耦合度将降低。
我们可以通过下图来直观的理解MVVM模式:
User Input
View
View Model
Model
View就是用xaml实现的界面,负责与用户交互,接收用户输入,把数据展现给用户。
ViewModel,一个C#类,负责收集需要绑定的数据和命令,聚合Model对象,通过View类的DataContext属性绑定到View,同时也可以处理一些UI逻辑。
Model,就是系统中的对象,可包含属性和行为。
一般,View对应一个ViewModel,ViewModel可以聚合N个Model,ViewModel可以对应多个View,Model不知道View和ViewModel的存在。
二,MVVM示例讲解
这个示例是为了让大家直观地了解MVVM的编程模式,关于其中用到的数据绑定和命令等知识,在后面的文章会专门讨论。
1. 首先定义NotificationObject类。目的是绑定数据属性。这个类的作用是实现了INotifyPropertyChanged接口。WPF中类要实现这个接口,其属性成员才具备通知UI的能力,数据绑定的知识,后面详细讨论。
using System.ComponentModel;
namespace WpfFirst
{
class NotificationObject : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public void RaisePropertyChanged(string propertyName)
{
if (this.PropertyChanged != null)
{
this.PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
}
}
}
}
2.定义DelegateCommand类。目的是绑定命令属性。这个类的作用是实现了ICommand接口,WPF中实现了ICommand接口的类,才能作为命令绑定到UI。命令的知识,后面详细讨论。
using System;
using System.Collections.Generic;
using System.Windows.Input;
namespace WpfFirst
{
class DelegateCommand : ICommand
{
//A method prototype without return value.
public Action<object> ExecuteCommand = null;
//A method prototype return a bool type.
public Func<object, bool> CanExecuteCommand = null;
public event EventHandler CanExecuteChanged;
public bool CanExecute(object parameter)
{
if (CanExecuteCommand != null)
{
return this.CanExecuteCommand(parameter);
}
else
{
return true;
}
}
public void Execute(object parameter)
{
if (this.ExecuteCommand != null) this.ExecuteCommand(parameter);
}
public void RaiseCanExecuteChanged()
{
if (CanExecuteChanged != null)
{
CanExecuteChanged(this, EventArgs.Empty);
}
}
}
}
3.开始定义Model类。一个属性成员"WPF",它就是数据属性,的有通知功能,它改变后,会知道通知UI更新。一个方法“Copy”,用来改变属性“WPF”的值,它通过命令的方式相应UI事件。
using System.ComponentModel;
using System.Windows.Input;
namespace WpfFirst
{
class Model : NotificationObject
{
private string _wpf = "WPF";
public string WPF
{
get { return _wpf; }
set
{
_wpf = value;
this.RaisePropertyChanged("WPF");
}
}
public void Copy(object obj)
{
this.WPF += " WPF";
}
}
}
4.定义ViewModel类。定义了一个命令属性"CopyCmd",聚合了一个Model对象"model"。这里的关键是,给CopyCmd命令指定响应命令的方法是model对象的“Copy”方法。
using System;
namespace WpfFirst
{
class ViewModel
{
public DelegateCommand CopyCmd { get; set; }
public Model model { get; set; }
public ViewModel()
{
this.model = new Model();
this.CopyCmd = new DelegateCommand();
this.CopyCmd.ExecuteCommand = new Action<object>(this.model.Copy);
}
}
}
5.定义View.
MainWindow.xaml代码:我们能看到,TextBlock控件的text属性,绑定在model对象的WPF属性上; Button的click事件通过命令绑定到CopyCmd命令属性。
<Window x:Class="WpfFirst.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<StackPanel VerticalAlignment="Center" >
<TextBlock Text="{Binding model.WPF}" Height="208" TextWrapping="WrapWithOverflow"></TextBlock>
<Button Command="{Binding CopyCmd}" Height="93" Width="232">Copy</Button>
</StackPanel>
</Grid>
</Window>
MainWindow.xaml.cs代码:它的工作知识把ViewModel对象赋值到DataContext属性,指定View的数据源就是这个ViewModel。
using System.Windows;
namespace WpfFirst
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
}
}
6.运行结果。每当我们点击按钮,界面就是被更新了,因为Copy方法改变了WFP属性的值。
写这个简单的例子,就是为了直观地了解MVVM的编程模式。在实际开发中,不管程序有多复杂,也就是增加Model, View, ViewModel,和其他的一些辅助类(Helpers or Services)了,模式不会改变。
发表评论
-
byte数组直接输出
2016-07-19 11:38 1200byte数组直接输出 BitConverter.ToStrin ... -
wfi:WindowsFormsHost焦点设置
2016-07-05 17:56 523<wfi:WindowsFormsHost> ... -
x:Name
2016-04-25 10:44 409由于“Dameer”是在同一程序集中实现的,您必须设置 x:N ... -
WindowsFormsHost的使用注意
2016-04-25 10:24 1273一使用 1 引用 2 xmlns:wfi ="clr ... -
TextBox滚动条
2016-04-22 16:51 607<TextBox Grid.Row="1& ... -
TextBlock滚动条
2016-04-22 16:49 399<ScrollViewer Name="s ... -
C#_WPF_WPF用户控件库
2016-04-12 11:37 753新建项目》window桌面》WPF用户控件库 -
DependencyProperty.UnsetValue_WPF涉及到资源的嵌套引用,被引用的资源要定义在引用的资源前面
2015-10-27 15:09 1899错误 1 “{DependencyProperty.Unset ... -
string格式的日期时间字符串转为DateTime类型
2015-08-05 14:22 909string格式的日期时间字符串转为DateTime类型 / ... -
checkbox
2015-07-28 17:18 496private void Chec ... -
自定义DataGrid样式
2015-06-26 22:03 697<ResourceDictionary xmlns=&q ... -
x:Name x:Key Name区别
2015-06-25 15:40 551x:Name x:Key Name区别 1、x:Key 只 ... -
work_代码添加
2015-06-23 17:15 466<UserControl x:Class=" ... -
FindName和VisualTreeHelper
2015-06-19 13:23 715int iCount = this.dataGridCan ... -
理解WPF中的视觉树和逻辑树(转载)
2015-06-19 13:00 548理解WPF中的视觉树和逻辑树 理解WPF中的 ... -
理解WPF中的视觉树和逻辑树(转载)
2015-06-19 12:58 1586理解WPF中的视觉树和逻 ... -
GetEnumerator
2015-06-19 12:39 607IEnumerator enumerator = this ... -
资源文件获取配置
2015-06-18 16:03 334object obj = Application.Curren ... -
Pack URI
2015-06-18 15:41 647主要用来定位 资源文 ... -
wpf学习之ObservableCollection<T>相关知识
2015-04-23 11:10 3259本篇学习了ObservableCollection<T& ...
相关推荐
在WPF开发中,经典的编程模式是MVVM,是为WPF量身定做的模式,该模式充分利用了WPF的数据绑定机制,最大限度地降低了Xmal文件和CS文件的耦合度,也就是UI显示和逻辑代码的耦合度,如需要更换界面时,逻辑代码修改很...
在WPF开发中,经典的编程模式是MVVM,是为WPF量身定做的模式,该模式充分利用了WPF的数据绑定机制,最大限度地降低了Xmal文件和CS文件的耦合度,也就是UI显示和逻辑代码的耦合度,如需要更换界面时,逻辑代码修改很...
c#-的WPF---MVVM例子,大家共同学习
在WPF开发中,经典的编程模式是MVVM,是为WPF量身定做的模式,该模式充分利用了WPF的数据绑定机制,最大限度地降低了Xmal文件和CS文件的耦合度,也就是UI显示和逻辑代码的耦合度,如需要更换界面时,逻辑代码修改很...
一个简单的WPF程序
深入浅出WPF-刘铁猛-MVVM视频源代码,MVVM入门与提高视频对应的源代码
WPF-MVVM WPF MVVM模式开发的例子程序
MVVM模式编写的简单WPF程序,操作XML实现简单的增、删、改、查功能.
本项目使用WPF的mvvm设计模式编写,使用SQLite保存数据。希望对学习wpf的童鞋有帮助。 我也是刚刚上手的,写的不要勿怪,大神略过。
这个Demo是WPF的MVVM模式的一个登录窗口的完整实例,包含了在MVVM模式下的数据绑定、命令和事件、PasswordBox的绑定、RadioButton等一对多控件的绑定、关闭窗口和打开新窗口和数据验证等内容。
包含了在MVVM模式下的数据绑定、命令和事件、PasswordBox的绑定、RadioButton等一对多控件的绑定、关闭窗口和打开新窗口和数据验证等内容。
开发工具为VS2010,数据库采用了SQLServer2005,使用Entity...使用MVVMLight工具,来构建MVVM模式。包括MVVM模式下弹出对话框的实现方法。包含WPF程序主题的使用方法,其中包含两个主题MetroLight和MetroDark。
WPF-MVVM实现CRUD操作
对于wpf中的空间ProgressBar,大多数资料还是以codebehind的形式来讲解。但是实际工作中WPF主要应用MVVM工作模式,本例子展示了MVVM下,如何实时更新ProgressBar的显示而不造成卡顿。
WPF-MVVM分页功能例子WPF,MVVM,分页,Listview
WPF开发教程.rar 目录 WPF基础入门 3 1. WPF基础之体系结构 3 2. WPF基础之XAML 9 3. WPF基础之基元素 23 4. WPF基础之属性系统 26 5. WPF基础之路由事件 33 6. WPF基础之布局系统 46 7. WPF基础之样式设置和模板化...
wpf mvvm设计模式示例,使用简单列表作为例子进行介绍。
FindWindowW、SetForegroundWindow如何向WPF应用程序传递启动参数如何捕捉WPF应用程序中未处理的异常如何使用TextBlock控件
WPF项目实例-MVVM,wpf项目实例pdf,C#源码.rar
WPF计算器功能,用MVVM实现