跳到主要内容
版本:11.0.0

如何使用ReactiveUI绑定命令

本指南将向您展示如何将视图模型方法(执行操作)绑定到可以响应用户交互而启动操作的控件(例如按钮)。此绑定在XAML中使用Command属性进行定义,例如:

<Window xmlns="https://github.com/avaloniaui">
...
<StackPanel Margin="20">
<Button Command="{Binding ExampleCommand}">Run the example</Button>
</StackPanel>

本指南假设您正在使用MVVM实现模式,并且您的视图模型基于 ReactiveUI 框架。

信息

要了解MVVM实现模式背后的概念,请参阅此处

如果您使用Avalonia MVVM Application解决方案模板创建了应用程序,那么您的解决方案已经包含 ReactiveUI 框架包,您可以像这样引用它:

using ReactiveUI;

可以通过实现 ICommand 接口来执行操作的视图模型通过该接口来实现。ReactiveUI 框架提供了实现 ICommandReactiveCommand 类。

信息

有关 ICommand 接口定义的详细信息,请参阅此处

Command 属性数据绑定将通过其 ICommand.Execute 接口调用绑定的视图模型方法,在绑定的控件被激活时。在这个例子中:当按钮被点击时。

要创建带有 ReactiveCommand 的视图模型,请按照以下示例:

  • 在您的视图模型中,声明一个命令,例如:
public ReactiveCommand<Unit, Unit> ExampleCommand { get; } 
  • 在视图模型中创建一个私有方法来执行操作。
  • 初始化Reactive命令,传递执行操作的方法的名称。

您的视图模型代码现在将如下所示:

namespace AvaloniaGuides.ViewModels
{
public class MainWindowViewModel
{
public ReactiveCommand<Unit, Unit> ExampleCommand { get; }

public MainWindowViewModel()
{
ExampleCommand = ReactiveCommand.Create(PerformAction);
}
private void PerformAction()
{
Debug.WriteLine("The action was called.");
}
}
}
  • 运行应用程序并监视调试输出。

当与Reactive命令绑定的控件被激活时(在本例中:当按钮被点击时),将通过Reactive命令调用执行操作的私有方法。

命令参数

通常需要向绑定到控件的Reactive命令传递参数。您可以在XAML中使用 CommandParameter 属性来实现这一点。例如:

<Window xmlns="https://github.com/avaloniaui">
...
<StackPanel Margin="20">
<Button Command="{Binding ExampleCommand}"
CommandParameter="From the button">Run the example</Button>
</StackPanel>
</Window>

现在,您必须修改视图模型,以便Reactive命令期望一个字符串参数,初始化期望一个字符串参数,执行操作的私有方法期望一个字符串参数。如下所示:

namespace AvaloniaGuides.ViewModels
{
public class MainWindowViewModel
{
public ReactiveCommand<string, Unit> ExampleCommand { get; }

public MainWindowViewModel()
{
ExampleCommand = ReactiveCommand.Create<string>(PerformAction);
}
private void PerformAction(string msg)
{
Debug.WriteLine($"The action was called. {msg}");
}
}
}

请注意,CommandParameter 属性上不会执行任何类型转换,因此,如果您需要使用不是字符串的类型参数,则必须在XAML中定义该类型。您还需要使用扩展的XAML语法来定义参数。

例如,要传递整数参数:

<Window xmlns="https://github.com/avaloniaui"
xmlns:sys="clr-namespace:System;assembly=mscorlib">
...
<Button Command="{Binding ExampleIntegerCommand}">
<Button.CommandParameter>
<sys:Int32>42</sys:Int32>
</Button.CommandParameter>
What is the answer?
</Button>
</Window>
危险

如果参数定义缺失或类型不正确,将会出现错误。

信息

与任何其他属性一样,命令参数也可以绑定。