从Prism中学习设计模式之MVVM 模式简述MVVM
从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执行函数后效果：
分类: .Net
标签: C# , WPF , .NET , Prism , MVVM
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息查看更多关于从Prism中学习设计模式之MVVM 模式简述MVVM的详细内容...