表達(dá)的效果很簡(jiǎn)單：就是在界面的操作對(duì)數(shù)據(jù)模型的修改能實(shí)時(shí)反映到數(shù)據(jù)；而數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。即視圖數(shù)據(jù)模型（ViewModel）和視圖（View）之間的雙向綁定和觸發(fā)。

我們來操作一個(gè)試試看：

第一步：先寫一個(gè)Model，里面包含我們需要的數(shù)據(jù)信息

代碼如下：

    /// <summary>
     /// 用戶信息
     /// </summary>
     public class UserInfoModel : ObservableObject
     {
         private String userName;
         /// <summary>
         /// 用戶名稱
         /// </summary>
         public String UserName
         {
             get { return userName; }
             set { userName = value; RaisePropertyChanged(()=>UserName); }
         }
         private Int64 userPhone;
         /// <summary>
         /// 用戶電話
         /// </summary>
         public Int64 UserPhone
         {
             get { return userPhone; }
             set { userPhone = value; RaisePropertyChanged(() => UserPhone); }
         }
         private Int32 userSex;
         /// <summary>
         /// 用戶性別
         /// </summary>
         public Int32 UserSex
         {
             get { return userSex; }
             set { userSex = value; RaisePropertyChanged(()=>UserSex); }
         }
         private String userAdd;
         /// <summary>
         /// 用戶地址
         /// </summary>
         public String UserAdd
         {
             get { return userAdd; }
             set { userAdd = value; RaisePropertyChanged(() => UserAdd); }
         }

第二步：寫一個(gè)ViewModel

包含了View所需要的命令和屬性：

    public class BothWayBindViewModel:ViewModelBase
     {
         public BothWayBindViewModel()
         {
             UserInfo = new UserInfoModel();
         }
         #region 屬性
         private UserInfoModel userInfo;
         /// <summary>
         /// 用戶信息
         /// </summary>
         public UserInfoModel UserInfo
         {
             get { return userInfo; }
             set { userInfo = value; RaisePropertyChanged(() => UserInfo); }
         }
         #endregion
         #region 命令
         #endregion
     }

第三步：在ViewModelLocator中注冊(cè)我們寫好的ViewModel：

SimpleIoc.Default.Register<BothWayBindViewModel>();

/*
   In App.xaml:
   <Application.Resources>
       <vm:ViewModelLocator xmlns:vm="clr-namespace:MVVMLightDemo"
                            x:Key="Locator" />
   </Application.Resources>
   In the View:
   DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName}"
   You can also use Blend to do all this with the tool's support.
   See http://www.galasoft.ch/mvvm
 */
 
 using GalaSoft.MvvmLight;
 using GalaSoft.MvvmLight.Ioc;
 using Microsoft.Practices.ServiceLocation;
 namespace MVVMLightDemo.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);
             #region Code Example
             ////if (ViewModelBase.IsInDesignModeStatic)
             ////{
             ////    // Create design time view services and models
             ////    SimpleIoc.Default.Register<IDataService, DesignDataService>();
             ////}
             ////else
             ////{
             ////    // Create run time view services and models
             ////    SimpleIoc.Default.Register<IDataService, DataService>();
             ////}
             #endregion
             SimpleIoc.Default.Register<MainViewModel>();
             SimpleIoc.Default.Register<WelcomeViewModel>();
             SimpleIoc.Default.Register<BothWayBindViewModel>();    
         }
         #region 實(shí)例化
         public MainViewModel Main
         {
             get
             {
                 return ServiceLocator.Current.GetInstance<MainViewModel>();
             }
         }
         public WelcomeViewModel Welcome
         {
             get
             { 
                return ServiceLocator.Current.GetInstance<WelcomeViewModel>();
             }
         }
         public BothWayBindViewModel BothWayBind
         {
             get
             { 
                 return ServiceLocator.Current.GetInstance<BothWayBindViewModel>();
             }
         }     
         #endregion
         public static void Cleanup()
         {
             // TODO Clear the ViewModels
         }
     }

第四步：編寫View（注意標(biāo)紅的代碼）

