从Prism中学习设计模式之MVVM 模式(一)--简述MVVM

在学习Prism中涉及的MVVM之前，我想有必要分别把MVC&MVP,MVVM,Command三种模式进行简单的总结，这样可以更好的理解Prism尤其是WPF的设计理念。

本文内容：

• MVVM的来龙去脉
• 为什么Prism使用MVVM
• 示例讲解

一、MVVM的来龙去脉

     在我们开发具有UI界面的应用程序时，MVC和MVP模式会被大量的采用，应用这些模式可以很容易的开发各类应用程序。随着WPF的普及，一种基于MVC&MVP模式的变种，MVVM模式被微软的p&p小组提出。通过页面，数据源，逻辑分离，MVVM使开发工作更容易分工，程序结构更清晰和易维护。

　　MVVM全称Model/View/ViewModel。

      Model即数据模型，可以是Json,数据库表内容，对象，XML,文本文件，本地储存内容等等等等。

　　View即视图也是UI，提供给最终用户交互界面，对于View来说Model是什么，并不关心，二者之间不需要联系。

      ViewModel即视图模型，负责为View所需呈现的数据提供数据源，为View的交互操作提供业务逻辑的支持。

二、为什么Prism使用MVVM

　　轻量级框架Prism通过应用MVVM，使开发团队专注于业务逻辑的开发，设计团队专注于为用户设计友好的交互界面，两个团队经可能小的涉及交叉设计开发。为了实现以上功能和发挥WPF的优势，Prism使用了多种设计模式进行功能的扩展。如通过Command模式设计扩展了中继命令逻辑，提供了AttachBehaiverCommand,DelegateCommand等。Lz以后会详细进行说明。

三、示例讲解

　　以下是一个非常Simple的MVVM Demo。场景：一个相册界面

　　1.显示相册列表

      2.点击相册列表中某一相册

      3.跳转事件触发

      4.跳转至某一相册

      5.图片列表加载

　　Demo 设计了数据类Album,用户UI AlbumView,视图模型AlbumViewModel，AlbumViewModel 提供跳转函数并实现ICommand接口，AlbumView触发Command执行AlbumViewModel的跳转函数。

　　Model:

 1 namespace SimpleMVVMApp.Business.Model {

 2     public class Album : INotifyPropertyChanged {

 3         public event PropertyChangedEventHandler PropertyChanged;

 4 

 5         public string Name {

 6             get {

 7                 return this.name;

 8             }

 9             set {

10                 if (value != this.name) {

11                     this.name = value;

12                     if (this.PropertyChanged != null) {

13                         this.PropertyChanged(this, new PropertyChangedEventArgs("Name"));

14                     }

15                 }

16             }

17         }

18 

19         public string Path { get; set; }

20 

21         public string Border {

22             get {

23                 return this.border;

24             }

25             set {

26                 if (value != this.border) {

27                     this.border = value;

28                     if(this.PropertyChanged != null){

29                         this.PropertyChanged(this,new PropertyChangedEventArgs("Border"));

30                     }

31                 }

32             }

33         }

34 

35         private string name;

36         private string border;

37     }

38 }

　　ViewModel:

 1     public class AlbumViewModel {

 2         public Album Album {

 3             get {

 4                 return this.album;

 5             }

 6         }

 7 

 8         public IEnumerable<string> Borders { get; private set; }

 9 

10         public ICommand RediectCommand { get; private set; }

11 

12         public AlbumViewModel() {

13             this.album = new Album { Name = "MVVM" };

14             this.RediectCommand = new RelayCommand((o) => this.OnRediect(o));

15         }

16 

17         private void OnRediect(object args) {

18             this.album.Name = "Command";

19             //Todo Get Photo List and Rediect to page

20         }

21 

22         private readonly Album album;

23     }

　　View:

 1 <UserControl x:Class="SimpleMVVMApp.View.AblumView"

 2              xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

 3              xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

 4              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 

 5              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 

 6              xmlns:vm="clr-namespace:SimpleMVVMApp.Business.ViewModel"

 7              mc:Ignorable="d" 

 8              d:DesignHeight="300" d:DesignWidth="300">

 9     <UserControl.DataContext>

10         <vm:AlbumViewModel/>

11     </UserControl.DataContext>

12     <Grid>

13         <Button Command="{Binding RediectCommand}" Content="{Binding Album.Name}"></Button>

14     </Grid>

15 </UserControl>

　　由于良好的显示效果不是本文的主题,LZ就简单了用了一个Button来表示UI，如果需要良好的显示交互效果，可以通过重写Visual Template或者另写一个Visual类来实现更好的显示效果。

　　图1，点击前效果，图2，通过Command执行函数后效果：

　　

　　　　　　　　　　　　　　　　　　　　图1　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图2

 源代码下载：http://files.cnblogs.com/tmywu/SimpleMVVMApp.7z