MVVMLight项目之双向数据绑定

这篇文章主要介绍了MVVMLight项目中双向数据绑定的示例源码及实现过程,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步除夕快乐,新年快乐

MVVM和MVVMLight框架介绍及在项目中的使用详解

MVVMLight项目Model View结构及全局视图模型注入器

前篇我们已经了解了MVVM的框架结构和运行原理。这里我们来看一下伟大的双向数据绑定。

说到双向绑定,大家比较熟悉的应该就是AngularJS了,几乎所有的AngularJS 系列教程的开篇几章都要涉及到,真的是很好用。

表达的效果很简单:就是在界面的操作对数据模型的修改能实时反映到数据;而数据的变更能实时展现到界面。即视图数据模型(ViewModel)和视图(View)之间的双向绑定和触发。

我们来操作一个试试看:

第一步:先写一个Model,里面包含我们需要的数据信息

代码如下:

    /// <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); }
         }
    

第二步:写一个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中注册我们写好的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>();
             ///

本文标题为:MVVMLight项目之双向数据绑定

基础教程推荐