MVVM Light 新手入门（2） ：ViewModel / Model 中定义“属性” ，并在View中调用

今天学习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); }
　　} 

---

---

 

新手入门，理解上有偏差，请各位老师提宝贵意见。