个人随笔
技术改变世界

使用 MVVMLight 绑定数据

MVVM

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

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

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

 

MVVMLight绑定数据示例

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

MVVMLightBinding_1

其实很简单,就是绑定了一个数据源而已,编写的代码也不多,下面我们来一步一步的实现使用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个字段分别是

  1. int ID
  2. string Name
  3. 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窗口。后面再来改进这些代码。

示例源码下载:MVVMLightDemo_1

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

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

分享到:更多 ()

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    更正一下错误:“ViewModel 用于存放业务逻辑代码。”。VM 并不存放业务逻辑,M 存放业务逻辑。
    微软官方的 MVVM 解释是:
    ~模型层包括所有用于实现核心应用逻辑并定义对应用域进行建模所必需类型的代码。此层完全独立于视图层和视图模型层。
    ~视图层使用声明性标记定义 UI。数据绑定标记定义特定 UI 组件和各种视图模型(有时简称为模型)成员之间的连接。
    ~视图模型层包括视图的数据绑定目标。在许多情况下,视图模型都直接公开模型,或者提供用来包装特定模型成员的成员。视图模型还可以定义用来跟踪与 UI 相关但与模型不相关的数据(如项目列表的显示顺序)的成员。

    CodingNinja2年前 (2015-09-10)回复