Silverlight 4 MVVM开发方式(一)小黑端

转自http://www.dotblogs.com.tw/help/archive/2010/07/27/16844.aspx

 

一开始接触WPF和Silverlight就对MVVM的开发方式非常有兴趣,

MVVM是Model - View - ViewModel的缩写,Model就是资料,View就是介面,ViewModel负责控制介面与资料,

是利用DataBinding的机制所产生出的设计模式,因此只适用于Silverlight和WPF。

此开发方式的目的就是让程式开发人员和画面设计人员可以同时进行工作,不用互相等待,

这也是为什么微软除了VS之外又出了BLEND的原因。

我们就用一个简单的例子来试试看!!

 

小黑想用Silverlight做一个简单的通讯录,

刚开启专案时,必须手动加入Microsoft.Expression.Interactions参考,

因为小黑不会画介面,所以他找了卡玛帮他画介面,

首先想想通讯录要有哪些资料,通讯录内容有Name, Age, Phone,

因此小黑作了以下的Model:

  1: public class UserCard : INotifyPropertyChanged{ 
  2: 
  3: private string _Name; 
  4: private string _Phone; 
  5: private int _Age; 
  6: 
  7: public string Name { 
  8: get { return _Name; } 
  9: set { 
  10: _Name = value ; 
  11: Update( "Name" ); 
  12: } 
  13: } 
  14: 
  15: 
  16: public string Phone { 
  17: get { return _Phone; } 
  18: set { 
  19: _Phone = value ; 
  20: Update( "Phone" ); 
  21: } 
  22: } 
  23: 
  24: 
  25: public int Age { 
  26: get { return _Age; } 
  27: set { 
  28: _Age = value ; 
  29: Update( "Age" ); 
  30: } 
  31: } 
  32: 
  33: private void Update( string name) { 
  34: if (PropertyChanged != null ) PropertyChanged( this , new PropertyChangedEventArgs(name)); 
  35: } 
  36: 
  37: #region INotifyPropertyChanged Members 
  38: 
  39: public event PropertyChangedEventHandler PropertyChanged; 
  40: 
  41: #endregion 
  42: } 

Model实践了INotifyPropertyChanged介面,这样Binding后,若资料有改变才能通知出来。

 

接着小黑只想要有新增、修改、删除这三个功能,这部分就写在VM里:

  1: public class UserCardViewModel : INotifyPropertyChanged{ 
  2: private ObservableCollection<UserCard> _UserCardList; 
  3: private UserCard _NewUserCard; 
  4: private ICommand _AddCommand; 
  5: private ICommand _RemoveCommand; 
  6: private ICommand _ModifyCommand; 
  7: 
  8: public ObservableCollection<UserCard> UserCardList { 
  9: get { return _UserCardList; } 
  10: set { 
  11: _UserCardList = value ; 
  12: Update( "UserCardList" ); 
  13: } 
  14: } 
  15: 
  16: 
  17: public UserCard NewUserCard { 
  18: get { return _NewUserCard; } 
  19: set { 
  20: _NewUserCard = value ; 
  21: Update( "NewUserCard" ); 
  22: } 
  23: } 
  24: 
  25: 
  26: public ICommand AddCommand { 
  27: get { 
  28: if (_AddCommand == null ) _AddCommand = new ActionCommand(Add); 
  29: return _AddCommand; 
  30: } 
  31: } 
  32: 
  33: 
  34: public ICommand RemoveCommand { 
  35: get { 
  36: if (_RemoveCommand == null ) _RemoveCommand = new ActionCommand(Remove); 
  37: return _RemoveCommand; 
  38: } 
  39: } 
  40: 
  41: public UserCardViewModel() { 
  42: _UserCardList = new ObservableCollection<UserCard>(); 
  43: _NewUserCard = new UserCard(); 
  44: } 
  45: 
  46: private void Update( string name) { 
  47: if (PropertyChanged != null ) PropertyChanged( this , new PropertyChangedEventArgs(name)); 
  48: } 
  49: 
  50: private void Add() { 
  51: 
  52: } 
  53: 
  54: private void Remove( object obj) { 
  55: 
  56: } 
  57: 
  58: #region INotifyPropertyChanged Members 
  59: 
  60: public event PropertyChangedEventHandler PropertyChanged; 
  61: 
  62: #endregion 
  63: } 
  64: } 

而Modify可以用DataBinding的TwoWay解决,所以不必多一个Modify的函式,

决定好功能后,小黑跟卡玛说新增的资料会从NewUserCard取得,所以Add不用参数,但是Remove就要传入要删除的资料。

接着小黑就只要把功能,也就是空白的函式内容做好即可,不必花心思在介面!

最终小黑作出的Add和Remove如下:

 

 

  1: private void Add() { 
  2: if (_NewUserCard != null ) { 
  3: UserCardList.Add(_NewUserCard); 
  4: } 
  5: } 
  6: 
  7: private void Remove( object obj) { 
  8: UserCard card = obj as UserCard; 
  9: if (card != null ) { 
  10: UserCardList.Remove(card); 
  11: } 
  12: } 

小黑也不必等介面做好,可以直接做单元测试,所以小黑就先去睡觉了!

