您的当前位置:首页正文

CommunityToolkit.Mvvm笔记---RelayCommand

2024-11-26 来源:个人技术集锦

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

工作原理

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

  • 它们提供 ICommand 接口的基本实现。
  • 它们还实现 (和 )接口,该接口公开 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;
    }
}

运行结果如下:

 IRelayCommand 与RelayCommand 有什么区别

CommunityToolkit.Mvvm 库中,IRelayCommandRelayCommand 分别代表了接口和类的实现,它们是用来处理 MVVM(Model-View-ViewModel)模式中视图和视图模型之间的命令交互的。

用途:在许多情况下,IRelayCommand 用于声明依赖项注入(DI)或接口编程,允许开发者在测试时更容易地替换实现或模拟行为。RelayCommand 则用于实际的命令逻辑实现。

显示全文