利刃 MVVMLight 3：雙向數(shù)據(jù)綁定 原文:利刃 MVVMLight 3：雙向數(shù)據(jù)綁定

上篇我們已經(jīng)了解了MVVM的框架結(jié)構(gòu)和運(yùn)行原理。這里我們來看一下偉大的雙向數(shù)據(jù)綁定。 說到雙向綁定，大家比較熟悉的應(yīng)該就是AngularJS了，幾乎所有的AngularJS 系列教程的開篇幾章都要涉及到，真的是很好用。 表達(dá)的效果很簡單：就是在界面的操作對數(shù)據(jù)模型的修改能實(shí)時反映到數(shù)據(jù)；而數(shù)據(jù)的變更能實(shí)時展現(xiàn)到界面。即視圖數(shù)據(jù)模型（ViewModel）和視圖（View）之間的雙向綁定和觸發(fā)。 我們來操作一個試試看： 第一步：先寫一個Model，里面包含我們需要的數(shù)據(jù)信息，代碼如下： 1 /// <summary> 2 /// 用戶信息 3 /// </summary> 4 public class UserInfoModel : ObservableObject 5 { 6 private String userName; 7 /// <summary> 8 /// 用戶名稱 9 /// </summary> 10 public String UserName 11 { 12 get { return userName; } 13 set { userName = value; RaisePropertyChanged(()=>UserName); } 14 } 15 16 private Int64 userPhone; 17 /// <summary> 18 /// 用戶電話 19 /// </summary> 20 public Int64 UserPhone 21 { 22 get { return userPhone; } 23 set { userPhone = value; RaisePropertyChanged(() => UserPhone); } 24 } 25 26 private Int32 userSex; 27 /// <summary> 28 /// 用戶性別 29 /// </summary> 30 public Int32 UserSex 31 { 32 get { return userSex; } 33 set { userSex = value; RaisePropertyChanged(()=>UserSex); } 34 } 35 36 private String userAdd; 37 /// <summary> 38 /// 用戶地址 39 /// </summary> 40 public String UserAdd 41 { 42 get { return userAdd; } 43 set { userAdd = value; RaisePropertyChanged(() => UserAdd); } 44 } 45 }

?