时间: 2024-08-26 03:42:46

Silverlight 4 MVVM开发方式(一)小黑端的相关文章

Silverlight 4 MVVM开发方式(一)卡玛端

转自 http://www.dotblogs.com.tw/help/archive/2010/07/27/16845.aspx 小黑与卡玛说明功能注意事项后,卡玛就开启Blend专心做介面, 开启相同专案后,必须先将专案编译过,这样Blend就会知道VM的内容,不然就只能自己打字了! 接着将ListBox拉进Grid,并乔好大小,然后点选ItemSource右边的小方块,再选择Data Binding 之后会出现Binding视窗,如果有编译过,选择+CLR Object就可以找到VM,找到后

Silverlight 4 MVVM开发方式(三)动态换皮

转自 http://www.dotblogs.com.tw/help/archive/2010/07/29/16888.aspx 使用MVVM开发方式,可以让程式逻辑与介面分离, 介面设计者只需要知道资料的名称就可以开发介面, 也因此动态更换介面也变得非常容易.   这边我们先设计一个简单的Model和ViewModel Model就让他有三个栏位,姓名.电话与信箱 ViewModel就做了一个List和时分秒的栏位,以及启动与停止计时的函式,内容如下: 1: public class Demo

Silverlight 4 MVVM开发方式(二)

转自http://www.dotblogs.com.tw/help/archive/2010/07/29/16883.aspx   做好通讯录之后,为了炫耀​​,小黑很得意的拿给上司小柯看,也很理所当然的被打枪! 『为什么每次ADD后,左边的列表全都被改变了? 有人输入年龄的吗?是要每年都去修改一次喔? 说到修改,到底要怎么改??』 小黑只好摸摸鼻子,回去跟卡玛商量. 每一次新增后,列表都会变成最后一个项目,这很明显是小黑处理资料有问题, 年龄的问题,就增加一个栏位输入生日,栏位名称就叫Birt

silverlight Validation MVVM下用户提交数据验证捕获

转自http://www.cnblogs.com/HalfwayMonk/archive/2011/01/08/1930495.html @jv9的数据验证系列文章:Silverlight实例教程Validation验证系列中已经详细介绍了silverlight下的各种数据验证的方法.我也看着这些文章学习过来的. 现在在实践MVVM,需要在MVVM下实现提交数据验证,一步一步来. 参考系列文章的第四篇,定义一个验证的基类实现:INotifyPropertyChanged和IDataErrorIn

Silverlight + Model-View-ViewModel (MVVM)

早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expression Blend(即'Sparkle').它跟Martin Fowler的Presentation Model非常相似,唯一不同的是,它填平了presentation model和使用了WPF的丰富的数据绑定的view之间的沟壑.在Dan Crevier发表了神作DataModel-View-ViewModel series博文系列之后,(

[Silverlight入门系列]使用MVVM模式(9): 想在ViewModel中控制Storyboard动画?

原文 http://www.cnblogs.com/Mainz/archive/2011/08/25/2153828.html 在前面的Silverlight入门系列文章中穿插讲了一些MVVM模式系列文章,MVVM模式貌似简单,其实要把界面逻辑抽象出来还是很不容易,像<TreeView真正实现MVVM模式和Expanded发生时异步动态加载子节点(WCFRiaService)>就不是这么简单,有的童鞋像feiyang还要实现Treeview的展开状态持久化和自动恢复,配合MVVM实现不容易.所

Silverlight 学习笔记——MVVM模式实现主从数据显示

转自http://www.cnblogs.com/xiaomi7732/archive/2010/01/21/1653482.html 写本篇纯属意外.原来想用主从数据显示的例子记录页面间切换的方法的,后来在园子里看到有一篇写页面切换的文章介绍得很详尽了,代码做了一半,真是鸡肋啊.于是想,干脆把代码改改,弄成个MVVM模式来展示主从数据吧. 为了突出重点,示例不考虑美工方面的问题--嘿嘿,美工实在太差了,各位见谅. 首先来看完成后的效果: 启动时候,显示一个空的页面,点击"Show Data&q

Silverlight实例教程 - Validation数据验证基础属性和事件

Silverlight 4 Validation验证实例系列 Silverlight实例教程 - Validation数据验证开篇 Silverlight实例教程 - Validation数据验证基础属性和事件 Silverlight实例教程 - Validation数据验证DataAnnotation机制和调试技巧 Silverlight实例教程 - Validation客户端同步数据验证 Silverlight实例教程 - Validation服务器端异步数据验证 Silverlight实例

聊天系统Demo,增加Silverlight客户端(附源码)-- ESFramework 4.0 快速上手(09)

      在ESFramework 4.0 快速上手 -- 入门Demo,一个简单的IM系统(附源码)一文中,我们介绍了使用ESFramework的Rapid引擎开发的winform聊天程序,本文我们将在之前demo的基础上添加使用ESFramework.SL开发的Silverlight客户端.这样一来,不仅Silverlight客户端之间可以相互通信,Silverlight客户端还可以跟winform客户端进行通信.如果不了解在Silverlight中如何使用ESFramework,可以先看