写本篇纯属意外。原来想用主从数据显示的例子记录页面间切换的方法的，后来在园子里看到有一篇写页面切换的文章介绍得很详尽了，代码做了一半，真是鸡肋啊。于是想，干脆把代码改改，弄成个MVVM模式来展示主从数据吧。
为了突出重点，示例不考虑美工方面的问题——嘿嘿，美工实在太差了，各位见谅。
首先来看完成后的效果：
启动时候，显示一个空的页面，点击“Show Data”，显示出所有的班级信息。
当用户点击其中某一个班级的时候，跳转到一个班级的学生列表中去。详细信息页面底部还提供一个返回按钮，可以返回到班级选择的页面：
整个项目完成了以后，结构如下：
项目大体上分为Models、Views和ViewModels三个部分。其中，Models又被细分为“Entities”、“Interfaces”和“Services”三个部分。
•
Models
Models主要存放两件东西：1.实体类。2.提供的服务。实体类是指对事物的属性的抽象构成的类——这个好像比较抽象啊:-)其实，非常简单，就是一些代表事物的属性的集合，例如，一个班级的ID和名称就代表着一个班级，我们就写成Classes类：
namespace SilverlightNotes.Navigate.Models.Entities
{
public class Classes
{
public int ID { get; set; }
public string Name { get; set; }
}
}
类似的，我们把一个学生抽象成由“编号”、“姓名”和“班组”组成，就有了Student类：
namespace SilverlightNotes.Navigate.Models.Entities
{
public class Student
{
public int ID { get; set; }
public string Name { get; set; }
public int ClassID { get; set; }
}
}
我们看到，实体类只有属性，没有方法。通常，我们需要从某个地方去获取数据来填充或者说生成这些实体类的实例，我们把这一些获取数据的方法做成服务接口。这些接口被统一存放在Interfaces下面。以下是班级类的接口：
using System.Collections.Generic;
using SilverlightNotes.Navigate.Models.Entities;
namespace SilverlightNotes.Navigate.Models.Interfaces
{
/// <summary>
/// Provide student related services
/// </summary>
public interface IClassesService
{
/// <summary>
/// Get all classes
/// </summary>
/// <param name="belongTo"></param>
/// <returns></returns>
List<Classes> GetClasses();
}
}
类似的，学生类的服务接口如下：
using System.Collections.Generic;
using SilverlightNotes.Navigate.Models.Entities;
namespace SilverlightNotes.Navigate.Models.Interfaces
{
/// <summary>
/// Provide student related services
/// </summary>
public interface IStudentService
{
/// <summary>
/// Get all students in a class
/// </summary>
/// <param name="belongTo"></param>
/// <returns></returns>
List<Student> GetStudentByClasses(Classes belongTo);
}
}
然后，我们需要具体的服务来完成这一些接口。这些服务应该是通过访问数据库啊之类的数据存储，来提供实体类实例数据。这里为了演示，只写了两个假的数据提供类，来提供一些示例数据，它们分别实现了IClassesService接口和IStudentService接口：
using System.Collections.Generic;
using SilverlightNotes.Navigate.Models.Entities;
using SilverlightNotes.Navigate.Models.Interfaces;
namespace SilverlightNotes.Navigate.Models.Services
{
public class MockClasses : IClassesService
{
/// <summary>
/// Return mocked 5 classes
/// </summary>
/// <returns></returns>
public List<Classes> GetClasses()
{
const int classCount = 5;
List<Classes> result = new List<Classes>(classCount);
for (int i = 0; i < classCount; i++)
{
result.Add(new Classes() { ID = i, Name = string.Format("Class - {0}", i + 1) });
}
return result;
}
}
}
和
using System.Collections.Generic;
using SilverlightNotes.Navigate.Models.Entities;
using SilverlightNotes.Navigate.Models.Interfaces;
namespace SilverlightNotes.Navigate.Models.Services
{
public class MockStudent:IStudentService
{
public List<Student> GetStudentByClasses(Classes belongTo)
{
const int studentCount = 15;
List<Student> result = new List<Student>(studentCount);
//Create faked student objects and add them into the collection
for (int i = 0; i < studentCount; i++)
{
result.Add(new Student() { ID = i + 1000, ClassID = belongTo.ID, Name = string.Format("Student{0}", i + 1) });
}
return result;
}
}
}
好，Model部分完成。
•
View
理论上讲，在MVVM模式中，View和Model是可以同时进行的。因为这两部分不会直接产生任何关系。我们需要做的，只是把界面“画”出来。本例中，一共需要三个View：MainPage、ClassesView和StudentView。
在这里MainPage类似于ASP.NET中的“MasterPage”的作用：我们用一个TextBlock来提供页面的标题，然后，用Border来模拟一个PlaceHolder，初步的想法是，页面切换时，只需要修改Border.Child属性即可。呵呵，在此偷个懒，其实所有的界面是用Blend画出来的。简单的来看一下MainPage的XAML吧：
<Grid x:Name="LayoutRoot" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25"/>
<ColumnDefinition/>
<ColumnDefinition Width="25"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="26"/>
<RowDefinition Height="36"/>
<RowDefinition Height="314"/>
<RowDefinition Height="24"/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" FontFamily="Trebuchet MS" FontSize="18.667"/>
<Border x:Name="bdrPlaceHolder" Grid.Column="1" Grid.Row="2" BorderBrush="Black" BorderThickness="1" />
</Grid>
这是一个4行3列的Grid，其实周边一圈是Margin，剩下2行1列。第1行放了一个TextBlock，用来放标题，例如“MVVM Navigation Demo”。Border的作用，前面已经讲过。
ClassesView中直接放了一个StackPanel，然后堆上一个“Show Data”的Button和一个显示数据的ListBox，就可以交差了。而StudentView则堆放了一个DataGrid和一个Button。
•
ViewModel
ViewModel是View和Model之间的纽带。我们把View绑定到ViewModel的类上，而ViewModel类同时又包装了Model的实体和服务。这样，当用户对界面操作时，会引发ViewModel的变化。ViewModel调用Model提供的服务，修改其包装的实体或实体集。由于这些实体或者实体集同样被绑定到了界面，因此，界面对用户的操作作出反应。
那么，如何来创建ViewModel类？让我们以MainPageViewModel类为例：
一、依葫芦画飘——看View搭出ViewModel类
打开MainPage，观察，它有一个TextBlock，因此，我们需要一个string类型的属性；它有一个Border作为PlaceHolder，因此，我们需要一个UIElement类型的属性；它可以加载ClassesView，因此，我们有一个加载ClassesView的方法（NavigateToClasses）；它又可以加载StudentView，因此，我们又有了一个加载StudentView的方法（NavigateToStudnet）。创建出的类如下：
using System.ComponentModel;
using SilverlightNotes.Navigate.Views;
using SilverlightNotes.Navigate.Models.Entities;
namespace SilverlightNotes.Navigate.ViewModels
{
public class MainPageViewModel : INotifyPropertyChanged
{
#region Construction
private ClassesView _classesViewCache;
public MainPageViewModel()
{
PageTitle = "MVVM Navigation Demo";
}
#endregion
#region Properties
public string PageTitle { get; set; }
public UIElement DisplayContent { get; set; }
#endregion
#region Faked Commands
public void NavigateToClasses()
{
}
public void NavigateToStudent(Classes selectedClass)
{
}
#endregion
}
}
二、绑定属性，添加方法调用代码
ViewModel类创建之后，我们就可以把属性和对应的控件绑定起来。例如，把PageTitle绑定到MainPage的TextBlock上：
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding PageTitle}" TextWrapping="Wrap" FontFamily="Trebuchet MS" FontSize="18.667"/>
绑定以后，需要修改ViewModel类，对于一般的属性，修改时需要触发“PropertyChanged”事件，而对于集合类属性，则最好使用ObservableCollection<T>类型的集合。以MainPage中的PageTitle为例，首先要让其实现“INotifyPropertyChanged”接口，而在属性修改时，需要触发相应事件：
using System.ComponentModel;
using SilverlightNotes.Navigate.Views;
using SilverlightNotes.Navigate.Models.Entities;
namespace SilverlightNotes.Navigate.ViewModels
{
public class MainPageViewModel : INotifyPropertyChanged
{
#region Events
public event PropertyChangedEventHandler PropertyChanged = delegate { };
#endregion
#region Construction
private ClassesView _classesViewCache;
public MainPageViewModel()
{
PageTitle = "MVVM Navigation Demo";
}
#endregion
#region Properties
private string _pageTitle;
public string PageTitle
{
get
{
return _pageTitle;
}
set
{
_pageTitle = value;
PropertyChanged(this, new PropertyChangedEventArgs("PageTitle"));
}
}
...
#endregion
...
}
}
这里又偷了个小懒，由于不想每次判断事件是否被注册，因此，事件声明的时候，就给它加了个匿名方法，也省得考虑什么线程安全等麻烦事了。
由于我们期望在主页面载入的时候就自动加载班级的页面，因此，我们在MainPage的构造函数里添加少许代码：
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
InitializeDataBind();
}
private void InitializeDataBind()
{
var mainPageViewModel = new MainPageViewModel();
this.DataContext = mainPageViewModel;
mainPageViewModel.NavigateToClasses();
}
}
我们首先创建了一个MainPageViewModel的实例作为本页的ViewModel赋给DataContext，然后，调用其NavigateToClasses，让其加载班级页。
另外一种比较典型的情况是，用户点击按钮，调用方法改变界面状态。例如我们在School页面里的“Back”按钮。
三、调用Model，实现方法
我们是想着让MainPage来显示班级视图，但实际上，这个方法还没有实现。让我们来看一下其实现：
using System.ComponentModel;
using SilverlightNotes.Navigate.Views;
using SilverlightNotes.Navigate.Models.Entities;
namespace SilverlightNotes.Navigate.ViewModels
{
public class MainPageViewModel : INotifyPropertyChanged
{
#region Construction
private ClassesView _classesViewCache;
public MainPageViewModel()
{
PageTitle = "MVVM Navigation Demo";
}
#endregion
#region Properties
...
#endregion
#region Faked Commands
public void NavigateToClasses()
{
if (_classesViewCache == null)
{
ClassViewModel classViewModel = new ClassViewModel();
ClassesView classesView = new ClassesView();
classesView.DataContext = classViewModel;
_classesViewCache = classesView;
DisplayContent = classesView;
}
else
{
DisplayContent = _classesViewCache;
}
}
public void NavigateToStudent(Classes selectedClass)
{
...
}
#endregion
}
}
首先，检查了一下有没有页面的缓存，如果没有，那么创建一个新的页面对象和它对应的ViewModel，设定好DataContext以后，我们就重新设置DisplayContent属性。由于DisplayContent属性会触发“EventChanged”事件，界面会回应此事件作出相应的变动。
这个页面由于没有涉及到具体后来数据的操作，因此，并没有直接调用Model里的服务。我们再来看一下比较典型的ViewModel：
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using SilverlightNotes.Navigate.Models;
using SilverlightNotes.Navigate.Models.Entities;
using SilverlightNotes.Navigate.Models.Interfaces;
namespace SilverlightNotes.Navigate.ViewModels
{
public class ClassViewModel:INotifyPropertyChanged
{
public ClassViewModel()
{
Data = new ObservableCollection<Classes>();
}
#region Data
public ObservableCollection<Classes> Data { get; protected set; }
#endregion
#region Facked Commands
public virtual void ShowData()
{
//clean original data first
Data.Clear();
//Get data
IClassesService classService = ServiceProvider.GetClassesService();
//Add them into the Observable collection
foreach (var item in classService.GetClasses())
{
Data.Add(item);
}
}
#endregion
public event PropertyChangedEventHandler PropertyChanged = delegate { };
}
}
Data属性即对外暴露的数据集。ShowData方法中，首先清空原来Data中的数据；然后，创建了一个实现IClassService的服务对象。最后，把数据项一一更新到Data集合里去。我们再次看到，由于ViewModel和View是绑定在一起的，因此，我们在写代码的时候，不需要去考虑页面的更新。
意外
本来，这个Demo到此已经全部结束，运行一下，出现却得到一个十分诡异的异常——AG_E_RUNTIME_MANAGED_UNKNOWN_ERROR：
看上去像是XAML的解析出了问题，跟着行列到MainPage.xaml里找了一通，也没看出什么问题来。G了一下，才知道是Broder.Child属性不能正常绑定。应该是一个Silverlight的Bug。这下晕了，这样的话，如果要用ViewModel来控制Navigation，就得在ViewModel里设置页面上“Border.Child”属性，这下子View和ViewModel由绑定这种较松的耦合变成代码的强耦合……后来考虑了一下，借鉴INotifyProperty接口的实现方法，在MainPageViewModel的类里添加一个事件，当DisplayContent修改时，触发这个事件。在View里只需要少量的代码，就可以实现类似于单向绑定的效果：
修改后的MainPageViewModel类：
using System.ComponentModel;
using SilverlightNotes.Navigate.Views;
using SilverlightNotes.Navigate.Models.Entities;
namespace SilverlightNotes.Navigate.ViewModels
{
public class MainPageViewModel : INotifyPropertyChanged
{
#region Events
/// <summary>
/// Provide to inform observers that DisplayContent changed we can't bind a user control to a child of another control.
/// </summary>
public event EventHandler DisplayContentChanged = delegate { };
public event PropertyChangedEventHandler PropertyChanged = delegate { };
#endregion
#region Construction
private ClassesView _classesViewCache;
public MainPageViewModel()
{
PageTitle = "MVVM Navigation Demo";
}
#endregion
#region Properties
private string _pageTitle;
public string PageTitle
{
...
}
private UIElement _displayContent;
public UIElement DisplayContent
{
get
{
return _displayContent;
}
set
{
_displayContent = value;
PropertyChanged(this, new PropertyChangedEventArgs("DisplayContent"));
DisplayContentChanged(this, new EventArgs());
}
}
#endregion
#region Faked Commands
public void NavigateToClasses()
{
...
}
public void NavigateToStudent(Classes selectedClass)
{
...
}
#endregion
}
}
另外，在MainPage里，也需要做一点点的小功课——谁让绑定不能用呢：
using SilverlightNotes.Navigate.ViewModels;
namespace SilverlightNotes.Navigate
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
InitializeDataBind();
}
private void InitializeDataBind()
{
var mainPageViewModel = new MainPageViewModel();
this.DataContext = mainPageViewModel;
mainPageViewModel.DisplayContentChanged += new EventHandler(mainPageViewModel_DisplayContentChanged);
mainPageViewModel.NavigateToClasses();
}
private void mainPageViewModel_DisplayContentChanged(object sender, EventArgs e)
{
MainPageViewModel mainPageViewModel = this.DataContext as MainPageViewModel;
if (mainPageViewModel != null)
{
this.Dispatcher.BeginInvoke(
delegate
{
bdrPlaceHolder.Child = mainPageViewModel.DisplayContent;
});
}
}
}
}
•
写在最后
MVVM模式原生应用于WPF，由于Silverlight可以看作是WPF的子集，这一模式同样可以较好的应用于Silverlight。但是由于Silverlight的不成熟，还存在一些BUG，导致模式中有一些部分不能够正常应用。但是，我们可以通过一些Work-around，一些灵活处理，在尽可能多的利用模式给我们带来的便利的同时，完成程序的全部功能。
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/rise51/archive/2011/03/09/6234351.aspx
分享到：
相关推荐
MVVM模式实现图片分页显示 （1）数据使用WCF服务加载 （2）定制ListBox数据模板 （3）采用MVVM模式实现分页 注意：在运行前需要修改WCF服务Service1.svc方法GetAllPictureData中的图片文件夹路径，默认是C:\Users\My...
Wpf Mvvm模式下窗口ShowDialog的实现
这个Demo是WPF的MVVM模式的一个登录窗口的完整实例，包含了在MVVM模式下的数据绑定、命令和事件、PasswordBox的绑定、RadioButton等一对多控件的绑定、关闭窗口和打开新窗口和数据验证等内容。
MVVM模式MVVM模式MVVM模式MVVM模式MVVM模式MVVM模式MVVM模式MVVM模式MVVM模式
用MVVM架构实现的计算器小程序实例, 包括MVVM架构的命令对象和消息通知对象,小计算器加减乘除的实现逻辑.页面布局等简单知识.供WPF和MVVM初学者参考. 参考代码: /// /// 加法命令 /// public BaseCommand Add...
工程目录说明： ...repository:数据仓库，包括网络接口请求数据，sqlite数据库，文件File存储，SharedPreferences数据存储。 view:视图层，包含Activiy+Fragment类。 viewmodel:控制层。 utils:工具模块。
C#_WPF_MVVM模式完整实例(比较不错） 介绍的很好
WPF-MVVM WPF MVVM模式开发的例子程序
学习WPF时做的小例子，MVVM模式延时加载一棵树。解决系统中数据量比较大，树加载过程过慢的问题。
wpf闹钟 设计模式 Mvvm模式 Mvvmlight
利用微软的MVVM开发模式，方便高效的使用DataGrid控件实现功能。
使用MVVM模式对WPF中的DataGrid控件动态添加列，并实现了编辑模式。
MVVM模式结合MVVMlight框架的应用 程序=数据结构+算法 面向对象=对象+对象之间关系 1.以数据为中心的开发方式。 1）Model：定义一个数据结构。 关键代码：实现接口INotifyPropertyChanged 2）ViewModel：定义算法...
WPF设计的一个简单的计算器 使用MVVM模式 调用委托 对于WPF入门有很大的帮助 Ｃ＃
WPF MVVM DataGrid分页案例 运用数据绑定 Command 可作为MVVM学习使用
模仿vue的Mvvm简易实现，欢迎交流！里面实现了基本的功能，数据劫持，数据代理，双向绑定，订阅模式，数据驱动等
MVVM中的，如何通过命令实现窗体之间的跳转、拖动以及显隐控制一直是困扰初学者的一个难题，本程序通过简单的示例代码，实现了这些功能，可以帮助初学者快速掌握这些基础操作。
实现mvvm模式 Silverlight
[Microsoft Press] 构建.Net企业应用 (WPF 和 MVVM 模式实现) (英文版) [Microsoft Press] Building Enterprise Applications with Windows Presentation Foundation and the Model View ViewModel Pattern (E-Book...
最近项目中要使用到MVC模式进行开发，写了一个小例子，希望对部分朋友有一定的帮助。 另附有一份MVVM模式源码。