在学习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