Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to achieve two-way data binding in MVVMLight". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve two-way data binding in MVVMLight" can help you solve the problem.

Step 1: first write a Model that contains the data information we need

The code is as follows:

/ public class UserInfoModel: ObservableObject {private String userName; / user name / public String UserName {get {return userName;} set {userName = value; RaisePropertyChanged (() = > UserName);}} private Int64 userPhone / / user phone / public Int64 UserPhone {get {return userPhone;} set {userPhone = value; RaisePropertyChanged (() = > UserPhone);}} private Int32 userSex / user gender / public Int32 UserSex {get {return userSex;} set {userSex = value; RaisePropertyChanged (() = > UserSex);}} private String userAdd / user address / public String UserAdd {get {return userAdd;} set {userAdd = value; RaisePropertyChanged (() = > UserAdd);}} step 2: write a ViewModel

Contains the commands and attributes required by View:

Public class BothWayBindViewModel:ViewModelBase {public BothWayBindViewModel () {UserInfo = new UserInfoModel ();} # region attribute private UserInfoModel userInfo; / user information / public UserInfoModel UserInfo {get {return userInfo;} set {userInfo = value RaisePropertyChanged (() = > UserInfo);}} # endregion # region command # endregion} step 3: register the ViewModel we have written in ViewModelLocator:

SimpleIoc.Default.Register ()

/ * In App.xaml: 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 {/ This class contains static references to all the view models in the / / application and provides an entry point for the bindings. / public class ViewModelLocator {/ Initializes a new instance of the ViewModelLocator class. / public ViewModelLocator () {ServiceLocator.SetLocatorProvider (() = > SimpleIoc.Default); # region Code Example / if (ViewModelBase.IsInDesignModeStatic) / {/ Create design time view services and models / SimpleIoc.Default.Register () /} / / else / {/ Create run time view services and models / SimpleIoc.Default.Register (); /} # endregion SimpleIoc.Default.Register (); SimpleIoc.Default.Register () SimpleIoc.Default.Register ();} # region instantiate public MainViewModel Main {get {return ServiceLocator.Current.GetInstance ();}} public WelcomeViewModel Welcome {get {return ServiceLocator.Current.GetInstance () }} public BothWayBindViewModel BothWayBind {get {return ServiceLocator.Current.GetInstance () }} # endregion public static void Cleanup () {/ / TODO Clear the ViewModels}} step 4: write View (pay attention to the code marked red)

The effect is shown in the figure (when you modify the contents of the input box, the binding data changes accordingly, and the change to the UI is triggered, so the following line of text changes accordingly. ):

As we learned earlier, the role of RaisePropertyChanged is to trigger a PropertyChanged event to notify UI of the change when the data source changes (ViewModel = > View).

So how do you notify the data source of changes on View:

The binding content of the text box in View is as follows:

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

You will see that there are two more attributes, one is the UpdateSourceTrigger, and the other is the Mode attribute.

The role of UpdateSourceTrigger is to notify the data source that we have made a change when it is changed.

Enumerated type effects Default default (default is LostFocuse) Explicit triggers when an application calls the UpdateSource method when LostFocus loses focus and triggers a change in the PropertyChanged data property

Here we use PropertyChanged directly. When the UI data changes, we notify the data source to make changes.

Another attribute is Mode, which has five parameters:

When the enumerated type effect OneWay source changes, the data flows from the source to the destination. The OneTime binding sends data from the source to the destination; however, this only happens when the application is started or the DataContext changes, so it does not listen for change notifications in the source. OneWayToSource binding sends data from the destination to the source TwoWay binding sends the source data to the destination, but if the value of the target attribute changes, it will send them back to the source Default binding mode depending on the actual situation. If it is editable, it is TwoWay, and the read-only is OneWay.

There are obviously many options here, and to be clear, we want to synchronize the changes on View to ViewModel (Target = > Source), so we can use OneWayToSource, TwoWay, Default or not.

To be more rigorous, you should use OneWayToSource. Because it is a text box and belongs to an editable control, Default points to TwoWay.

There is also a TextBlock below, which is only used for display, so there is no need for the target to modify the source. It defaults to OneWay without being specified. When the source changes, it will be notified to make changes.

This is the end of the introduction to "how MVVMLight implements two-way data binding". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.