使用 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 的代碼以下