silverlight中使用MVVM建构

数据验证（Validation）是界面程序的常见需求，例如使用正则表达式验证用户输入的Email地址是否合法，然后在界面给出错误提示信息。

在Sivlerlight的MVVM模式中，我们在Model和ViewModel可以做Validation，然后需要把Model和ViewModel的Validation 结果和错误信息通知视图（View）。

在WPF中，我们使用IDataErrorInfo，在Silverlight4中，建议使用INotifyDataErrorInfo。

IDataErrorInfo先简单说一下IDataErrorInfo，这个接口实现了简单的数据验证和错误报告功能，只能说聊胜于无吧。

例子：1<TextBox Text="{Binding Path=, Mode=TwoWay, ValidatesOnDataErrors=True, NotifyOnValidationError=True }"/>INotifyDataErrorInfo这个接口只有Silverlight4以上支持，非常强大，支持一个绑定属性多重错误、异步数据验证、自动通知视图错误信息、ErrorChanged事件、HasErrors属性、GetErrors方法等等。

定义：1publicinterface INotifyDataErrorInfo2 {3bool HasErrors { get; }45event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;67IEnumerable GetErrors(string propertyName);8 }实现这个INotifyDataErrorInfo接口也非常简单，来个简单的例子：1publicclass SimpleModel : INotifyDataErrorInfo2 {3publicevent EventHandler<DataErrorsChangedEventArgs> ErrorsChanged;45private Dictionary<string, List<String>> _errors = new Dictionary<string, List<String>>();67privatestring _accountID = null;89publicstring AccountID10{11get { return _accountID; }12set13{14if (_accountID != value)15{16var propertyName = "AccountID";1718if (string.IsNullOrEmpty(value))19{20if (!_errors.ContainsKey(propertyName))21_errors.Add(propertyName, new List<string>());2223_errors[propertyName].Add("AccountID can't be null or empty"); 24}25else26{27if (_errors.ContainsKey(propertyName))28_errors.Remove(propertyName);29}3031NotifyErrorsChanged(propertyName);3233//Maybe you don't want to set this field to a value if the validation fails34_accountID = value;35}36}3738}3940public System.Collections.IEnumerable GetErrors(string propertyName)41{42if (_errors.ContainsKey(propertyName))43return _errors[propertyName];4445return _errors.Values;46}4748publicbool HasErrors49{50get { return _errors.Count >0; }51}525354privatevoid NotifyErrorsChanged(string propertyName)55{56if (ErrorsChanged != null)57ErrorsChanged(this, new DataErrorsChangedEventArgs(propertyName));58}59 }异步Validation数据验证和INotifyDataErrorInfo接口这个例子稍微复杂，实现了异步调用WCF RIA Service进行业务逻辑的validation并在ViewModel中把验证的错误提示通知视图，完整的代码下载，需要VS2010和Silverlight环境。

稳扎稳打Silverlight（52）4.0绑定之ICommand命令和MVVM模式-电脑资料介绍Silverlight 4.0 MVVM 模式：* ICommand - 命令，。

可以将其绑定到 ButtonBase 或 Hyperlink 的 Command 属性上* MVVM 模式 - Model-View-ViewModel在线DEMO示例1、演示 ICommand 的应用MyCommand.cs代码/**ICommand- 命令。

可以将其绑定到ButtonBase或Hyperlink的Command属性上* bool CanExecute(object parameter) - 当请命令是否可以执行* event EventHandler CanExecuteChanged - 当请命令是否可以执行的状态发生改变时所触发的事件* void Execute(object parameter) - 当前命令被执行时，所调用的方法*/using System;using ;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;namespace mand{public delegate void Execute(object parameter);public delegate bool CanExecute(object parameter);public class MyCommand : ICommand{private Execute _executeMethod;private CanExecute _canExecuteMethod;public MyCommand(): this(null, null){}public MyCommand(Execute executeMethod): this(executeMethod, null){}public MyCommand(Execute executeMethod, CanExecute canExecuteMethod){_executeMethod = executeMethod;_canExecuteMethod = canExecuteMethod;}public bool CanExecute(object parameter){if (_canExecuteMethod == null)return true;elsereturn _canExecuteMethod(parameter);}public void Execute(object parameter){if (_executeMethod != null)_executeMethod(parameter);}public event EventHandler CanExecuteChanged;protected virtual void OnCanExecuteChanged(EventArgs e){if (CanExecuteChanged != null)CanExecuteChanged(this, e);}public void RaiseCanExecuteChanged(){OnCanExecuteChanged(EventArgs.Empty);}}}MyViewModel.cs代码using System;using ;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;namespace mand{public class MyViewModel{// 声明一个ICommand类型，用于绑定到ButtonBase或Hyperlink的Command属性上public ICommand Hello { get; set; }public MyViewModel(){// 绑定了Hello的命令被执行时则会调用ExecuteHello(object parameter)方法Hello = new MyCommand(ExecuteHello);}private void ExecuteHello(object parameter){MessageBox.Show("Hello: " + parameter.ToString());}}}Demo.xaml代码xmlns="/winfx/2006/xaml/pre sentation"xmlns:x="/winfx/2006/xaml"xmlns:d="/expression/blend/ 2008"xmlns:mc="/markup-compatibility/2006"xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windo ws.Controls.Navigation"xmlns:ViewModel="clr-namespace:mand"Title="Demo Page">2、MVVM 模式的 DemoUpdateCommand.cs代码using System;using ;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;namespace Silverlight40.Binding.MVVM{// 实现ICommand 接口，在MVVM 中它的作用是为ButtonBase 或Hyperlink 提供相应的行为逻辑public class UpdateCommand : ICommand{private ProductViewModel _viewModel;public UpdateCommand(ProductViewModel viewModel) {_viewModel = viewModel;}public bool CanExecute(object parameter){return true;}public event EventHandler CanExecuteChanged;public void Execute(object parameter){_viewModel.Update();}}}ProductViewModel.cs代码using System;using ;using System.Windows;using System.Windows.Controls;using System.Windows.Documents;using System.Windows.Ink;using System.Windows.Input;using System.Windows.Media;using System.Windows.Media.Animation;using System.Windows.Shapes;using ponentModel;namespace Silverlight40.Binding.MVVM{// MVVM 之ViewModel - 为了数据的绑定需要实现INotifyPropertyChanged接口；为了命令的绑定需要有相对应的ICommand类型的属性public class ProductViewModel: INotifyPropertyChanged{public ProductViewModel(): this (13, "wii"){}public ProductViewModel(int productId, string name) {_productId = productId;_name = name;}private int _productId;public int ProductId{get { return _productId; }set{_productId = value;RaisePropertyChangedEvent("ProductId");}}private string _name;public string Name{get { return _name; }set{_name = value;RaisePropertyChangedEvent("Name");}}public event PropertyChangedEventHandler PropertyChanged;private void RaisePropertyChangedEvent(string propertyName){if (PropertyChanged != null)PropertyChanged(this,new PropertyChangedEventArgs(propertyName));}public void Update(){MessageBox.Show(string.Format("将ID 为{0} 的名称更新为：{1}", _productId, _name));}public ICommand UpdateCommand{get{return new UpdateCommand(this);}}}}Demo.xaml代码xmlns="/winfx/2006/xaml/pre sentation"xmlns:x="/winfx/2006/xaml"xmlns:d="/expression/blend/ 2008"xmlns:mc="/markup-compatibility/2006"xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windo ws.Controls.Navigation"xmlns:vm="clr-namespace:Silverlight40.Binding.MVVM"Title="Demo Page">。

silverlight与数据模型设计模式摘要本文主要从几个方面论述了silverlight与众不同的设计模式和从其中衍生的程序设计方法，也就是数据模型设计模式。

关键词设计模式；富用户体验；mvvm模式；数据模型设计模式；事件触发；面向对象；松耦合中图分类号tp31 文献标识码a 文章编号 1674-6708（2011）55-0172-03silverlight 是微软推出的新一代web前端应用程序解决方案，它使用第三方插件的形式，轻量级的植入到浏览器中，使用与flash 相似的机制实现富用户体验的互联网应用，并且提供硬件加速的支持，一级与flash相同的对流媒体的支持，因其与flash的相似性，也被称为flash杀手。

html 5的出现为web带来了冲击，它具有对于各种媒体的支持，具有canvas对象，也可以用于实现游戏，矢量图形等功能，然而开发成本较高，目前缺少成熟的开发工具的支持，因此在短时间内还不能取代flash和silverlight的地位。

并且，在微软最擅长的标准化，模块化，统一设计模式上，silverlight给我们带来了很多的启示和可以借鉴的地方。

silverlight是wcf的轻量级版本，使用xaml的方式来抽象出ui层，使之与逻辑层分离，类似于mvc设计模式，但又是对mvc的进一步优化。

xaml是基于xml的一种表达形式，它将图形，媒体，动画和部分触发器逻辑集成在xml文档格式中，并不涉及代码，并且推出了blend开发工具，用于很方便的简单拖拽，点击就可以实现丰富绚丽的动画。

微软的这种做法实际上是将设计者与程序员的工作进行了彻底的分离，使得二者可以并行工作，互不干扰，设计者做设计者的事，程序员做程序员的事，二者之间只要通过舞台中的变量名进行联系和操作即可。

并且它也因为开发工具blend的支持，极大的降低了开发成本，较html和js控制的页面逻辑有很大的进步。

又因为它是基于第三方的运行时环境(run time)，因此在任何机器和浏览器中都提供一致的表现，使得程序员不必再考虑兼容性问题，极大的降低了开发成本，缩短了开发周期。

Behavior把一些常用的行为封装成可重复使用的组件(Component)，在理想状况下，Designer(设计师)或domain expert(特定领域的专家，例如财会人员、HR人员、或MIS)甚至可以完全不需要具备程序设计的观念，只需要了解基础的事件(Event)观念，就可以顺利的开发出一套系统，若需要实现特定的功能时，可商请developere为他们开发所需要的Behavior，designer只需要取得这些Behavior并使用即可。

例如，界面设计人员可以使用Expression Blend把一个Behavior拖到一个界面元素上，比如右键点击以后启动一段动画这个行为，这个界面元素就会自动执行，岂不是很清爽！（当然，执行函数还是要编程人员编写），来个例子：界面xaml:1<UserControl2xmlns="/winfx/2006/xaml/presentation"3xmlns:x="/winfx/2006/xaml"4xmlns:d="/expression/blend/2008"5 xmlns:mc="/markup-compatibility/2006"6xmlns:wm="clr-namespace:AsycValidation"7 xmlns:i="/expression/2010/interactivity" xm lns:ei="/expression/2010/interactions" x:Class="A sycValidation.MainPage"8mc:Ignorable="d"9 x:Name="MyUserControl"10 d:DesignHeight="300" d:DesignWidth="400">1112<Grid x:Name="Layout">13<TextBlock Height="32"HorizontalAlignment="Left" Margin="41,53,0,0" x:Name=" textBlock1" Text="Company:"VerticalAlignment="Top" Width="66"/>14<TextBox Height="31"HorizontalAlignment="Left" Margin="120,45,0,0" x:Name="t extBox1" Text="{Binding CompanyName, Mode=TwoWay, NotifyOnValidationError=Tru e}"VerticalAlignment="Top" Width="119"/>15<TextBox Height="30"HorizontalAlignment="Left" Margin="120,104,0,0" x:Name=" textBox2" Text="{Binding CompanyID, Mode=TwoWay, NotifyOnValidationError=True} "VerticalAlignment="Top" Width="119"/>16<Button Content="Button" Height="36"HorizontalAlignment="Left" Margin="120,156,0,0" x:Name="button1"VerticalAlignment="Top" Width="81">17<i:Interaction.Triggers>18<i:EventTrigger EventName="Click">19<ei:CallMethodAction MethodName="button1_Click"TargetObject="{Binding Elemen tName=MyUserControl}"/>20</i:EventTrigger>21<i:EventTrigger>22<ei:CallMethodAction MethodName="button1_loaded"TargetObject="{Binding Eleme ntName=MyUserControl}"/>23</i:EventTrigger>24</i:Interaction.Triggers>25</Button>26</Grid>27</UserControl>界面xaml.cs:1using System;2using System.Collections.Generic;3using System.Linq;4using ;5using System.Windows;6using System.Windows.Controls;7using System.Windows.Documents;8using System.Windows.Input;9using System.Windows.Media;10using System.Windows.Media.Animation;11using System.Windows.Shapes;1213namespace AsycValidation14{15publicpartialclass MainPage : UserControl16 {17public MainPage()18 {19InitializeComponent();2021CompanyModel m1 = new CompanyModel() { CompanyID = 1, CompanyName = "abc" }; 2223companyViewModel = new CompanyViewModel(m1);24this.DataContext = companyViewModel;2526 }2728publicvoid button1_Click()29 {30MessageBox.Show("ok");31 }3233publicvoid button1_loaded()34 {35MessageBox.Show("loaded");3637 }3839public CompanyViewModelcompanyViewModel { get; set; }4041 }42}注意给这个button定义了两个CallMethodAction的behavior：一个是点击事件，一个是加载Loaded事件。

管窥MVVMLightCommand参数绑定和事件传递前⾔由于在实际项⽬中，业务功能的增加导致软件开发规模在逐渐变⼤，所以我准备找个Silverlight框架来组织当前项⽬中的⽂件，以期能够让后续的业务功能增添和维护更加容易⼀些。

⽆意中，我在这篇⽂章中看到了当前Silverlight下所有的框架的评测：,当我看到MvvmLight toolkit在各⽅⾯都⽐较完备的时候，于是决定选择这个框架：在上，下载了MVVM Light Toolkit V4 RTM这个版本，因为我⽤的是vs2010，所以我下载了⽀持当前机器IDE的版本。

新建项⽬，选择MvvmLight(SL4),之后我们就可以看到项⽬结构了：其中：Design⽂件夹中的⽂件主要提供设计时运⾏⽀持Model⽂件夹则放置了富实体模型Skins⽂件夹则放置了样式⽂件定义ViewModel⽂件夹则放置了ViewModel对象，其实MainViewModel和MainPage是⼀对⼀的（ViewMoel-View）关系.⼆者的映射通过ViewModelLocator进⾏。

MainPage.xaml就是我们的视图页⾯下⾯我们就以例⼦来演⽰MvvmLight Toolkit中是如何实现MVVM模式，如何绑定命令，如何进⾏事件消息传递的。

⾸先，在这个框架中，MVVM模式的⼊⼝点为ViewModelLocator类，在这个类中，可以定义多个ViewModel属性，并且每个属性都可以通过ServiceLocator.Current.GetInstance⽅法进⾏映射，以便于暴露给前台绑定。

同时，在新增⼀个ViewModel类的时候，⼀定要在其提供的SimpleIoc对象容器中进⾏注册，以便于能够通过IOC的⽅式获取其实例。

做完映射后，就是我们的ViewModel对象了。

它需要继承⾃ViewModelBase类，这个类封装了ICommand，INotifypropertyChanged等接⼝，使⽤起来很⽅便。

实现 Treeview 的展开状态持久化和自动恢复，配合 MVVM 实现不容易。

所以，MVVM 的 核心概念理解不难，在具体使用上则问题多多。

今天要讲的话题就是一个 MVVM 使用上的 具体问题: Silverlight 中的 Storyboard 动画是否可以在 ViewModel 中来控制？ 为什么想在 ViewModel 中控制 Storyboard?假设我的业务逻辑在 ViewModel 中， 业务操作好了保存 Save 成功了就需要启动一个动画： Stobyboard.begin()。

而这个动画在视图中，怎么去控制它？这个需求很普遍吧。

确实很 普遍，但实现就不那么简单了，不像下面这样的 Storyboard 启动那么简单：1:<Imagex:Name="myImage" 2:Source="/man.png"> 3:<Image.Triggers> 4:<EventTriggerRoutedEvent="Image.Loaded"> 5:<BeginStoryboard> 6:<Storyboardx:Name="myStoryboard"> 7:<DoubleAnimationDuration="0:0:2" 8:Storyboard.TargetName="myImage" 9:Storyboard.TargetProperty="Opacity" 10:From="0"To="1"/> 11:</Storyboard> 12:</BeginStoryboard> 13:</EventTrigger> 14:</Image.Triggers> 15:</Image>解决方法一： 解决方法一：ViewModel 中用事件 Event 通知 View 启动 Storyboard 动画ViewModel 是对界面逻辑、业务逻辑、和模型数据的封装和抽象，ViewModel 不依赖于 具体的 View 视图，所以 ViewModel 根本不知道具体的某个 Storyboard，怎么去启动这 个动画呢? 解决问题思路有好多：第一种方法就是很自然的想到在 ViewModel 中用事件 Event 通知 View 启动动画。

MVVM实践教程算算，从事Silverlight和WPF的开发也有1年多的时间了，虽然时间不算长，虽然还没有突出的成就，但是感觉也还算⼀般。

但是，从头⾄今都没有去认真研究和使⽤过MVVM，虽然它被认为是Silverlight和WPF开发的最佳架构实践。

我想这⾥⾯还是有⼀些原因，就像⼀般开始我们始终都不会看好单元测试。

直到有⼀天你体会到它的魅⼒，它的好处。

最近的项⽬，却不得不采⽤MVVM的模式：UI没有定，甚⾄服务端的Service都没有定，但是不能等到这些都做好才开始展开我们的开发⼯作。

于是，痛下决⼼研究MVVM的模式，在学习过程中，发现⼀些问题。

MVVM的使⽤不仅仅是因为它需要新的思维，使View和ViewModel 之间的交互变得更⿇烦。

这其中还有另外的原因，那就是参考资料不全。

⼀般⽹上的资料都是⼀⽚简单的教程，⼤体都是怎么使⽤命令，怎么使⽤Binding的⽅式来建⽴应⽤程序。

这些⼏乎都出⾃John Smith的那篇WPF的⽂章。

⽽实际上，在开发中，还会遇到其他问题，例如页⾯切换，UI事件，并且简单的⽰例我们往往弄不清楚各个模块之间的职责和联系。

因为不能有效实践，从⽽被认为会影响开发效率⽽不被采⽤。

这⾥，我将⾃⼰学习总结的知识整理成⼀篇完整的⽰例，有提供源代码，源代码包含⽐较完整的⽰例，不仅包含数据绑定和命令的使⽤，还包含UI事件和UI的切换。

相信能解释⼤多数遇到的问题。

当然，如果你有更好的实践和建议，欢迎讨论……………1.MVVM设计模式简介MVVM的设计模式最早于2005年由微软的WPF和Silverlight架构师John Gossman在他的博客中提到。

以下是这篇⽂章的链接：MVVM设计模式基于MVC这种将UI和逻辑分离的结构思想。

传统的.NET平台下软件开发如和WPF/Silverlight⼤多数是基于CodeBehind这样的⽅式，我们往往将所有的代码全部写在后台代码⽂件中，例如UI操作，业务逻辑操作，IO，数据服务的调⽤等等。

MVVM模式是Model、View、ViewModel的简称，最早出现在WPF，现在Silverlight 中也使用该模式，MVVM模式是对MVC模式的变种。

哪儿变了？我认为MVVM和MVC 的主要变化在于MVVM更适合于XAML。

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大好处：1. 低耦合。

视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model不可以不变，当Model变化的时候View也可以不变。

2. 可重用性。

你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

3. 独立开发。

开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。

4. 可测试。

界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

MVVM的Model、View、ViewModel分工：1. View∙负责界面和显示，界面构成元素有window, controls, page, dataTemplete, custom controls….∙代码通常有XAML和XAML.CS组成，但后台代码应该很少∙通过DataContext和ViewModel绑定∙不直接和Model交互！∙控件可以和ViewModel的公共属性绑定，update需要双向绑定∙控件可以触发Behavior/Command调用ViewModel的方法，Command是View到ViewModel的单向通讯(View中触发事件，ViewModel中处理事件)2. ViewModel∙主要包括界面逻辑和模型数据封装，Behavior/Command事件响应，绑定的属性定义等∙ViewModel继承Model类，或者是Model的继承类∙是view和model的桥梁，是对Model的抽象，例如，model中数据格式是“年月日”，可以在viewModel中转换model中的数据为“日月年”以供视图（view）显示。

深入理解MVVM模式作者：谢伟来源：《速读·下旬》2015年第12期摘要：MVVM即Model-View –ViewModel，是微软WPF和Silverlight应用特有的一种界面设计模式。

使用MVVM设计模式可以帮助我们分离业务逻辑，显示逻辑和用户界面，使得我们的程序代码结构清晰，容易被阅读、测试、维护、替换、扩展和改进。

关键词： MVVM;设计模式;分层;用户界面一、什么是MVVM模式MVVM是Model-View-ViewModel的简写。

微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……。

这导致了软件UI层更加细节化、可定制化。

同时，在技术层面，WPF也带来了诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。

MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。

它立足于原有MVP框架并且把WPF的新特性揉合进去，以应对客户日益复杂的需求变化。

二、为什么要有MVVM模式开发UI，对一个专业软件并不容易。

它需要未知数据、交互式设计，可视化设计、联通性，多线程、国际化、验证、单元测试以及其他的一些东西才能完成。

考虑到UI要展示开发的系统并且必须满足用户对系统风格不可预知的变更，因此它是很多应用程序最脆弱的地方。

有很多的设计模式可以帮助解决UI不断变更这头难缠的野兽，但是恰当的分离和描述多个关注点可能很困难。

模式越复杂，之后用到的捷径越可能破坏之前正确的努力。

自从人们开始构建UI时，就有很多流行的设计模式让UI构建更容易。

比如，MVP模式在各种UI编程平台中都非常流行。

MVP是MVC模式的一种变体，MVC模式已经流行了几十年了。