如果你还不知道如何在VS中加入MVVMLight的引用,那么建议你先翻阅这篇文章:在VS中安装/使用 MVVMLight

这篇文章主要是介绍如何使用MVVMLight来绑定数据到界面中(View),以此来了解MVVMLight的一些基础的类的用法。

文章底部会提供本示例的源码下载。

MVVMLight绑定数据示例

好了,我们在新建了两个项目,分别是“MVVMLight的主程序” 与  “Model层”,运行的效果及解决方案结构如下:

其实很简单,就是绑定了一个数据源而已,编写的代码也不多,下面我们来一步一步的实现使用MVVMLight来绑定数据,并了解其中的细节。

如何实现?

我这里使用的是.NET 4.5  , 你可以使用至少4.0以上的版本来实现这个项目(选择4.0/4.5 要选择想要的MVVMLight的引用文件),下面依次建立两个项目来实现。

1.建立Model层的项目

新建了一个命名为“MyModel”的类库项目,其中引用了MVVMLight相关程序集,然后包含一个User类即可。User.cs代码如下:

  1. using GalaSoft.MvvmLight;
  2. using System;
  3. using System.Collections.Generic;
  4. using System.Collections.ObjectModel;
  5. using System.Linq;
  6. using System.Text;
  7. using System.Threading.Tasks;
  8. namespace MyModel
  9. {
  10. public class User : ObservableObject
  11. {
  12. private int _id;
  13. /// <summary>
  14. /// ID
  15. /// </summary>
  16. public int ID
  17. {
  18. get { return _id; }
  19. set
  20. {
  21. _id = value;
  22. RaisePropertyChanged("ID");
  23. }
  24. }
  25. private string _name;
  26. /// <summary>
  27. /// 名称
  28. /// </summary>
  29. public string Name
  30. {
  31. get { return _name; }
  32. set
  33. {
  34. _name = value;
  35. RaisePropertyChanged("Name");
  36. }
  37. }
  38. private string _domain;
  39. /// <summary>
  40. /// 网站域名
  41. /// </summary>
  42. public string Domain
  43. {
  44. get { return _domain; }
  45. set
  46. {
  47. _domain = value;
  48. RaisePropertyChanged("Domain");
  49. }
  50. }
  51. #region 模拟数据获取
  52. /// <summary>
  53. /// 模拟测试数据
  54. /// </summary>
  55. /// <returns></returns>
  56. public static ObservableCollection<User> GetUserList()
  57. {
  58. ObservableCollection<User> list = new ObservableCollection<User>();
  59. list.Add(new User() { ID = 1, Name = "王旭", Domain = "www.wxzzz.com" });
  60. list.Add(new User() { ID = 2, Name = "王旭博客", Domain = "www.wxzzz.com" });
  61. return list;
  62. }
  63. #endregion
  64. }
  65. }

User类主要继承了 ObservableObject 这个对象,这个对象其实也是ViewModelBase的父类,我们下面会用到。该类主要是实现了属性变更通知接口,如我们用到的:RaisePropertyChanged("");

User 类中包含了3个字段分别是

  1. int ID
  2. string Name
  3. string Domain

然后包含了一个静态的GetUserList()方法。其他的就没什么了,这个项目就建立完毕了。

2.建立主程序项目

我这里使用的是WPF项目,当然你也可以建立其他类型的项目。建立好WPF项目之后,我们需要在项目中建立如下结构的文件

  • View -> UserView.xaml
  • ViewModel -> UserViewModel.cs

View 文件夹用于存放向用户展示的UI界面。

ViewModel 用于存放业务逻辑代码。

首先编写 UserViewModel 的代码如下

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Collections.ObjectModel;
  4. using System.Linq;
  5. using System.Text;
  6. using System.Threading.Tasks;
  7. using GalaSoft.MvvmLight;
  8. using MyModel;
  9. namespace MVVMLightDemo.ViewModel
  10. {
  11. public class UserViewModel : ViewModelBase
  12. {
  13. public UserViewModel()
  14. {
  15. //初始化数据
  16. _userData = User.GetUserList();
  17. }
  18. private ObservableCollection<User> _userData;
  19. /// <summary>
  20. /// 用户信息数据
  21. /// </summary>
  22. public ObservableCollection<User> UserData
  23. {
  24. get { return _userData; }
  25. set
  26. {
  27. _userData = value;
  28. RaisePropertyChanged("UserData");
  29. }
  30. }
  31. }
  32. }

每个ViewModel类都将继承MVVMLight的 ViewModelBase 为父类, 不过不要忘了 using GalaSoft.MvvmLight;  。继承之后就可以调用父类的 RaisePropertyChanged("属性名") 来实现属性变更通知了,在值有改变的时候那么UI界面绑定了该值的情况下 就会收到通知跟随改变。

我在该类的构造函数中,对 UserData 进行了初始化,把数据给赋值上去了,那么在接下来的View中绑定 UserData 才会出现数据。

接下来开始编写 UserView.xaml 的代码如下

  1. <Window x:Class="MVVMLightDemo.View.UserView"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="UserView" Height="300" Width="300">
  5. <Grid>
  6. <DataGrid ItemsSource="{Binding UserData}"></DataGrid>
  7. </Grid>
  8. </Window>

