CommunityToolkit.Mvvm笔记---RelayCommand

news2024/11/25 5:48:21

RelayCommand 和 RelayCommand<T> 是 ICommand 实现，这些实现可向视图公开方法或委托。这些类型充当在 viewmodel 和 UI 元素之间绑定命令的方法。

平台API：RelayCommand、RelayCommand<T>、IRelayCommand、IRelayCommand<T>

工作原理

RelayCommand 和 RelayCommand<T> 具有以下主要功能：

它们提供 ICommand 接口的基本实现。
它们还实现 IRelayCommand（和 IRelayCommand<T>）接口，该接口公开 NotifyCanExecuteChanged 方法以引发 CanExecuteChanged 事件。
它们公开采用委托（如 Action 和 Func<T>）的构造函数，从而允许包装标准方法和 Lambda 表达式。

应用示例（RelayCommand）

步骤1：xaml视图，创建按钮触发命令

<Button Width="150" Height="30" Margin="0 30 0 0" Command="{Binding IncrementCounterCommand}">click</Button>
<TextBlock Width="150" Height="30" Text="{Binding Counter}"></TextBlock>

步骤2：创建ViewModel

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public class MainViewModel : ObservableObject
{
    [ObservableProperty]
    private int _counter;
    public ICommand IncrementCounterCommand { get; }
    private void IncrementCounter() => Counter++;

    public MainViewModel()
    {
        // 创建一个 RelayCommand 并指定其要执行的方法
         IncrementCounterCommand = new RelayCommand(IncrementCounter);
    }

   
}

结果如下图：点击按钮，textblock数据会一直增加

应用示例（RelayCommand<T>）

CommunityToolkit.Mvvm 中的 RelayCommand<T> 用来来处理带参数的命令。这种命令常用于需要传递参数从视图到视图模型的场景。例如，您可能需要根据用户的选择从列表中删除一个项目，或者您需要传递一个特定的数据项来进行处理。

步骤1：xaml视图

设置界面并将命令绑定到某个控件，例如按钮，同时使用参数。

<TextBlock  Width="150" Height="30" Text="{Binding Message}" FontSize="16" />
<TextBox  Width="150" Height="30"  Margin="5" Text="{Binding InputValue}"/>
<Button  Width="150" Height="30" Content="Update Message"
    Command="{Binding UpdateMessageCommand}"
    CommandParameter="{Binding InputValue}"
    Margin="5"/>

在这个布局中，我们有一个文本框供用户输入消息，和一个按钮，按钮点击时将文本框中的文本作为参数传递给 UpdateMessageCommand。

步骤2：创建ViewModel

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;

public class MainViewModel : ObservableObject
{
    public RelayCommand<string> UpdateMessageCommand { get; }

    private string _message;
    public string Message
    {
        get => _message;
        set => SetProperty(ref _message, value);
    }
    [ObservableProperty]
    private string _inputValue;//输入框参数

    public MainViewModel()
    {
        UpdateMessageCommand = new RelayCommand<string>(UpdateMessage);
    }

    private void UpdateMessage(string newMessage)
    {
        Message = newMessage;
    }
}

运行结果如下：