今天學習MVVM架構中“屬性”的新增並呼叫，特記錄如下，學習資料均來自於網路，特別感謝翁智華的利刃 MVVMLight系列。

 

一個視窗的基本模型如下：

View（檢視） -> ViewModel （檢視模型）-> 多個Model（模型）

注：

1. 檢視是使用者在螢幕上看到的結構、佈局和外觀（UI）
2. 檢視模型是暴露公共屬性和命令的檢視的抽象。在檢視模型中，繫結器在檢視和資料繫結器之間進行通訊。
3. 模型是指代表真實狀態內容的領域模型（面向物件），或指代表內容的資料訪問層（以資料為中心）。

 

下面開始學習最基礎的寫法

1、新建一個Model

public class WelcomeModel : ObservableObject
    {
        private String introduction;
        /// <summary>
        /// 歡迎詞
        /// </summary>
        public String Introduction
        {
            get { return introduction; }
            set { introduction = value; RaisePropertyChanged(() =>
 
 Introduction); }
        }
    }

 

• 這個Model繼承了一個父類：ObservableObject，這個父類的作用就是保證能夠檢測屬性是否被改變。它實現了INotifyPropertyChanged介面，通過觸發PropertyChanged事件達到通知UI更改的目的；

• 實體裡面定義的每個屬性都加上RaisePropertyChanged(PropertyName)的呼叫，就可以實現對UI的互動更新了。

2、新建一個VideModel，來負責跟View的互動

public class WelcomeViewModel : ViewModelBase
    {
        
 
/// <summary>
        /// 建構函式
        /// </summary>
        public WelcomeViewModel()
        {
            Welcome = new WelcomeModel() { Introduction = "Hello World！" };
        }
        #region 屬性

        private WelcomeModel welcome;
        /// <summary>
        /// 歡迎詞屬性
        /// </summary>
        public WelcomeModel Welcome
        {
            get { return welcome; }
            set { welcome = value; RaisePropertyChanged(() => Welcome); }
        }
        #endregion
    }

類包含了一個命名為Welcome的WelcomeModel屬性，繼承了ViewBaseModel父類，繼承了ViewBaseModel父類，ViewBaseModel同時繼承 ObservableObject類和ICleanup介面。所以他同樣有INotifyPropertyChanged介面的能力，能夠通過觸發PropertyChanged事件達到通知View的目的；   3、寫一個View，來顯示和互動ViewModel。

<Window x:Class="Pvd.View.WelcomeView"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        Title="WelcomeView" Height="450" Width="800">
    <Grid>
        <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" >
            <TextBlock Text="{Binding Welcome.Introduction}" FontSize="30" ></TextBlock>
        </StackPanel>
    </Grid>
</Window>

TextBlock 綁定了 Welcome.Introduction，所以應該顯示Welcome物件下的Introduction屬性。

這時候的ViewModel和View是沒有任何關係的，所以我們在code-Behind的建構函式中寫上如下程式碼： 

using Pvd.ViewModel;
using System.Windows;

namespace Pvd.View
{
    /// <summary>
    /// WelcomeView.xaml 的互動邏輯
    /// </summary>
    public partial class WelcomeView : Window
    {
        public WelcomeView()
        {
            InitializeComponent();
            this.DataContext = new WelcomeViewModel();
        }
    }
}

把 WelcomeViewModel 賦值給當前檢視的資料上下文。所以可以在當前檢視中使用ViewModel中所有的公開屬性和命令。

 執行結果正常

 

 

---

 

總結：

1、通過 this.DataContext = new WelcomeViewModel(); 把 View 和 ViewModel 繫結。繫結後，可以直接在View中呼叫 ViewModel中公開的屬性和命令

2、所有的VideModel 都需要繼承於：ViewModelBase

3、所有的Model都繼承於ObservableObject

4、定義屬性方法如下，並在每個屬性中都加上RaisePropertyChanged(PropertyName)的呼叫，就可以實現對UI的互動更新了。 

 

　　private String ~introduction;

 

　　public String Introduction
　　{
　　　　get { return ~introduction; }
　　　　set { ~introduction= value; RaisePropertyChanged(() => Introduction); }
　　} 

---

---

 

新手入門，理解上有偏差，請各位老師提寶貴意見。

下一篇博文我將學習如何在MVVM架構中新增並呼叫方法。