使用 MVVMLight 命令绑定

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

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

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

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

 

MVVMLight 之 RelayCommand

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

第一种：

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

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

 

第二种：

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

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

 

下面来看看我们的UserViewModel的完整源码

其实只看命令部分即可，理解如何构造一个完整的命令。

1.  using System;
2. using System.Collections.Generic;
3. using System.Collections.ObjectModel;
4. using System.Linq;
5. using System.Text;
6. using System.Threading.Tasks;
7.  
8. using GalaSoft.MvvmLight;
9. using MyModel;
10. using GalaSoft.MvvmLight.Command;
11.  
12. namespace MVVMLightDemo.ViewModel
13. {
14.     public class UserViewModel : ViewModelBase
15.     {
16.         /*********** 构造函数 ************/
17.         public UserViewModel()
18.         {
19.             //初始化数据
20.             _userData = User.GetUserList();
21.  
22.             //初始化命令  (第一个参数是执行的命令方法，第二个参数是控制命令是否可用)
23.             AddUserCommand = new RelayCommand(ExecuteAddUser, CanExecuteAddUser);   
24.             DeleteUserCommand = new RelayCommand(ExecuteDeleteUser, CanExecuteDeleteUser);
25.         }
26.  
27.         /************** 属性 **************/
28.         private ObservableCollection<User> _userData;
29.         /// <summary>
30.         /// 用户信息数据
31.         /// </summary>
32.         public ObservableCollection<User> UserData
33.         {
34.             get { return _userData; }
35.             set
36.             {
37.                 _userData = value;
38.                 RaisePropertyChanged("UserData");
39.             }
40.         }
41.  
42.  
43.         /************* 命令 ***************/
44.         #region 新增一个用户命令：AddUserCommand
45.         /// <summary>
46.         /// 新增一个用户
47.         /// </summary>
48.         public RelayCommand AddUserCommand { get; private set; }
49.  
50.         //新增一个用户 命令执行方法
51.         void ExecuteAddUser()
52.         {
53.             User user = new User();
54.             user.ID = 3;
55.             user.Name = "王旭";
56.             user.Domain = "无/" + DateTime.Now.ToString();
57.             UserData.Add(user);
58.         }
59.  
60.         //小于5条数据时命令可用
61.         bool CanExecuteAddUser()
62.         {
63.             return UserData.Count < 5;
64.         }
65.         #endregion
66.  
67.         #region 删除一个用户命令：DeleteUserCommand
68.         /// <summary>
69.         /// 删除一个用户
70.         /// </summary>
71.         public RelayCommand DeleteUserCommand { get; private set; }
72.  
73.         //删除一个用户 命令执行方法
74.         void ExecuteDeleteUser()
75.         {
76.             UserData.RemoveAt(0);
77.         }
78.  
79.         //最少保证有1条数据时命令可用
80.         bool CanExecuteDeleteUser()
81.         {
82.             return UserData.Count > 1;
83.         }
84.         #endregion
85.     }
86. }

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

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

 

下面是UserView.xaml的XAML代码

相对上一篇文章其实就加了两个按钮而已。

1. <Window x:Class="MVVMLightDemo.View.UserView"
2.         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.         Title="UserView" Height="300" Width="300">
5.     <Grid>
6.         <Grid.RowDefinitions>
7.             <RowDefinition Height="auto" />
8.             <RowDefinition Height="*" />
9.         </Grid.RowDefinitions>
10.         <StackPanel Grid.Row="0">
11.             <Button Command="{Binding AddUserCommand}">增加一条数据</Button>
12.             <Button Command="{Binding DeleteUserCommand}">删除一条数据</Button>
13.         </StackPanel>
14.         <DataGrid Grid.Row="1" ItemsSource="{Binding UserData}"></DataGrid>
15.     </Grid>
16. </Window>

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

小提示：别忘了给自己的命令设置 public ，否则是没法成功绑定的。

 

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

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

本文示例源码下载：MVVMLightDemo_2

 

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

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