ReactiveUI 和 PRISM.MVVM

Question

我是 ReactiveUI 的新手。 我正在尝试将 PRISM.MVVM 与 ReactiveUI 结合起来。 特别是，我想将 PRISM 用于其导航实用程序，并使用 ReactiveUI 来创建 UI。 即使我使用 MVVM 模式，我也不确定是否在视图代码隐藏中使用代码：有没有一种方法可以将 UI 控件绑定到 ViewModel 属性，而无需在代码隐藏中创建绑定？
这是一个例子：

视图模型：

public class MainWindowViewModel : ReactiveObject
{
    private string _inputValue;
    public string InputValue
    {
        get => _inputValue;
        set => this.RaiseAndSetIfChanged(ref _inputValue, value);
    }

    private string _outputValue;
    public string OutputValue
    {
        get => _outputValue;
        set => this.RaiseAndSetIfChanged(ref _outputValue, value);
    }

    public MainWindowViewModel()
    {
        this.WhenAnyValue(x => x.InputValue).Subscribe(x => OutputValue = x);
    }
}

看法：

<rxui:ReactiveWindow 
xmlns:rxui="http://reactiveui.net"
x:Class="WPFReactiveUI.Views.MainWindow"
x:TypeArguments="viewModels:MainWindowViewModel"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:viewModels="clr-namespace:WPFReactiveUI.ViewModels"
    Title="ReactiveUI and PRISM sample" Height="350" Width="525" >
<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"></RowDefinition>
    </Grid.RowDefinitions>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="*"></ColumnDefinition>
        <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>

    <TextBox Grid.Row="0" Grid.Column="0" x:Name="InputText" Text="{Binding InputValue}" />
    <Label Grid.Row="0" Grid.Column="1" x:Name="OutputLabel" Content="{Binding OutputValue}"/>
</Grid>
</rxui:ReactiveWindow>

查看代码隐藏：

public partial class MainWindow 
{
    public MainWindow()
    {
        InitializeComponent();
        ViewModel = new AppViewModel();

        this.WhenActivated(disposable =>
        {
            this.Bind(ViewModel, x => x.Input, x => x.InputText.Text)
                .DisposeWith(disposable);
            this.Bind(ViewModel, x => x.Output, x => x.OutputLabel.Content)
                .DisposeWith(disposable);
        });
    }
}

这个例子工作正常，但我不明白是否有办法不在代码隐藏中编写代码，或者我是否因为 ReactiveUI 而不得不这样做。 提前致谢

Answer 1

有办法。 不确定你会喜欢它，但有办法。

您可以最大限度地减少必须编写的样板代码。

您必须编写一些代码，并且使视图模型中的每个属性复杂化。

您现在可以使用在构建中生成代码文件的代码生成器。 这些可以读取您拥有的类和代码，将代码添加到您的项目中。

你可以写其中一个。

通常，这是属性驱动的。 但是您可以编写代码来检查您的源代码并根据您的规范发出更多源代码。 您编写代码生成字符串。

这里清楚地解释了一个例子：

https://learn.microsoft.com/en-us/do.net/communitytoolkit/mvvm/generators/overview

正如它所说，你有

[ObservableProperty]
private string? name;

并且源生成器使用引发属性更改的 setproperty 代码创建公共属性 Name。

您生成的代码进入磁盘上的一个文件，以编译到您的应用程序中。 你可以找到并查看它。

您将需要约定或另一个属性来指定使用视图模型的位置。 （是的。有点臭）。 您需要在自己的属性中使用一个字符串作为参数，告诉它您要绑定到的控件名称。 （是的。也有点臭）。

该文件将是主窗口的部分 class，其中只有您生成的 reactiveui 非绑定代码。

你会安排它在一个方法中，该方法采用一次性参数并运行它以及你编写的任何代码。 大致：

 public MainWindow()
{
    InitializeComponent();
    ViewModel = new AppViewModel();

    this.WhenActivated(disposable =>
    {
        this.Bind(ViewModel, x => x.Input, x => x.InputText.Text)
            .DisposeWith(disposable);
        this.Bind(ViewModel, x => x.Output, x => x.OutputLabel.Content)
            .DisposeWith(disposable);
        GeneratedBindingCodeMethod(disposable);
    });
}

此处，GeneratedBindingCodeMethod 位于由您的源代码生成器生成的部分主窗口 class 中。

这无法生成您所有的绑定代码。 或者希望无论如何都不会。 如果没有翻译，那么你宁愿在所有这些 lambda 上浪费时间

或者......你知道......你可以先使用viewmodel“导航”和沟渠棱镜。 只需将别人的代码生成器和 go 与社区工具包一起使用即可。

就个人而言，我更喜欢该工具包而不是 reactiveui 和/或 prism。