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

以上包含的两个命令实现了我们前面所提交的逻辑，在这里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 命令绑定