MVVM-命令模式的實現與應用

本文同時為b站WPF課程的筆記，相關示例代碼

綁定

這個其實前面已經講過一部分

使用{Binding}設置數據綁定，將控制項的屬性綁定到 ViewModel 的相應屬性。

比如說需要註意，在xaml中綁定的不再是UserName和Password了，而是loginModel.UserName和loginModel.Password。

還要為命令和用戶交互設置綁定，例如按鈕點擊事件可以綁定到 ViewModel 中的命令。

命令

在MVVM中，通常不會在 View 的代碼後置文件（比如這裡是MainWindow.xaml.cs）中編寫邏輯代碼，而是使用命令來處理用戶交互，如按鈕點擊。

命令模式框架

首先我們新建一個類，在這個類中實現基本的命令模式框架。

新建類RelayCommand.cs，讓這個類繼承自ICommand，並且實現以下介面。照抄代碼即可。

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）寫入：

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就是上面的公共屬性。

<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項目中查看。