Silverlight:Silverlight 4 and MVVM pattern with ICommand

Silverlight:Silverlight 4 and MVVM pattern with ICommand,第1张

概述转载于 http://www.cnblogs.com/888h/archive/2010/11/09/1873057.html 什么是MVVM模式   MVVM(Model-View-ViewModel)是专为WPF和SilverLight设计的开发模式。它为程序员指定了一个开发准则,也就是开发出来的程序应该能达到更的单元测试、程序调试、易管理及程序的可读性。    View层的要实现零代码,也就

转载于 http://www.cnblogs.com/888h/archive/2010/11/09/1873057.html

什么是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

   6、接口ICommand,此接口可以实现后台代码没有事件

   7、在XAML中对ValIDation=true利用(显示层)  

  在没有MVVM模式之前,有两个比较有名的模式,一个是在winform和WPF广泛应用的WVP模式(尽管它不能很好的利用WPF的双向绑定(Two Way Binding))。另一个是在ASP.NET应用程序中一直使用的MVC。

  在没有MVVM模式的情况,那么程序员在写Winform或者WPF/Silverlight应用程序时。格式会是以下的情况。

   1、显示层和后台逻辑代码是紧藕型的

   2、如果UI层改变时,那么后台逻辑代码也得跟着改变。

   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",然后粘贴下面的代码(这是数据对像的实例)

using System.ComponentModel;

namespace simplePersonandageMVVM
{
   
    
public class PersonModel : INotifyPropertyChanged
    {
        
string name;
        
public string name
        {
            
get { return this.name; }
            
set
            {
                
this.name = value;
                fire(
"name");

            }
        }
        
int age;
        
public int Age
        {
            
get { return this.age; }
            
set
            {
                
this.age = value;
                fire(
"Age");
            }
        }
        
public PersonModel() { }
        
public PersonModel(string name, int age)
        {
            
this.name = name;
            
this.age = age;
        }

        
public voID fire(string x)
        {
            
if (PropertyChanged != null)
            {
                PropertyChanged(
thisnew PropertyChangedEventArgs(x));
            }
        }
        
public event PropertyChangedEventHandler PropertyChanged;
    }


第三步:创建另一个类文件,命名为Personviewmodel.cs",这个是viewmodel,它的作用是连接VIEw(表示层)和实例(实体层)的通信。

namespace simplePersonandageMVVM
{
    
public class Personviewmodel
    {
        
public PersonModel p { getset; }
        
public Personviewmodel()
        {
            p 
= new PersonModel("prabjot"20);                     
        }

        
public ICommand GetPerson
        {
            
get { return new GetPersonCommand(this); }
        }
        
        
public voID Increaseage(PersonModel d)
        {
            d.Age
++;           
            
string x = d.Age.ToString();           
            MessageBox.Show(x);       
        
        }
    }
}

第四步:创建一个继承于接口ICommand的Command对象,命名为"GetPersonCommand.cs",这个类重写了接口ICommand的两个方法。一个是方法当按钮设置为Enable时才起作用的CanExecute,另一个方法是执行按钮Click事件的Execute.

namespace simplePersonandageMVVM
{
    
public class GetPersonCommand : ICommand
    {
        Personviewmodel pincommand;
        
public GetPersonCommand( Personviewmodel Pcame)
        { 
          pincommand
= Pcame;
           
           
        }

        
public bool CanExecute(object parameter)
        {
           
if(pincommand.p.Age > 25)
           {
               
return false ;
           }
        
else
           {
               
return true;
           }
            
        }

        
public event EventHandler CanExecuteChanged;

        
public voID Execute(object parameter)
        {
           pincommand.Increaseage(pincommand.p);
        }
    }
}

第五步:是XAML文件,代码如下:

<UserControl x:Class="simplePersonandageMVVM.MainPage"
    xmlns
="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d
="http://schemas.microsoft.com/Expression/blend/2008"
    xmlns:mc
="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:local
="clr-namespace:simplePersonandageMVVM"
    mc:Ignorable
="d"
    d:DesignHeight
="300" d:DesignWIDth="400">
    
<UserControl.Resources>
        
<local:Personviewmodel  x:Key="pkey" />
    
</UserControl.Resources>
    
    
<GrID x:name="LayoutRoot" Background="White" 
          DataContext
="{Binding Source={StaticResource pkey}}" >
        
<GrID name="hi" DataContext="{Binding Path=p, Mode=TwoWay}">
            
<TextBox Height="23" HorizontalAlignment="left" margin="53,30,0" 
                 name
="textBox1" VerticalAlignment="top" WIDth="120" Text="{Binding Path=name, Mode=TwoWay}" />
            
<TextBox Height="23" HorizontalAlignment="left" margin="53,68,0" name="textBox2" 
                 Text
="{Binding Path=Age, Mode=TwoWay}"  VerticalAlignment="top" WIDth="120" />
            
<button Content="button" Height="23" HorizontalAlignment="left" margin="53,112,0" name="button1"
                VerticalAlignment
="top" WIDth="75"  Command="{Binding Path=DataContext.GetPerson, Elementname= LayoutRoot }" 
                    CommandParameter
="{Binding Path=Age, Elementname=hi}"  />
      
</GrID>
    
</GrID>
      
</UserControl>

        通过对上面的一个小例子,希望能帮且你理解MVVM模式。也希望对你以后使用MVVM开发WPF或者Silverlight应用程序用帮助。

  因为自己的技术水平和英语水平有限,难免有不足之处,请大家多多指教。

  英文原文地址: http://www.dotnetspider.com/resources/36781-Silverlight-MVVM-pattern-with-ICommand.aspx

总结

以上是内存溢出为你收集整理的Silverlight:Silverlight 4 and MVVM pattern with ICommand全部内容,希望文章能够帮你解决Silverlight:Silverlight 4 and MVVM pattern with ICommand所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1020390.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存