使用 MVVMLight 命令绑定

时间 2019-11-09

标签使用 mvvmlight 命令绑定繁體版

原文原文链接

首先，若是您但愿了解更多的MVVMLight技术或但愿有顺序的学习MVVMLight，请查阅目录《MVVMLight 设计模式系列使用文章》。html

继上一篇文章的项目，咱们实现了数据绑定到界面中。这篇文章咱们将实现把命令绑定到按钮上，在XAML中的Button之类的都会有个Command属性可让咱们来绑定命令使用。设计模式

首先咱们要实现的目标是，在界面中能够点击按钮添加数据，可是最多能添加5条数据，最少保证有1条数据。也就是两个按钮哈（增长数据/删除数据）。界面以下：函数

在界面中咱们能够看见，已经增长了5条数据，按钮“增长一条数据”已经呈现灰色不可用状态。这正是由于咱们在命令中作了命令是否可用进行的限制。学习

MVVMLight 之 RelayCommand

在 GalaSoft.MvvmLight.Command; 命名空间中咱们能够找到一个名为 RelayCommand 的类，该类包含了两种构造函数，根据状况选择。spa

第一种：设计

RelayCommand(传入要执行的方法);code

执行命令的就是执行你传入的这个方法啦，详细能够参考本文的示例代码。xml

第二种：htm

RelayCommand(传入要执行的方法, 传入判断命令是否可执行的方法);进程

第二种构造函数基本上就是第一种的升级版，能够控制命令是否可用。

下面来看看咱们的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;
using GalaSoft.MvvmLight.Command;
namespace MVVMLightDemo.ViewModel
{
public class UserViewModel : ViewModelBase
{
/*********** 构造函数 ************/
public UserViewModel()
{
//初始化数据
_userData = User.GetUserList();
//初始化命令 (第一个参数是执行的命令方法，第二个参数是控制命令是否可用)
AddUserCommand = new RelayCommand(ExecuteAddUser, CanExecuteAddUser);
DeleteUserCommand = new RelayCommand(ExecuteDeleteUser, CanExecuteDeleteUser);
}
/************** 属性 **************/
private ObservableCollection<User> _userData;
/// <summary>
/// 用户信息数据
/// </summary>
public ObservableCollection<User> UserData
{
get { return _userData; }
set
{
_userData = value;
RaisePropertyChanged("UserData");
}
}
/************* 命令 ***************/
#region 新增一个用户命令：AddUserCommand
/// <summary>
/// 新增一个用户
/// </summary>
public RelayCommand AddUserCommand { get; private set; }
//新增一个用户命令执行方法
void ExecuteAddUser()
{
User user = new User();
user.ID = 3;
user.Name = "王旭";
user.Domain = "无/" + DateTime.Now.ToString();
UserData.Add(user);
}
//小于5条数据时命令可用
bool CanExecuteAddUser()
{
return UserData.Count < 5;
}
#endregion
#region 删除一个用户命令：DeleteUserCommand
/// <summary>
/// 删除一个用户
/// </summary>
public RelayCommand DeleteUserCommand { get; private set; }
//删除一个用户命令执行方法
void ExecuteDeleteUser()
{
UserData.RemoveAt(0);
}
//最少保证有1条数据时命令可用
bool CanExecuteDeleteUser()
{
return UserData.Count > 1;
}
#endregion
}
}

以上包含的两个命令实现了咱们前面所提交的逻辑，在这里Execute开头命名的方法是命令执行的方法，CanExecute开头的命名的方法是执行以前所判断的条件，根据你所给的返回值来决定这个命令是否可用。至于方法命名方式你要随意，看习惯咯。

是否是很简单？没错，就这么简单，下面咱们再看看View吧。

下面是UserView.xaml的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>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0">
<Button Command="{Binding AddUserCommand}">增长一条数据</Button>
<Button Command="{Binding DeleteUserCommand}">删除一条数据</Button>
</StackPanel>
<DataGrid Grid.Row="1" ItemsSource="{Binding UserData}"></DataGrid>
</Grid>
</Window>

在Button元素标签中使用 Command属性，将其绑定咱们指定命令名称便可。

小提示：别忘了给本身的命令设置 public ，不然是无法成功绑定的。

至此咱们就完成了对MVVMLight命令绑定的一个了解，没错还有一些问题咱们如今无法解决。例如，在TextBox Lable Window 之类的没有Command命令。咱们如何作，下一篇文章会详细对此进行阐述，咱们将改进程序的加载方式，但愿在界面呈现以后加载数据。

因此咱们会在Load的时候加载数据，可是不违背MVVM设计模式的思想之代码分离。因此咱们不会在View中编写代码实现，而是经过事件绑定命令的方式实现。

本文示例源码下载：MVVMLightDemo_2

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

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