你的位置:首页 > ASP.net教程

[ASP.net教程]WPF之MVVM模式(1)


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程序一种简单、有效的指导方针。它允许你创建数据、行为和展示强分离的程序,更容易控制软件开发中的混乱因素。