如果你还不知道如何在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. 【ActiveMQ】ActiveMQ在CentOS的搭建与使用

    下载 到ActiveMQ官网,找到下载点. 目前, 官网为http://activemq.apache.org/. 我们下载目前最新的版本吧,当前的Linux版本下载地址之一为:http://apac ...

  2. Django---分页器、中间件

    分页 Django的分页器(paginator) view   from django.shortcuts import render,HttpResponse # Create your views ...

  3. 在windows环境下编译hadoop

    1.环境准备 1.1 JDK的安装 下载jdk1.6.0_43(这里务必要使用jdk的1.6版本,因为使用JDK1.7版本编译hadoop的时候,很多Maven依赖下载不完整,最终会报错)解压到,并将 ...

  4. javascript基础学习--HTML DOM

    写在前面的话:由于学校没有开过javascript这门课,所以平时用javascript时都是用到什么就去搜什么样的代码,但是在工作中有时候搜来的代码总是有那么点小问题,而当自己想去修改时,却又无从下 ...

  5. tomcat linux 加入服务自动启动

    方法一: linux 下tomcat开机自启动修改Tomcat/bin/startup.sh 为:export JAVA_HOME=/usr/java/j2sdk1.4.2_08export CLAS ...

  6. pyv8使用总结

    在使用python爬虫的过程中,难免遇到要加载原网站的js脚本并执行.但是python本身无法解析js脚本. 不过python这么猛的语言,当然设置了很多方法来执行js脚本.其中一个比较简单的方法是使 ...

  7. smtpclient 邮件发送测试

    SmtpClient smtp = new SmtpClient(); //实例化一个SmtpClient smtp.DeliveryMethod = SmtpDeliveryMethod.Netwo ...

  8. python-can 的使用

    最近在搞 websocket, 服务端是用 python 写的,所以,我需要用python 控制 can 去传输相关信息. python-can 模块就是 python 控制 can 的模仿. 利用 ...

  9. Red Hat快捷键操作

    Red Hat快捷键操作 .使用虚拟控制台 登录后按“Alt+F2”键可以看到“login:”提示符, 这就是第二个虚拟控制台. 一般新安装的Linux有四个虚拟控制台, 可以用“Alt+F1”到“A ...

  10. JAVA String.format 方法使用介绍<转>

    在JDK1.5中,String类增加了一个非常有用的静态函数format(String  format, Objece...  argues),可以将各类数据格式化为字符串并输出.其中format参数 ...