使用 MVVMLight 绑定数据(转)
MVVMLight绑定数据示例
好了,我们在新建了两个项目,分别是“MVVMLight的主程序” 与 “Model层”,运行的效果及解决方案结构如下:
其实很简单,就是绑定了一个数据源而已,编写的代码也不多,下面我们来一步一步的实现使用MVVMLight来绑定数据,并了解其中的细节。
如何实现?
我这里使用的是.NET 4.5 , 你可以使用至少4.0以上的版本来实现这个项目(选择4.0/4.5 要选择想要的MVVMLight的引用文件),下面依次建立两个项目来实现。
1.建立Model层的项目
新建了一个命名为“MyModel”的类库项目,其中引用了MVVMLight相关程序集,然后包含一个User类即可。User.cs代码如下:
- using GalaSoft.MvvmLight;
- using System;
- using System.Collections.Generic;
- using System.Collections.ObjectModel;
- using System.Linq;
- using System.Text;
- using System.Threading.Tasks;
- namespace MyModel
- {
- public class User : ObservableObject
- {
- private int _id;
- /// <summary>
- /// ID
- /// </summary>
- public int ID
- {
- get { return _id; }
- set
- {
- _id = value;
- RaisePropertyChanged("ID");
- }
- }
- private string _name;
- /// <summary>
- /// 名称
- /// </summary>
- public string Name
- {
- get { return _name; }
- set
- {
- _name = value;
- RaisePropertyChanged("Name");
- }
- }
- private string _domain;
- /// <summary>
- /// 网站域名
- /// </summary>
- public string Domain
- {
- get { return _domain; }
- set
- {
- _domain = value;
- RaisePropertyChanged("Domain");
- }
- }
- #region 模拟数据获取
- /// <summary>
- /// 模拟测试数据
- /// </summary>
- /// <returns></returns>
- public static ObservableCollection<User> GetUserList()
- {
- ObservableCollection<User> list = new ObservableCollection<User>();
- list.Add(new User() { ID = 1, Name = "王旭", Domain = "www.wxzzz.com" });
- list.Add(new User() { ID = 2, Name = "王旭博客", Domain = "www.wxzzz.com" });
- return list;
- }
- #endregion
- }
- }
User类主要继承了 ObservableObject
这个对象,这个对象其实也是ViewModelBase
的父类,我们下面会用到。该类主要是实现了属性变更通知接口,如我们用到的:RaisePropertyChanged("");
User 类中包含了3个字段分别是
- int ID
- string Name
- string Domain
然后包含了一个静态的GetUserList()
方法。其他的就没什么了,这个项目就建立完毕了。
2.建立主程序项目
我这里使用的是WPF项目,当然你也可以建立其他类型的项目。建立好WPF项目之后,我们需要在项目中建立如下结构的文件
- View -> UserView.xaml
- ViewModel -> UserViewModel.cs
View 文件夹用于存放向用户展示的UI界面。
ViewModel 用于存放业务逻辑代码。
首先编写 UserViewModel 的代码如下
- using System;
- using System.Collections.Generic;
- using System.Collections.ObjectModel;
- using System.Linq;
- using System.Text;
- using System.Threading.Tasks;
- using GalaSoft.MvvmLight;
- using MyModel;
- namespace MVVMLightDemo.ViewModel
- {
- public class UserViewModel : ViewModelBase
- {
- public UserViewModel()
- {
- //初始化数据
- _userData = User.GetUserList();
- }
- private ObservableCollection<User> _userData;
- /// <summary>
- /// 用户信息数据
- /// </summary>
- public ObservableCollection<User> UserData
- {
- get { return _userData; }
- set
- {
- _userData = value;
- RaisePropertyChanged("UserData");
- }
- }
- }
- }
每个ViewModel类都将继承MVVMLight的 ViewModelBase 为父类, 不过不要忘了 using GalaSoft.MvvmLight;
。继承之后就可以调用父类的 RaisePropertyChanged("属性名")
来实现属性变更通知了,在值有改变的时候那么UI界面绑定了该值的情况下 就会收到通知跟随改变。
我在该类的构造函数中,对 UserData
进行了初始化,把数据给赋值上去了,那么在接下来的View中绑定 UserData
才会出现数据。
接下来开始编写 UserView.xaml 的代码如下
- <Window x:Class="MVVMLightDemo.View.UserView"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- Title="UserView" Height="300" Width="300">
- <Grid>
- <DataGrid ItemsSource="{Binding UserData}"></DataGrid>
- </Grid>
- </Window>
其实代码就只有一行,也就是 <DataGrid ItemsSource="{Binding UserData}"></DataGrid>
这样代码,让其 DataGrid 绑定字段 UserData 即可。
仅仅这样还不行,我们还需要让View与ViewModel关联起来,那么需要设置这个View的数据上下文。 在后台编写如下代码
- public UserView()
- {
- this.DataContext = new UserViewModel();
- InitializeComponent();
- }
其实代码也只有一行,也就是 this.DataContext = new UserViewModel();
即可。
至此我们的代码就编写完成了,实现了MVVMLight中的数据绑定。
而MainWindow.xaml我仅仅放置了一个按钮使用了 Click事件在xaml的后台代码中直接弹出了UserView窗口。后面再来改进这些代码。
使用 MVVMLight 绑定数据(转)的更多相关文章
- 使用 MVVMLight 绑定数据
如果你还不知道如何在VS中加入MVVMLight的引用,那么建议你先翻阅这篇文章:在VS中安装/使用 MVVMLight 这篇文章主要是介绍如何使用MVVMLight来绑定数据到界面中(View),以 ...
- MVVMLight绑定数据
我们先新建一个WPF项目MVVMLightDemo,添加GalaSoft.MvvmLight.dll(没有可以自己下载) 然后在项目中添加三个文件夹,如图: 先添加我们的Model,在Model下新建 ...
- Android之ListView性能优化——一行代码绑定数据——万能适配器
如下图,加入现在有一个这样的需求图,你会怎么做?作为一个初学者,之前我都是直接用SimpleAdapter结合一个Item的布局来实现的,感觉这样实现起来很方便(基本上一行代码就可以实现),而且也没有 ...
- angularJS绑定数据时自动转义html标签
angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签中的注入攻击,但有些时候还是需要的,特别是从数据库读取 ...
- 【WPF】绑定数据
WPF绑定数据 模型类(继承 INotifyPropertyChanged,实现属性的变更通知)
- 关于angularJS绑定数据时自动转义html标签
关于angularJS绑定数据时自动转义html标签 angularJS在进行数据绑定时默认是会以文本的形式输出,也就是对你数据中的html标签不进行转义照单全收,这样提高了安全性,防止了html标签 ...
- knockoutjs中使用mapping插件绑定数据列表
使用KO绑定数据列表示例: 1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping 2.先使用ko.mapping.fromJS()将原来的 ...
- csharp: 用Enterprise Library对象实体绑定数据
Enterprise Library: https://msdn.microsoft.com/en-us/library/ff648951.aspx /// <summary> /// 是 ...
- D3.js 选择元素和绑定数据/使用数据
选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...
随机推荐
- xtrabackup 恢复单个表【转】
一.安装与备份 1. 下载安装XtraBackup$wget http://www.percona.com/redir/downloads/XtraBackup/LATEST/binary/tarba ...
- JAVA数据库编程(JDBC技术)-入门笔记
本菜鸟才介入Java,我现在不急着去看那些基本的语法或者一些Java里面的版本的特征或者是一些晋级的知识,因为有一点.Net的OOP编程思想,所以对于Java的这些语法以及什么的在用到的时候在去发现学 ...
- sys和os模块
一 sys 用于python解释器相关的操作 #!/usr/bin/env python # coding=utf-8 import time import sys def view_bar(num, ...
- Oracle ORA-12541:TNS:无监听程序
Oracle ORA-12541:TNS:无监听程序 标签: Oracle DataBase 今天使用Oracle数据库,使用可视化连接工具连接测试环境的数据库时提示无监听程序,最后在老师帮助下终于搞 ...
- JQ实现弹幕效果
JQ实现弹幕效果,快来吐糟你的想法吧 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charse ...
- python3.6连接oracle数据库
下载cx_Oracle模块模块: https://pypi.python.org/pypi/cx_Oracle/5.2.1#downloads 这里下载的是源码进行安装 [root@oracle or ...
- k8s集群master节点上的flannel总是不定期重启的原因分析
这个问题,困绕了团队一段时间, 因为暂时没有用到master的外网网络, 没有引起重视,但总归要解决. 上周五,刚好有点小空,就深入调查了一下. 最后,定位到了问题点:k8s master节点的fla ...
- IE去掉链接虚线框的几个方法
虚线框简直就是个多余的东西,上一篇教大家怎么去除Firefox中链接和按钮虚线框,今天叫大家去掉去除IE中链接的虚线框.方法一:利用javascript的onfocus事件,实现如下:Html代码 & ...
- 【LOJ】#2114. 「HNOI2015」菜肴制作
题解 把所有边反向 从小到大枚举每个点,把每个点能到达的点挑出来,判完无解后显然是一个DAG,然后在上面求一个编号最大的拓扑序,把这些点全部标记为已选,把每次求得的拓扑序倒序输出 代码 #includ ...
- 【LOJ】#2081. 「JSOI2016」反质数序列
题解 我居然都没反应过来二分图内选集合两两不能有边是最大独立集了 我退役吧 显然连边只能在奇数和偶数之间,然后二分图求最大独立集是节点数-最大匹配数 啊当然还有对于1的话只能留一个1 代码 #incl ...