个人随笔
技术改变世界

使用 MVVMLight 命令绑定

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

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

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

MVVMLight Command Binding在界面中我们可以看见,已经增加了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 命令绑定

分享到:更多 ()

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1

    内容写的很精彩,但是我遇到了一个致命的问题,就是引入mvvmlight后,我的mode 类继承与ObservableObject后,mode类不能被序列化(Serializable)了,此问题有没有遇到,怎么解决!

    十六笔画2周前 (04-16)回复