MVVM模式
一、MVVM模式概述
MVVM Pattern : Model\View\ViewModel
View：视图、UI界面
ViewModel：ViewModel是对Model的封装，通过一系列属性暴露Model的状态，提供给View进行显示
Model：数据模型
使用MVVM模式可以将代码逻辑和UI进行分离，因此开发团队可以关注创建健壮的ViewModel类，而设计团队可以关注设计界面友好的View。要融合两个团队输出只需要在View的xaml上进行正确的绑定即可。
二、演示程序
下面通过一个Demo演示WPF中如何使用MVVM模式：使用WPF中的data template、commands、data binding、resource结合MVVM模式，创建一个简单、可测试、健壮的框架。
演示程序结构图如下：
1、演示程序 Demo界面如图所示：
工作区用于显示视图
命令区分两部分，上部分为显示单视图命令，下部分为显示多视图命令
单视图：工作区始终只显示一个视图。
多视图：工作区可以显示多个视图，以TabControl控件的TabItem进行展示。可以通过previousview命令显示视图集合中的上一个视图，通过nextview显示视图集合中的下一个视图。
Demo的MainWindow.xaml文件中，使用单视图时，需要注释多视图；使用多视图时，需要注释单视图。代码如下：
<!--single view-->
<ContentPresenter Content="{Binding Path=WorkspaceSingle}"/>
<!--multi view-->
<ContentPresenter Content="{Binding Path=WorkspaceMulti}" ContentTemplate="{StaticResource WorkspacesTemplate}"/>
三、数据模型(Model)、视图（View）
为了使Demo更容易理解，程序中只使用了一个Model，Model中Name属性用于显示视图名称。
public class InfoModel
{
//视图名称
public string Name { get; set; }
}
两个简单的视图：FirstView、SecondView，视图中控件显示当前的视图名称，如视图FirstView：
<StackPanel Background="Aqua">
<TextBlock Text="{Binding Path=Name}" FontSize="20"/>
</StackPanel>
<StackPanel Background="Chartreuse">
<TextBlock Text="{Binding Path=Name}" FontSize="20"/>
</StackPanel>
在实际开发中，视图中可以布局其它控件，并进行正确的绑定，界面都能正常的显示。
显示多视图时，TabItem的Header能显示视图名称，如图所示：
视图名称DisplayName是基类ViewModelBase的属性
/// <summary>
/// 名称
/// </summary>
public virtual string DisplayName { get; protected set; }
子类在构造函数中给DisplayName赋值
public class FirstViewModel : WorkspaceViewModel
{
private const string DisplayViewName = "FirstView";
private readonly InfoModel _info;
public FirstViewModel()
{
//视图名称
base.DisplayName = DisplayViewName;
if (_info == null)
{
_info = new InfoModel();
}
_info.Name = DisplayViewName;
}
public string Name
{
get { return _info.Name; }
}
}
在View中绑定视图名称
<DataTemplate x:Key="TabItemTemplate">
<DockPanel>
<ContentPresenter Content="{Binding Path=DisplayName}" VerticalAlignment="Center"/>
</DockPanel>
</DataTemplate>
四、ViewModel类图
大家一看代码就知道，整个ViewModel使用的是什么设计模式
五、View对应ViewModel
Demo的一个主要特点是数据延迟加载，即在需要数据时创建ViewModel
程序在启动时即为主界面加载数据MainWindowViewModel
public partial class App : Application
{
protected override void OnStartup(StartupEventArgs e)
{
base.OnStartup(e);
MainWindow window = new MainWindow();
var viewModel = new MainWindowViewModel();
window.DataContext = viewModel;
window.Show();
}
}
程序启动后，单击按钮时创建FirstViewModel或SecondViewModel
创建单视图
/// <summary>
/// 显示视图一
/// </summary>
private void ShowFirstView()
{
if (_workspaceStory == null)
{
_workspaceStory = new ObservableCollection<WorkspaceViewModel>();
}
var model =
this._workspaceStory.FirstOrDefault(vm => vm is FirstViewModel)
as FirstViewModel;
if (model == null)
{
model = new FirstViewModel();
_workspaceStory.Add(model);
}
WorkspaceSingle = model;
}
/// <summary>
/// 显示视图二命令
/// </summary>
private void ShowSecondView()
{
if (_workspaceStory == null)
{
_workspaceStory = new ObservableCollection<WorkspaceViewModel>();
}
var model =
this._workspaceStory.FirstOrDefault(vm => vm is SecondViewModel)
as SecondViewModel;
if (model == null)
{
model = new SecondViewModel();
_workspaceStory.Add(model);
}
WorkspaceSingle = model;
}
创建多视图
/// <summary>
/// 创建视图一，并显示
/// </summary>
private void CreateFirstView()
{
var model = new FirstViewModel();
WorkspaceMulti.Add(model);
ShowCurrentView(model);
}
/// <summary>
/// 创建视图二
/// </summary>
private void CreateSecondView()
{
var model = new SecondViewModel();
WorkspaceMulti.Add(model);
ShowCurrentView(model);
}
创建后，WPF自动为匹配的View Model寻找View来渲染。
<DataTemplate DataType="{x:Type vm:FirstViewModel}">
<vw:FirstView/>
</DataTemplate>
<DataTemplate DataType="{x:Type vm:SecondViewModel}">
<vw:SecondView/>
</DataTemplate>
六、总结
MVVM模式是设计和开发WPF程序一种简单、有效的指导方针。它允许你创建数据、行为和展示强分离的程序，更容易控制软件开发中的混乱因素。
如需要Demo请加QQ群：130108655