首页 > 代码库 > 使用 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中编写代码实现,而是通过事件绑定命令的方式实现。
使用 MVVMLight 命令绑定(转)