从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:

namespace SimpleMVVMApp.Business.Model {
    public class Album : INotifyPropertyChanged {
        public event PropertyChangedEventHandler PropertyChanged;

        public string Name {
            get {
                return this.name;
            }
            set {
                if (value != this.name) {
                    this.name = value;
                    if (this.PropertyChanged != null) {
                        this.PropertyChanged(this, new PropertyChangedEventArgs("Name"));
                    }
                }
            }
        }

        public string Path { get; set; }

        public string Border {
            get {
                return this.border;
            }
            set {
                if (value != this.border) {
                    this.border = value;
                    if(this.PropertyChanged != null){
                        this.PropertyChanged(this,new PropertyChangedEventArgs("Border"));
                    }
                }
            }
        }

        private string name;
        private string border;
    }
}

　　ViewModel:

    public class AlbumViewModel {
        public Album Album {
            get {
                return this.album;
            }
        }

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

        public ICommand RediectCommand { get; private set; }

        public AlbumViewModel() {
            this.album = new Album { Name = "MVVM" };
            this.RediectCommand = new RelayCommand((o) => this.OnRediect(o));
        }

        private void OnRediect(object args) {
            this.album.Name = "Command";
            //Todo Get Photo List and Rediect to page
        }

        private readonly Album album;
    }

　　View:

<UserControl x:Class="SimpleMVVMApp.View.AblumView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:vm="clr-namespace:SimpleMVVMApp.Business.ViewModel"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <UserControl.DataContext>
        <vm:AlbumViewModel/>
    </UserControl.DataContext>
    <Grid>
        <Button Command="{Binding RediectCommand}" Content="{Binding Album.Name}"></Button>
    </Grid>
</UserControl>

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

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

　　

　　　　　　　　　　　　　　　　　　　　图1　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图2

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