基於WPF系統框架設計(6)-整合MVVM框架(Prism)

應用場景

咱們基礎的框架已經搭建起來了，如今整合MVVM框架Prism，在ViewModel作一些邏輯處理，真正把界面設計分離出來。

這樣方便咱們系統開發分工合做，同時提升系統可維護性和靈活性。

具體的Prism安裝和Microsoft.Practices.Prism.dll獲取，在這個網址：http://compositewpf.codeplex.com/

原始的模式(Winform)

(1)如今看一下以前的設計的View: MainWindow.XAML源碼：

(2)MainWindow.xaml.cs源碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using Fluent;
using Xceed.Wpf.AvalonDock.Layout;

namespace TLAgent.SecurityManager.WPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
        private void OnExitSystem(object sender, RoutedEventArgs e)
        {
            MessageBoxResult result = MessageBox.Show("肯定要退出系統嗎?", "確認消息", MessageBoxButton.OKCancel, MessageBoxImage.Question);
            if (result == MessageBoxResult.OK)
            {
                Application.Current.Shutdown();
            }
        }
    }
}

傳統模式問題在哪裏?

如今若是咱們變一下View的Click事件名稱OnExitSystem」，就直接報錯了,由於這個事件名稱必須跟View後臺代碼中的OnExitSystem一致，二者相互依賴，分不開了，動其中一個都會有問題，使編譯出錯。

一樣，若是咱們把這個View刪除，那後臺代碼的邏輯也同樣被刪除了，之前編寫的邏輯都沒有了。

咱們如何可以達到二者分離，使邏輯部分功能可以很好地複用?

這就是咱們導入MVVM要解決的問題。

導入MVVM模式

步驟1：

1. 在項目中引入Microsoft.Practices.Prism.dll.
2. 新建幾個目錄:Models,ViewModels
3. 在ViewModels下新建一個類跟MainWindow.xaml對應的ViewModel:MainWindowViewModel.cs

解決方案目錄以下圖:

步驟2:

1. 讓MainWindowViewModel這個類繼承NotificationObject。

注意下圖顯示：NotificationObject是來自Microsoft.Practices.Prism.ViewModel。

定義一個委託命令:DelegateCommand命名爲ExitSystemCommand,並把它設爲可讀寫。

在構造函數中實例化這個對象，並給它綁定一個方法OnExit,源碼以下：

using Microsoft.Practices.Prism.ViewModel;

namespace TLAgent.SecurityManager.WPF.ViewModels
{
    public class MainWindowViewModel : NotificationObject
    {
        public DelegateCommand ExitSystemCommand { get; set; }

        public MainWindowViewModel()
        {
            ExitSystemCommand = new DelegateCommand(this.OnExit);
        }

        private void OnExit()
        {
            MessageBoxResult result = MessageBox.Show("肯定要退出系統嗎?", "確認消息", MessageBoxButton.OKCancel, MessageBoxImage.Question);
            if (result == MessageBoxResult.OK)
            {
                Application.Current.Shutdown();
            }
        }
    }
}

前臺View用Command綁定這個委託命令ExitSystemCommand ：

<!--Backstage Items-->
            <Fluent:Ribbon.Menu>
                <Fluent:Backstage Background="RoyalBlue">
                    <Fluent:BackstageTabControl Background="RoyalBlue">
                        <Fluent:Button Header="退出系統" Command="{Binding ExitSystemCommand}" Icon="Images\close.png"/>
                    </Fluent:BackstageTabControl>
                </Fluent:Backstage>
            </Fluent:Ribbon.Menu>

但是把程序運行點擊仍是沒有效果，還有關鍵的一步，加以下一行代碼:

using System.Windows;
using Fluent;
using TLAgent.SecurityManager.WPF.ViewModels;

namespace TLAgent.SecurityManager.WPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = new MainWindowViewModel();
        }

        private void OnExitSystem(object sender, RoutedEventArgs e)
        {
            MessageBoxResult result = MessageBox.Show("肯定要退出系統嗎?", "確認消息", MessageBoxButton.OKCancel, MessageBoxImage.Question);
            if (result == MessageBoxResult.OK)
            {
                Application.Current.Shutdown();
            }
        }
    }
}

運行一下程序，點擊「退出系統」按鈕，效果出來了~~~

另外：this.DataContext = new MainWindowViewModel(); 也能夠在View層的XAML裏面寫,參考以下:

這樣,MainWindow 裏的其餘源碼就能夠清掉了，反原初始的默認狀態。

using System.Windows;
using Fluent;
using TLAgent.SecurityManager.WPF.ViewModels;

namespace TLAgent.SecurityManager.WPF
{
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : RibbonWindow
    {
        public MainWindow()
        {
            InitializeComponent();
        }
    }
}

這一階段只整合一個簡單的示例,後續會添加更復雜ViewModel層的對View層控件的操做等功能。

示例源碼