MVVMLight学习笔记（三）---数据双向绑定

一、概述

本文与其说是MVVMLight框架的学习，不如说是温故一下数据的双向绑定。

二、Demo

建立好MVVMLight框架后的Wpf工程后，建立一个Model。Model、View以及ViewModel的代码如下：

using GalaSoft.MvvmLight;

namespace MvvmLightDemo1.Model
{
    public class WelcomeModel : ObservableObject
    {
        private string welcomeMsg;
        public string WelcomeMsg
        {
            get { return welcomeMsg; }
            set { welcomeMsg = value; RaisePropertyChanged(() => WelcomeMsg); }
        }
    }

}

using GalaSoft.MvvmLight;
using MvvmLightDemo1.Model;

namespace MvvmLightDemo1.ViewModel
{
    public class MainViewModel : ViewModelBase
    {
        private WelcomeModel welcomeModel;
        public WelcomeModel WelcomeModel
        {
            get { return welcomeModel; }
            set { welcomeModel = value; RaisePropertyChanged(() => WelcomeModel); }
        }
        /// <summary>
        /// Initializes a new instance of the MainViewModel class.
        /// </summary>
        public MainViewModel()
        {
            WelcomeModel = new WelcomeModel() { WelcomeMsg = "Welcome to MVVMLight World!" };
        }
    }
}

using CommonServiceLocator;
using GalaSoft.MvvmLight.Ioc;

namespace MvvmLightDemo1.ViewModel
{
    /// <summary>
    /// This class contains static references to all the view models in the
    /// application and provides an entry point for the bindings.
    /// </summary>
    public class ViewModelLocator
    {
        /// <summary>
        /// Initializes a new instance of the ViewModelLocator class.
        /// </summary>
        public ViewModelLocator()
        {
            ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
            SimpleIoc.Default.Register<MainViewModel>();
        }

        public MainViewModel Main
        {
            get
            {
                return ServiceLocator.Current.GetInstance<MainViewModel>();
            }
        }
        
        public static void Cleanup()
        {
            // TODO Clear the ViewModels
        }
    }
}

<Window x:Class="MvvmLightDemo1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:MvvmLightDemo1"
        mc:Ignorable="d"
        Title="MVVMLIghtDemo1" Height="350" Width="525" Background="#FF699DC1">
    <Window.DataContext>
        <Binding Path="Main" Source="{StaticResource Locator}"></Binding>
    </Window.DataContext>
    <Grid>
        <StackPanel >
            <TextBlock Text="{Binding WelcomeModel.WelcomeMsg}" FontSize="28" Foreground="#FFBB4913" HorizontalAlignment="Center"/>
            <StackPanel Orientation="Horizontal">
                <Label Content="修改信息：" VerticalContentAlignment="Center" FontSize="20" Foreground="#FFC55D21"></Label>
                <TextBox Text="{Binding Path=WelcomeModel.WelcomeMsg,Mode=TwoWay}" FontSize="20" Foreground="#FFBB4913"/>
                <Button Content="LostFocus" Background="#FF22A658"></Button>
            </StackPanel>
        
        </StackPanel>
        <StackPanel VerticalAlignment="Top" HorizontalAlignment="Center" >
  
        </StackPanel>
    </Grid>
</Window>

在View中，我们分别让一个TextBox和一个TextBlock绑定WelcomeModel中的WelcomeMsg属性
当我们在TextBox中输入文本的时候，利用双向绑定更新WelcomeModel中的WelcomeMsg属性，WelcomeMsg属性又通过RaisePropertyChanged来激发属性变更的事件，通知UI，如此一来，界面上的TextBlock中的内容就会更新。

但是，当我们运行以上程序的时候，修改TextBox里的内容，TextBlock中的内容并没有实时更新，而是需要按键盘上的Tab键或者点击LostFocus按钮，让TextBox失去焦点。

这就引出了一个问题，当目标更新的时候，数据源是否更新以及更新的时机？

为了解决这个问题，我们可以使用Binding的UpdateSourceTrigger和Mode属性

UpdateSourceTrigger属性的作用：当做何种改变的时候通知数据源我们做了改变，默认值是LostFocus，这就解释了为什么我们上述程序需要TextBox失去焦点的时候，TextBlock的内容才会更新。

UpdateSourceTrigger可以取以下值：

UpdateSourceTrigger取值

枚举类型	说明
Default	默认值（默认LostFocus）
Explicit	当应用程序调用 UpdateSource 方法时生效
LostFocus	失去焦点的时候触发
PropertyChanged	属性改变时立即触发

为了让TextBlock中的内容随着TextBox的内容实时变化，我们可以将绑定修改成如下格式：

 <TextBox Text="{Binding Path=WelcomeModel.WelcomeMsg,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}" FontSize="20" Foreground="#FFBB4913"/>

Mode属性取值如下：

通过以上Demo，我们应达成以下共识：

1）ViewModel => View更新的时候，我们一般在属性的set块中加入RaisePropertyChanged，它的作用是当数据源改变的时候，会触发PropertyChanged事件，通知UI属性发生了变更；

2）View => ViewModel 更新的时候，我们一般利用Binding的UpdateSourceTrigger和Mode属性。