使用 MVVMLight 绑定数据

时间 2019-11-09

标签使用 mvvmlight 绑定数据繁體版

原文原文链接

若是你还不知道如何在VS中加入MVVMLight的引用，那么建议你先翻阅这篇文章：在VS中安装/使用 MVVMLighthtml

这篇文章主要是介绍如何使用MVVMLight来绑定数据到界面中（View），以此来了解MVVMLight的一些基础的类的用法。设计模式

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

MVVMLight绑定数据示例

好了，咱们在新建了两个项目，分别是“MVVMLight的主程序” 与 “Model层”，运行的效果及解决方案结构以下：函数

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

如何实现？

我这里使用的是.NET 4.5 ，你可使用至少4.0以上的版原本实现这个项目（选择4.0/4.5 要选择想要的MVVMLight的引用文件），下面依次创建两个项目来实现。网站

1.创建Model层的项目

新建了一个命名为“MyModel”的类库项目，其中引用了MVVMLight相关程序集，而后包含一个User类便可。User.cs代码以下：this

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("");spa

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

int ID
string Name
string Domain

而后包含了一个静态的GetUserList()方法。其余的就没什么了，这个项目就创建完毕了。code

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窗口。后面再来改进这些代码。

示例源码下载：MVVMLightDemo_1

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

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