使用 MVVMLight 命令绑定

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

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

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

在界面中我们可以看见，已经增加了5条数据，按钮“增加一条数据”已经呈现灰色不可用状态。这正是因为我们在命令中做了命令是否可用进行的限制。

MVVMLight 之 RelayCommand

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

第一种：

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

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

第二种：

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 命令绑定