WPF之MVVM模式（1）

時間 2019-11-12

標籤 wpf mvvm 模式简体版

原文原文鏈接

MVVM模式

1、MVVM模式概述

MVVM Pattern : Model\View\ViewModel設計模式

View：視圖、UI界面框架

ViewModel：ViewModel是對Model的封裝，經過一系列屬性暴露Model的狀態，提供給View進行顯示ide

Model：數據模型函數

使用MVVM模式能夠將代碼邏輯和UI進行分離，所以開發團隊能夠關注建立健壯的ViewModel類，而設計團隊能夠關注設計界面友好的View。要融合兩個團隊輸出只須要在View的xaml上進行正確的綁定便可。佈局

2、演示程序

下面經過一個Demo演示WPF中如何使用MVVM模式：使用WPF中的data template、commands、data binding、resource結合MVVM模式，建立一個簡單、可測試、健壯的框架。測試

演示程序結構圖以下：this

一、演示程序 Demo界面如圖所示：spa

工做區用於顯示視圖設計

命令區分兩部分，上部分爲顯示單視圖命令，下部分爲顯示多視圖命令code

單視圖：工做區始終只顯示一個視圖。

多視圖：工做區能夠顯示多個視圖，以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>