从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

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

 

posted @ 2013-04-22 12:21  老鱼_678  阅读(2313)  评论(4)  编辑  收藏  举报