通過上篇文章<WPF-MVVM模式學習筆記2——MVVM簡單樣例>中舉了一個例子，我對MVVM大概有了一個比較淺顯的意思。同時，看過前兩篇文章的人，也知道我的這個系列的文章大多數來源於其他的部落格，我其實只是起了一個彙總的作用，畢竟我也是在學習，肯定是要去網路上學習別人的筆記嘍。本篇文章將以溫故而知新的方式再次去理解MVVM，力求對MVVM的認識再深一個層次。

1.再看"M-V-VM"

    M：即Model，由現實世界抽象出來的模型。

    V：即View，檢視，介面，該介面與使用者輸入裝置進行互動。

2.View與Model如何進行互動？

    此時，Binding便可以發揮作用了，比如檢視上的某一個文字框中的文字和Model中的"使用者名稱"關聯起來, 使用者便可以通過操作該文字框來訪問和修改Model的"使用者名稱"了。但是在實際程式設計時，我們發現，Model中的屬性(或者方法)往往不那麼容易與View中的介面控制元件關聯起來。比如定義了一個時間的類Time，該時間類Time具有年、月、日三個屬性，如下

    public class Time
    {
        private string year;
        public string Year
        {
            get
            {
                return this.year;
            }
            set
            {
                this.year = value;
            }
        }


        private string month;
        public string Month
        {
            get
            {
                return this.month;
            }
            set
            {
                this.month = value;
            }
        }


        private string day;
        public string Day
        {
            get
            {
                return this.day;
            }
            set
            {
                this.day = value;
            }
        }

        public Time(string year, string month, string day)
        {
            this.year = year;
            this.month = month;
            this.day = day;
        }
    }
 

   同時還有一個介面TimeView，如下

   我想實現按下按鈕1，時間以年-月-日的形式展示；按下按鈕2，時間以月-日-年的形式展示。此時就需要進行一些“額外的操作”，即模型Time中的資料經過一些額外的處理才能傳給檢視，反之亦然。現在，我們意識到這個View似乎需要一個"Helper"類來處理一些額外工作。這個Helper所包含的程式碼可以放在Model（例如這裡的Time）外的很多地方，比如對應的View.cs中。而且我之前確實是這麼做的，將絕大數處理邏輯放在所謂的CodeBehind中。

3.後來...

   後來，在各種設計模式書籍中所看到的一樣，為了將View和Model剝離開來，實現View可替換，便有了MVC。有了MVC以後，就開始有了MVP、MVVM等等M-V-XX。但是幾乎(我還是加個幾乎吧，因為其他設計模式我也沒有接觸過)所有這些設計模式都主要圍繞兩個問題：

   一是Model與View之間的關係，完全隔離的？單向的還是雙向的?

   二是這個"XX"需要完成哪些功能,簡單流程排程?複雜規則處理?

   這些問題都沒有關係, 是否採用某種模式取決於你的開發所處的環境(比如語言特性,框架特性)以及你的業務特性以及所面臨的主要變化點等等。

4.但是...

   但與MVC,MVP所不同的是,MVVM的引入不僅僅是技術上的原因(解除耦合應對變化等老生常談)，另外一個很大原因是:軟體團隊開發方式的改變。我們需要一種方式將View層的程式碼邏輯抽取出來，並View層很純粹以便完全讓美工去打造它。相應地,，需要將View層的相應邏輯抽取到一個程式碼層上，以便讓程式設計師專注在這裡。這就需要：

   ① 你擁有能夠熟練運用Blend等工具能為程式設計師輸出XAML的美工，他專注於純粹的UI/UE，另外他還必須具有一定的"程式設計師"思維，以便輸出的東西能很好地作為程式的一部分而運轉起來，而不是僅僅"看上去"是那樣的；

   ② 你需要能夠脫離View層但仍能編寫出高質量程式碼的程式設計師。

