这篇文章主要介绍了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项目之双向数据绑定
基础教程推荐
猜你喜欢
- MVVMLight项目Model View结构及全局视图模型注入器 2023-05-07
- iOS中如何判断当前网络环境是2G/3G/4G/5G/WiFi 2023-06-18
- Flutter进阶之实现动画效果(三) 2022-10-28
- IOS获取系统相册中照片的示例代码 2023-01-03
- Android Compose自定义TextField实现自定义的输入框 2023-05-13
- iOS开发使用XML解析网络数据 2022-11-12
- iOS开发 全机型适配解决方法 2023-01-14
- Android实现短信验证码输入框 2023-04-29
- Android开发Compose集成高德地图实例 2023-06-15
- iOS Crash常规跟踪方法及Bugly集成运用详细介绍 2023-01-18