首页 > 代码库 > 使用 MVVMLight 命令绑定（转）

使用 MVVMLight 命令绑定（转）

2024-07-28 08:05:22   225人阅读

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

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

MVVMLight Command Binding在界面中我们可以看见，已经增加了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中编写代码实现，而是通过事件绑定命令的方式实现。

使用 MVVMLight 命令绑定（转）


联系
我们