MVVM-命令模式的实现与应用

本文同时为b站WPF课程的笔记，相关示例代码

绑定

这个其实前面已经讲过一部分

使用{Binding}设置数据绑定，将控件的属性绑定到 ViewModel 的相应属性。

比如说需要注意，在xaml中绑定的不再是UserName和Password了，而是loginModel.UserName和loginModel.Password。

还要为命令和用户交互设置绑定，例如按钮点击事件可以绑定到 ViewModel 中的命令。

命令

在MVVM中，通常不会在 View 的代码后置文件（比如这里是MainWindow.xaml.cs）中编写逻辑代码，而是使用命令来处理用户交互，如按钮点击。

命令模式框架

首先我们新建一个类，在这个类中实现基本的命令模式框架。

新建类RelayCommand.cs，让这个类继承自ICommand，并且实现以下接口。照抄代码即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Input;

namespace WPF_Study_LIBRARY
{
    public class RelayCommand:ICommand
    {
        /// <summary>
        /// 命令是否能够执行
        /// </summary>
        readonly Func<bool> _canExecute;
        /// <summary>
        /// 命令需要执行的方法
        /// </summary>
        readonly Action _execute;

        public RelayCommand(Action action,Func<bool> canExecute)
        {
            _canExecute = canExecute;
            _execute = action;
        }

        public bool CanExecute(object parameter)
        {
            if (_canExecute == null)
            {
                return true;
            }
            return _canExecute();
        }


        public void Execute(object parameter)
        {
            if (_execute == null)
            {
                return;
            }
            _execute();
        }
        public event EventHandler CanExecuteChanged
        {
            add
            {
                if (_canExecute != null)
                {
                    CommandManager.RequerySuggested += value;
                }
            }
            remove
            {
                if (_canExecute != null)
                {
                    CommandManager.RequerySuggested -= value;
                }
            }
        }
    }
}

这段代码定义了一个 RelayCommand 类，实现了 ICommand 接口，用于在WPF应用程序中执行命令。总而言之，照抄即可.

引入命令

在 ViewModel 中（我这里是LoginVM.cs）写入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
void LoginFunc()
{
    if (UserName == "xxx" && Password == "xxx")
    {
        //MessageBox.Show("Login");
        Index index = new Index();
        index.Show();
        _main.Hide();
    }
    else
    {
        MessageBox.Show("Error");
        UserName = "";
        Password = "";
    }
}



bool CanLoginExecute()
{
    return true;
}

public ICommand LoginAction
{
    get
    {
        return new RelayCommand(LoginFunc, CanLoginExecute);
    }
}

void LoginFunc()就是一个简单的登录函数，简单的判断用户名与密嘛是否匹配。

bool CanLoginExecute()是用来确定是否可以执行登录操作，在我这个例子当中并没有做其他的阻拦。实际的运用中可以根据特定的条件来确定是否可以执行登录操作，比如检查用户名和密码是否符合要求、网络连接是否可用等。

public ICommand LoginAction是一个公共属性，可以被绑定到登录按钮等 UI 元素上。

按钮绑定命令

将需要绑定的元素的Command属性设定为{Binding LoginAction}，这里的LoginAction就是上面的公共属性。

1
<Button Grid.Row="3" Grid.ColumnSpan="2" Content="Login" Command="{Binding LoginAction}"/>

小结

在上述操作中，我们简单的尝试了MVVM模式，将逻辑与界面分离，以实现更好的可维护性和可测试性。

刚刚呢，我是将登录的功能的具体实现代码放到了ViewModel中的LoginFunc()函数中，而不是放在MainWindow.xaml.cs等View相关的代码后置文件中。同时使用了命令模式来处理交互，确保了逻辑与界面的分离。

经过这一次的MVVM - 命令模式的实现与运用与上一次的MVVM - Model和ViewModel的创建和配置，基本描述完了实现 MVVM 的完整步骤。

需要的全部代码可以在相关示例代码中WPF_Study_LIBRARY项目中查看。

← BACK TO INDEX WPF学习笔记 / 2024—02
本文作者：Vanilla
#C# #WPF #MVVM
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
← MVVM - Model和ViewModel的创建和配置 C#获得项目最后编译时间 →

COMMENTS

via giscus