5. Binding、Command、AttachBehavior

   回想一下， 我們之所以要在View(Xaml)背後寫一些程式碼(C#)，無非是想傳遞一些資料以及傳遞資料時的資料的處理或在使用者與介面控制元件進行互動時執行一些操作。最簡單的例子是在MVC中當介面發生互動時View去呼叫Controler中的某個方法，以便將該操作的相應"指示"傳遞到"後臺"去。在以前的技術中, 這樣的"銜接性"的程式碼是必須的。而在WPF中, 則可以通過另外的技術來進行層與層之間的"銜接", 這就是"Binding" 和"Command", 以及"AttachBehavior"。

   通過Binding，我們可以實現資料的傳遞；通過Command，我們可以實現操作的呼叫。Binding和Command是可以寫在XAML中的， 這樣看來XAML後面對於的CS檔案可以被完全拋棄或不予理會了，這樣的XAML檔案正是美工所需要的。而這些對於Binding以及Command的定義描述以及其他相關資訊的程式碼應該放在那裡呢，當然不是View， 更不是Model，是“ViewModel”。ViewModel是為這個View所量身定製的，它包含了Binding所需的相關資訊，比如Converter以及為View的Binding提供DataContext，它包含了Command的定義以便View層可以直接使用， 另外，它還是一個變種的Controler， 它得負責業務流程的排程。

   上圖非常直觀的展示View\ViewModel\Model的互動圖，真的很佩服繪出這幅圖的作者，太直觀了。

那麼AttachBehavior又是什麼呢？一般情況下利用Command, Binding, AttachProperty等WPF特性， View和ViewModel之間能配合工作得很好。假設我們有一個Button，當該Button被點選的時候我們要完成一些操作，很簡單，將該操作封裝成一個Command並繫結到該Button上就可以了。但如果我們要在Button被Load的時候執行另外一些操作呢？ 由於Button沒有直接被Load事件所觸發的Command， 所以不能使用Command了。不能直接將Load事件處理器寫在Button所在的Xaml所對應的CS檔案裡， 這和我們剛才對MVVM的設計是相矛盾的。 一個不太好的方案是繼承一下Button， 並撰寫一個由Load所觸發的Command，這可行， 但明顯不好， 正如一個控制元件沒有某個屬性並且在不繼承的情況下而採用AttachProperty一樣，我們可以採用AttachBehavior。

6.收尾

    到這裡，又瞭解了MVVM，同時也知道了ViewModel的作用，那麼久可以利用這個模式解決上面的時間顯示的問題了，

   新增類TimeViewModel，內容如下

    public class TimeViewModel : NotificationObject
    {
        private Time time;
        public Time Time
        {
            get
            {
                return this.time;
            }
            set
            {
                this.time = value;
                this.RaisePropertyChanged(() => this.time);
            }
        }

        public TimeViewModel()
        {
            time = new Time("1991","02","23");
            birthday = time.Year + "-" + time.Month + "-" + time.Day;
        }

        private string birthday;
        public string Birthday
        {
            get
            {
                return this.birthday;
            }
            set
            {
                this.birthday = value;
                this.RaisePropertyChanged("Birthday");
            }
        }


        public bool CanSubmit
        {
            get
            {
                return true;
            }
        }

        public void Submit1()
        {
            Birthday = time.Year + "-" + time.Month + "-" + time.Day;
        }

        public void Submit2()
        {
            Birthday = time.Month + "-" + time.Day + "-" + time.Year;
        }

    }

   此時View檢視內容為下

<UserControl x:Class="MVVMDemo.View.TimeView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
             xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions" 
             xmlns:vm="clr-namespace:MVVMDemo.ViewModel"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="400">
    <Grid x:Name="gridLayout">
        <Grid.DataContext>
            <vm:TimeViewModel />
        </Grid.DataContext>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="5*" />
            <ColumnDefinition Width="5*" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="5*" />
            <RowDefinition Height="5*" />
            <RowDefinition Height="5*" />
            <RowDefinition Height="5*" />
        </Grid.RowDefinitions>

        <TextBlock Text="Time:" Grid.Row="0" Grid.Column="0" VerticalAlignment="Center" HorizontalAlignment="Center"/>
        <TextBlock Text="{Binding Path=Birthday,Mode=Default}" Grid.Row="0" Grid.Column="1" VerticalAlignment="Center" HorizontalAlignment="Left"/>

        <Button x:Name="Btn1" Content="按鈕1：年-月-日"  IsEnabled="{Binding CanSubmit}"  Grid.Row="2" Grid.Column="0" Width="150" Height="50" VerticalAlignment="Center" HorizontalAlignment="Right">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:CallMethodAction TargetObject="{Binding}" MethodName="Submit1"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>

        <Button x:Name="Btn2" Content="按鈕2：月-日-年"  IsEnabled="{Binding CanSubmit}"  Grid.Row="2" Grid.Column="1" Width="150" Height="50" VerticalAlignment="Center" HorizontalAlignment="Right">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <ei:CallMethodAction TargetObject="{Binding}" MethodName="Submit2"/>
                </i:EventTrigger>
            </i:Interaction.Triggers>
        </Button>
    </Grid>
</UserControl>

  編譯執行程式(該工程點此下載)

(2.23就快到我的生日了，不知道還有沒有人會記得呢，呵呵)

文章來源

感謝這位朋友！！你講的很易懂！！