第二步：寫一個ViewModel，包含了View所需要的命令和屬性： 1 public class BothWayBindViewModel:ViewModelBase 2 { 3 public BothWayBindViewModel() 4 { 5 UserInfo = new UserInfoModel(); 6 } 7 8 #region 屬性 9 10 private UserInfoModel userInfo; 11 /// <summary> 12 /// 用戶信息 13 /// </summary> 14 public UserInfoModel UserInfo 15 { 16 get { return userInfo; } 17 set { userInfo = value; RaisePropertyChanged(() => UserInfo); } 18 } 19 20 #endregion 21 22 #region 命令 23 #endregion 24 }

?

第三步：在ViewModelLocator中注冊我們寫好的ViewModel：SimpleIoc.Default.Register<BothWayBindViewModel>(); 1 /* 2 In App.xaml: 3 <Application.Resources> 4 <vm:ViewModelLocator xmlns:vm="clr-namespace:MVVMLightDemo" 5 x:Key="Locator" /> 6 </Application.Resources> 7 8 In the View: 9 DataContext="{Binding Source={StaticResource Locator}, Path=ViewModelName}" 10 11 You can also use Blend to do all this with the tool's support. 12 See http://www.galasoft.ch/mvvm 13 */ 14 15 using GalaSoft.MvvmLight; 16 using GalaSoft.MvvmLight.Ioc; 17 using Microsoft.Practices.ServiceLocation; 18 19 namespace MVVMLightDemo.ViewModel 20 { 21 /// <summary> 22 /// This class contains static references to all the view models in the 23 /// application and provides an entry point for the bindings. 24 /// </summary> 25 public class ViewModelLocator 26 { 27 /// <summary> 28 /// Initializes a new instance of the ViewModelLocator class. 29 /// </summary> 30 public ViewModelLocator() 31 { 32 ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default); 33 34 #region Code Example 35 ////if (ViewModelBase.IsInDesignModeStatic) 36 ////{ 37 //// // Create design time view services and models 38 //// SimpleIoc.Default.Register<IDataService, DesignDataService>(); 39 ////} 40 ////else 41 ////{ 42 //// // Create run time view services and models 43 //// SimpleIoc.Default.Register<IDataService, DataService>(); 44 ////} 45 #endregion 46 47 SimpleIoc.Default.Register<MainViewModel>(); 48 SimpleIoc.Default.Register<WelcomeViewModel>(); 49 SimpleIoc.Default.Register<BothWayBindViewModel>(); 50 } 51 52 #region 實(shí)例化 53 public MainViewModel Main 54 { 55 get 56 { 57 return ServiceLocator.Current.GetInstance<MainViewModel>(); 58 } 59 } 60 61 public WelcomeViewModel Welcome 62 { 63 get 64 { 65 return ServiceLocator.Current.GetInstance<WelcomeViewModel>(); 66 } 67 } 68 69 public BothWayBindViewModel BothWayBind 70 { 71 get 72 { 73 return ServiceLocator.Current.GetInstance<BothWayBindViewModel>(); 74 } 75 } 76 77 #endregion 78 79 public static void Cleanup() 80 { 81 // TODO Clear the ViewModels 82 } 83 } 84 }

?

第四步：編寫View（注意標(biāo)紅的代碼）： 1 <Window x:Class="MVVMLightDemo.View.BothWayBindView" 2 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 3 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 4 DataContext="{Binding Source={StaticResource Locator},Path=BothWayBind}" 5 Title="BothWayBindView" Height="300" Width="300"> 6 <Grid> 7 <StackPanel Orientation="Vertical" Margin="10,10,0,0"> 8 <StackPanel Orientation="Horizontal" > 9 <TextBlock Text="請輸入姓名：" ></TextBlock> 10 <TextBox Text="{Binding UserInfo.UserName,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}" Width="200" ></TextBox> 11 </StackPanel> 12 13 <StackPanel Margin="0,10,0,0" Orientation="Horizontal" > 14 <TextBlock Text="Hello " ></TextBlock> 15 <TextBlock Text="{Binding UserInfo.UserName}" ></TextBlock> 16 </StackPanel> 17 18 <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center" Orientation="Horizontal" > 19 </StackPanel> 20 21 </StackPanel> 22 </Grid> 23 </Window>

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

前面我們已經(jīng)了解到了，RaisePropertyChanged的作用是當(dāng)數(shù)據(jù)源改變的時候，會觸發(fā)PropertyChanged事件達(dá)到通知UI更改的目的（ViewModel => View）。 那View上的變化要怎么通知到數(shù)據(jù)源呢： View中文本框綁定內(nèi)容如下：{Binding UserInfo.UserName,UpdateSourceTrigger=PropertyChanged,Mode=TwoWay}， 大家會看到多了兩個屬性，一個是UpdateSourceTrigger，一個是Mode屬性。 UpdateSourceTrigger的作用是 當(dāng)做何種改變的時候通知數(shù)據(jù)源我們做了改變。

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

這邊我們直接使用 PropertyChanged，當(dāng)UI數(shù)據(jù)改變的時候，我們再通知到數(shù)據(jù)源去做修改。 還有一個屬性就是Mode，他有五個參數(shù)：

枚舉類型	效果
OneWay	源發(fā)生變化，數(shù)據(jù)就會從源流向目標(biāo)
OneTime	綁定會將數(shù)據(jù)從源發(fā)送到目標(biāo)；但是，僅當(dāng)啟動了應(yīng)用程序或 DataContext 發(fā)生更改時才會如此操作，因此，它不會偵聽源中的更改通知。
OneWayToSource	綁定會將數(shù)據(jù)從目標(biāo)發(fā)送到源
TwoWay	綁定會將源數(shù)據(jù)發(fā)送到目標(biāo)，但如果目標(biāo)屬性的值發(fā)生變化，則會將它們發(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)槭俏谋究?#xff0c;屬于可以編輯控件，所以 Default指向的是TwoWay。 下面還有一個TextBlock，僅僅用于顯示的，所以不需要目標(biāo)對源的修改，無需指定就默認(rèn)是OneWay，當(dāng)源改變的時候，會通知它進(jìn)行修改。 點(diǎn)擊下載代碼 轉(zhuǎn)載請標(biāo)明出處，謝謝 posted on 2018-06-01 10:32 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/9120505.html

總結(jié)

以上是生活随笔為你收集整理的利刃 MVVMLight 3：双向数据绑定的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。