其实代码就只有一行,也就是 <DataGrid ItemsSource="{Binding UserData}"></DataGrid>这样代码,让其 DataGrid 绑定字段 UserData 即可。

仅仅这样还不行,我们还需要让View与ViewModel关联起来,那么需要设置这个View的数据上下文。 在后台编写如下代码

  1. public UserView()
  2. {
  3. this.DataContext = new UserViewModel();
  4. InitializeComponent();
  5. }

其实代码也只有一行,也就是 this.DataContext = new UserViewModel(); 即可。

至此我们的代码就编写完成了,实现了MVVMLight中的数据绑定。

而MainWindow.xaml我仅仅放置了一个按钮使用了 Click事件在xaml的后台代码中直接弹出了UserView窗口。后面再来改进这些代码。

示例源码下载:MVVMLightDemo_1

更多的MVVMLight使用,请返回查阅《MVVMLight 设计模式系列使用文章》,欢迎各位Coder补充。

转载请注明:王旭博客 » 使用 MVVMLight 绑定数据

使用 MVVMLight 绑定数据的更多相关文章

  1. 使用 MVVMLight 绑定数据(转)

    MVVMLight绑定数据示例 好了,我们在新建了两个项目,分别是“MVVMLight的主程序” 与  “Model层”,运行的效果及解决方案结构如下: 其实很简单,就是绑定了一个数据源而已,编写的代 ...

  2. MVVMLight绑定数据

    我们先新建一个WPF项目MVVMLightDemo,添加GalaSoft.MvvmLight.dll(没有可以自己下载) 然后在项目中添加三个文件夹,如图: 先添加我们的Model,在Model下新建 ...

  3. Android之ListView性能优化——一行代码绑定数据——万能适配器

    如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...

  4. angularJS绑定数据时自动转义html标签

    angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...

  5. 【WPF】绑定数据

    WPF绑定数据 模型类(继承 INotifyPropertyChanged,实现属性的变更通知)

  6. 关于angularJS绑定数据时自动转义html标签

    关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...

  7. knockoutjs中使用mapping插件绑定数据列表

    使用KO绑定数据列表示例:   1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping    2.先使用ko.mapping.fromJS()将原来的 ...

  8. csharp: 用Enterprise Library对象实体绑定数据

    Enterprise Library: https://msdn.microsoft.com/en-us/library/ff648951.aspx /// <summary> /// 是 ...

  9. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

随机推荐

  1. 详解Base64编码和解码

    Base64是最常用的编码之一,比如开发中用于传递参数.现代浏览器中的<img />标签直接通过Base64字符串来渲染图片以及用于邮件中等等.Base64编码在RFC2045中定义,它被 ...

  2. AngularJS实现跨域请求

    跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpR ...

  3. JVM致命错误日志(hs_err_pid.log)分析(转载)

    当jvm出现致命错误时,会生成一个错误文件 hs_err_pid<pid>.log,其中包括了导致jvm crash的重要信息,可以通过分析该文件定位到导致crash的根源,从而改善以保证 ...

  4. VBA学习笔记(8)--遍历所有文件夹和文件

    说明(2017.3.26): 1. 采用的是兰色幻想教学视频中的“父子转换法” 2. 这种VBA的遍历文件夹方法非常难理解,主要是因为dir这个函数,第一次带参数调用,返回的是此目录下的第一个文件,第 ...

  5. 利用BioPerl将DNA序列翻译成蛋白序列

    转自 https://www.plob.org/article/4603.html 具体请去上面的网页查看. my $DNA="ATGCCCGGT";my $pep=&Tr ...

  6. MFC文档(SDI)应用:画图程序(画圆、画线、鼠标事件)

    要求 1. 在客户区输出一条顺时针45度的直线.一个正方形.一个大圆: 2. 在客户区输出一个图标: 3. 当按下鼠标左键时,将以鼠标坐标为圆心画直径为20个单位的小圆. 首先设置两个变量,用来保存颜 ...

  7. 【WPF】当 ItemsSource 正在使用时操作无效。改用 ItemsControl.ItemsSource 访问和修改元素

    问题: 中文版报错:Additional information: 当 ItemsSource 正在使用时操作无效.改用 ItemsControl.ItemsSource 访问和修改元素. 英文版报错 ...

  8. mysql插入、更新与删除

    数据库增删改查都是要熟练掌握的. 这部分就来看看前面3个比较简单的部分,增,删,改. 插入数据 为表的所有字段插入数据 insert into table_name (column_list) val ...

  9. android学习日记01--综述

    开个博客,写点关于Android的知识,希望温故而知新吧! 一.总体框架 先上一张google提供官方的Android框架图: Android系统架构由5部分组成,分别是:Linux Kernel.A ...

  10. PHP注释的艺术——phpDoc规范

    用过IDE或看过其他源码的小伙伴们应该都见过类似下面这样的注释   /** * 递归获取所有游戏分类 * @param int $id * @return array */ 看得多了就大概知道了一些规 ...