<Window x:Class="MVVMLightDemo.View.BothWayBindView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         DataContext="{Binding Source={StaticResource Locator},Path=BothWayBind}"
         Title="BothWayBindView" Height="300" Width="300">
     <Grid>
             <StackPanel Orientation="Vertical" Margin="10,10,0,0">
                 <StackPanel Orientation="Horizontal" >
                     <TextBlock Text="請(qǐng)輸入姓名：" ></TextBlock>
                     <TextBox Text="{Binding UserInfo.UserName,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}" Width="200" ></TextBox>
                 </StackPanel>
 
                 <StackPanel Margin="0,10,0,0" Orientation="Horizontal" >
                     <TextBlock Text="Hello " ></TextBlock>
                     <TextBlock Text="{Binding UserInfo.UserName}" ></TextBlock>
                 </StackPanel>
 
                 <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" >
                 </StackPanel>
                 
             </StackPanel>
     </Grid>
</Window>

效果如圖所示（當(dāng)修改輸入框的內(nèi)容的時(shí)候，對(duì)應(yīng)綁定數(shù)據(jù)相應(yīng)改變，并觸發(fā)對(duì)UI的修改，所以下面那行文字也相應(yīng)改變改變。）：

前面我們已經(jīng)了解到了，RaisePropertyChanged的作用是當(dāng)數(shù)據(jù)源改變的時(shí)候，會(huì)觸發(fā)PropertyChanged事件達(dá)到通知UI更改的目的（ViewModel => View）。

那View上的變化要怎么通知到數(shù)據(jù)源呢：

View中文本框綁定內(nèi)容如下：

{Binding UserInfo.UserName,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}，

大家會(huì)看到多了兩個(gè)屬性，一個(gè)是UpdateSourceTrigger，一個(gè)是Mode屬性。

UpdateSourceTrigger的作用是當(dāng)做何種改變的時(shí)候通知數(shù)據(jù)源我們做了改變。

枚舉類型	效果
Default	默認(rèn)值（默認(rèn)為L(zhǎng)ostFocuse）
Explicit	當(dāng)應(yīng)用程序調(diào)用 UpdateSource 方法時(shí)生效
LostFocus	失去焦點(diǎn)的時(shí)候觸發(fā)
PropertyChanged	數(shù)據(jù)屬性改變的時(shí)候觸發(fā)

這邊我們直接使用 PropertyChanged，當(dāng)UI數(shù)據(jù)改變的時(shí)候，我們?cè)偻ㄖ綌?shù)據(jù)源去做修改。

還有一個(gè)屬性就是Mode，他有五個(gè)參數(shù)：

枚舉類型	效果
OneWay	源發(fā)生變化，數(shù)據(jù)就會(huì)從源流向目標(biāo)
OneTime	綁定會(huì)將數(shù)據(jù)從源發(fā)送到目標(biāo)；但是，僅當(dāng)啟動(dòng)了應(yīng)用程序或 DataContext 發(fā)生更改時(shí)才會(huì)如此操作，因此，它不會(huì)偵聽源中的更改通知。
OneWayToSource	綁定會(huì)將數(shù)據(jù)從目標(biāo)發(fā)送到源
TwoWay	綁定會(huì)將源數(shù)據(jù)發(fā)送到目標(biāo)，但如果目標(biāo)屬性的值發(fā)生變化，則會(huì)將它們發(fā)回給源
Default	綁定的模式根據(jù)實(shí)際情況來定，如果是可編輯的就是TwoWay,只讀的就是OneWay

這邊明顯有很多種選擇，明確一點(diǎn)的是，我們是想把View上的變化同步到ViewModel（Target => Source），所以使用OneWayToSource、TwoWay、Default或者不寫都可以。

嚴(yán)謹(jǐn)點(diǎn)應(yīng)該使用OneWayToSource。因?yàn)槭俏谋究?，屬于可以編輯控件，所?Default指向的是TwoWay。

下面還有一個(gè)TextBlock，僅僅用于顯示的，所以不需要目標(biāo)對(duì)源的修改，無需指定就默認(rèn)是OneWay，當(dāng)源改變的時(shí)候，會(huì)通知它進(jìn)行修改。

以上就是MVVMLight項(xiàng)目之雙向數(shù)據(jù)綁定的詳細(xì)內(nèi)容，更多關(guān)于MVVMLight項(xiàng)目雙向數(shù)據(jù)綁定的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: