(Translation)Silverlight 4 and MVVM pattern with ICommand
什么是MVVM模式
MVVM(Model-View-viewmodel)是专为WPF和SilverLight设计的开发模式。它为程序员指定了一个开发准则，也就是开发出来的程序应该能达到更的单元测试、程序调试、易管理及程序的可读性。
View层的要实现零代码，也就是在UI的mainpage.xaml.cs中没有任何代码。也就是要达到以下要求：确定和取消的按钮不能在后台有click事件，没有form或者windows的Load逻辑代码，没有UI的binding的逻辑代码，没有UI的验证代码以及没有类型转换代码。
如果要达到MVVM模式的UI后台隐藏文件没有任何逻辑代码以及实现显示层和逻辑层的松藕型。那么必须得有以下特性：
1、WPF和SilverLight的UI层(XAML)的双向绑定能力
2、绑定的数值转换能力(例如：string类转换为Color类)
3、INotification和Dependency属性
4、Data Context对象
5、Static Resources
7、在XAML中对Validation=true利用(显示层)
在没有MVVM模式之前，有两个比较有名的模式，一个是在winform和WPF广泛应用的WVP模式(尽管它不能很好的利用WPF的双向绑定(Two Way Binding))。另一个是在ASP.NET应用程序中一直使用的MVC。
在没有MVVM模式的情况，那么程序员在写Winform或者WPF/SilverLight应用程序时。格式会是以下的情况。
3、不能让多个表示层同享一个逻辑层
4、因为显示层和和后台逻辑代码是紧藕型的，所以不能编写单元测试
5、在没有使用MVVM模式时，WPF的显示层(XAML)被看作是数据层
下面来看看使用MVVM模式之后，有什么优点
1、表示层和数据层完全分离，表示层中没有数据层代码，仅仅是为了显示数据
2、容易编写单元测试和管理代码
3、XMAL.CS中没有代码，因为表示层和逻辑层是松藕型的
4、SilverLight4.0对接口ICommand的支持(这个对我们写事件有很大帮助)
下面用MVVM举一个简单的例子，我们用一个TextBox显示用户名，一个TextBox显示年龄，当点击按钮时，年龄随着增长，至到26.
第一步：在Viual Studio2010中建一个名为"simplePersonandageMVVM"的SilverLight应用程序
第二步：新增一个类文件，命名为"PersonModel"，然后粘贴下面的代码(这是数据对像的实例)
代码
namespace @H_502_82@ simplePersonandageMVVM
{
public @H_502_82@ class @H_502_82@ PersonModel : INotifyPropertyChanged
{
string @H_502_82@ name;
public @H_502_82@ string @H_502_82@ Name
{
get @H_502_82@ { return @H_502_82@ this @H_502[email protected]; }
set @H_502_82@
{
this @H_502[email protected] @H_502_82@= @H_502_82@ value;
fire( " Name " @H_502_82@);
}
}
int @H_502_82@ age;
public @H_502_82@ int @H_502_82@ Age
{
get @H_502_82@ { return @H_502_82@ this @H_502[email protected]; }
set @H_502_82@
{
this @H_502[email protected] @H_502_82@= @H_502_82@ value;
fire( " Age " @H_502_82@);
}
}
public @H_502_82@ PersonModel() { }
public @H_502_82@ PersonModel( string @H_502_82@ name, int @H_502_82@ age)
{
this @H_502[email protected] @H_502_82@= @H_502_82@ name;
this @H_502[email protected] @H_502_82@= @H_502_82@ age;
}
public @H_502_82@ void @H_502_82@ fire( string @H_502_82@ x)
{
if @H_502_82@ (PropertyChanged @H_502_82@!= @H_502_82@ null @H_502_82@)
{
PropertyChanged( this @H_502_82@, new @H_502_82@ PropertyChangedEventArgs(x));
}
}
public @H_502_82@ event @H_502_82@ PropertyChangedEventHandler PropertyChanged;
}
}
第三步：创建另一个类文件，命名为Personviewmodel.cs",这个是viewmodel,它的作用是连接View(表示层)和实例(实体层)的通信。
代码
{
public @H_502_82@ class @H_502_82@ Personviewmodel
{
public @H_502_82@ PersonModel p { get @H_502_82@; set @H_502_82@; }
public @H_502_82@ Personviewmodel()
{
p @H_502_82@= @H_502_82@ new @H_502_82@ PersonModel( " prabjot " @H_502_82@, 20 @H_502_82@);
}
public @H_502_82@ ICommand GetPerson
{
get @H_502_82@ { return @H_502_82@ new @H_502_82@ GetPersonCommand( this @H_502_82@); }
}
public @H_502_82@ void @H_502_82@ Increaseage(PersonModel d)
{
d.Age @H_502_82@++ @H_502_82@;
string @H_502_82@ x @H_502_82@= @H_502_82@ d.Age.ToString();
MessageBox.Show(x);
}
}
}
第四步：创建一个继承于接口ICommand的Command对象，命名为"GetPersonCommand.cs",这个类重写了接口ICommand的两个方法。一个是方法当按钮设置为Enable时才起作用的CanExecute，另一个方法是执行按钮Click事件的Execute.
代码
{
public @H_502_82@ class @H_502_82@ GetPersonCommand : ICommand
{
Personviewmodel pincommand;
public @H_502_82@ GetPersonCommand( Personviewmodel Pcame)
{
pincommand @H_502_82@= @H_502_82@ Pcame;
}
public @H_502_82@ bool @H_502_82@ CanExecute( object @H_502_82@ parameter)
{
if @H_502_82@(pincommand.p.Age @H_502_82@> @H_502_82@ 25 @H_502_82@)
{
return @H_502_82@ false @H_502_82@ ;
}
else @H_502_82@
{
return @H_502_82@ true @H_502_82@;
}
}
public @H_502_82@ event @H_502_82@ EventHandler CanExecuteChanged;
public @H_502_82@ void @H_502_82@ Execute( object @H_502_82@ parameter)
{
pincommand.Increaseage(pincommand.p);
}
}
}
xmlns @H_502_82@= " http://schemas.microsoft.com/winfx/2006/xaml/presentation " @H_502_82@
xmlns:x @H_502_82@= " http://schemas.microsoft.com/winfx/2006/xaml " @H_502_82@
xmlns:d @H_502_82@= " http://schemas.microsoft.com/expression/blend/2008 " @H_502_82@
xmlns:mc @H_502_82@= " http://schemas.openxmlformats.org/markup-compatibility/2006 " @H_502_82@
xmlns:local @H_502_82@= " clr-namespace:simplePersonandageMVVM " @H_502_82@
mc:Ignorable @H_502_82@= " d " @H_502_82@
d:DesignHeight @H_502_82@= " 300 " @H_502_82@ d:DesignWidth @H_502_82@= " 400 " @H_502_82@> @H_502_82@
@H_502_82@< @H_502[email protected] @H_502_82@> @H_502_82@
@H_502_82@< @H_502_82@local:Personviewmodel x:Key @H_502_82@= " pkey " @H_502_82@ @H_502_82@/> @H_502_82@
@H_502_82@</ @H_502[email protected] @H_502_82@> @H_502_82@
@H_502_82@< @H_502_82@Grid x:Name @H_502_82@= " LayoutRoot " @H_502_82@ Background @H_502_82@= " White " @H_502_82@
DataContext @H_502_82@= " {Binding Source={StaticResource pkey}} " @H_502_82@ @H_502_82@> @H_502_82@
@H_502_82@< @H_502_82@Grid Name @H_502_82@= " hi " @H_502_82@ DataContext @H_502_82@= " {Binding Path=p, Mode=TwoWay} " @H_502_82@> @H_502_82@
@H_502_82@< @H_502_82@TextBox Height @H_502_82@= " 23 " @H_502_82@ HorizontalAlignment @H_502_82@= " Left " @H_502_82@ Margin @H_502_82@= " 53,30,0 " @H_502_82@
Name @H_502_82@= " textBox1 " @H_502_82@ VerticalAlignment @H_502_82@= " Top " @H_502_82@ Width @H_502_82@= " 120 " @H_502_82@ Text @H_502_82@= " {Binding Path=Name, Mode=TwoWay} " @H_502_82@ @H_502_82@/> @H_502_82@
@H_502_82@< @H_502_82@TextBox Height @H_502_82@= " 23 " @H_502_82@ HorizontalAlignment @H_502_82@= " Left " @H_502_82@ Margin @H_502_82@= " 53,68,0 " @H_502_82@ Name @H_502_82@= " textBox2 " @H_502_82@
Text @H_502_82@= " {Binding Path=Age, Mode=TwoWay} " @H_502_82@ VerticalAlignment @H_502_82@= " Top " @H_502_82@ Width @H_502_82@= " 120 " @H_502_82@ @H_502_82@/> @H_502_82@
@H_502_82@< @H_502_82@Button Content @H_502_82@= " Button " @H_502_82@ Height @H_502_82@= " 23 " @H_502_82@ HorizontalAlignment @H_502_82@= " Left " @H_502_82@ Margin @H_502_82@= " 53,112,0 " @H_502_82@ Name @H_502_82@= " button1 " @H_502_82@
VerticalAlignment @H_502_82@= " Top " @H_502_82@ Width @H_502_82@= " 75 " @H_502_82@ Command @H_502_82@= " {Binding Path=DataContext.GetPerson, ElementName= LayoutRoot } " @H_502_82@
CommandParameter @H_502_82@= " {Binding Path=Age, ElementName=hi} " @H_502_82@ @H_502_82@/> @H_502_82@
@H_502_82@</ @H_502_82@Grid @H_502_82@> @H_502_82@
@H_502_82@</ @H_502_82@Grid @H_502_82@> @H_502_82@
@H_502_82@</ @H_502_82@UserControl @H_502_82@>
通过对上面的一个小例子，希望能帮且你理解MVVM模式。也希望对你以后使用MVVM开发WPF或者SilverLight应用程序用帮助。
因为自己的技术水平和英语水平有限，难免有不足之处，请大家多多指教。
英文原文地址： http://www.dotnetspider.com/resources/36781-Silverlight-MVVM-pattern-with-ICommand.aspx
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。