WPF之MVVM模式（1）

MVVM模式

1、MVVM模式概述

MVVM Pattern : Model\View\ViewModel

View：视图、UI界面

ViewModel：ViewModel是对Model的封装，经过一系列属性暴露Model的状态，提供给View进行显示

Model：数据模型

使用MVVM模式能够将代码逻辑和UI进行分离，所以开发团队能够关注建立健壮的ViewModel类，而设计团队能够关注设计界面友好的View。要融合两个团队输出只须要在View的xaml上进行正确的绑定便可。

2、演示程序

下面经过一个Demo演示WPF中如何使用MVVM模式：使用WPF中的data template、commands、data binding、resource结合MVVM模式，建立一个简单、可测试、健壮的框架。

演示程序结构图以下：

一、演示程序 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}"/>

 

3、数据模型(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>

 

4、ViewModel类图

你们一看代码就知道，整个ViewModel使用的是什么设计模式

5、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>

 

6、总结

MVVM模式是设计和开发WPF程序一种简单、有效的指导方针。它容许你建立数据、行为和展现强分离的程序，更容易控制软件开发中的混乱因素。