ReactiveUI/Avalonia中用户控件属性与ViewModel绑定操作的最佳实践

Web开发中常创建可复用组件，通过父上下文传入属性控制组件行为。比如Web里的<IncrementButton startCount={1} title="My Title" />，点击按钮计数从1开始递增；换个页面传入<IncrementButton startCount={2} title="Hello World" />，计数就从2开始。

现在要在ReactiveUI/Avalonia中实现类似场景，通过<control:IncrementButton Count="1" Title="My Title" />和<control:IncrementButton Count="2" Title="Hello World" />传入属性值，有两个疑问：

1. 是否应该像示例代码那样把控件本身传入ViewModel？
2. 如何在ViewModel中配置绑定来操作初始计数？

示例代码：

public class IncrementButton : UserControl
{
    public static readonly StyledProperty<int> CountProperty =
        AvaloniaProperty.Register<MyButtonView, int>(nameof(Count));

    public int Count
    {
        get => GetValue(CountProperty);
        set => SetValue(CountProperty, value);
    }

    public IncrementButton()
    {
        InitializeComponent();

        // Set DataContext to a new instance of the ViewModel
        DataContext = new IncrementButtonViewModel(this); // Pass the control itself to the ViewModel
    }
}

1. 不要将控件传入ViewModel #

这种做法违反了MVVM的核心原则：ViewModel不应该依赖View。把控件传给ViewModel会导致两者耦合度极高，ViewModel无法脱离View独立测试，也破坏了组件的可复用性，绝对不推荐。

2. 正确的实现步骤 #

第一步：设计独立的ViewModel

ViewModel只负责业务逻辑和数据状态，完全不依赖任何UI控件。使用ReactiveUI的ReactiveObject实现属性变更通知，同时定义递增命令：

using ReactiveUI;
using System.Reactive;

public class IncrementButtonViewModel : ReactiveObject
{
    private int _count;
    public int Count
    {
        get => _count;
        set => this.RaiseAndSetIfChanged(ref _count, value);
    }

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

    public ReactiveCommand<Unit, Unit> IncrementCommand { get; }

    public IncrementButtonViewModel()
    {
        // 初始化递增命令
        IncrementCommand = ReactiveCommand.Create(() =>
        {
            Count++;
        });
    }
}

第二步：实现UserControl并配置绑定

在控件中定义Count和Title两个依赖属性，然后将这些属性与ViewModel的对应属性做双向绑定，确保外部传入的初始值能同步到ViewModel，ViewModel的变更也能同步回控件：

using Avalonia;
using Avalonia.Controls;
using Avalonia.Markup.Xaml;
using ReactiveUI;

public class IncrementButton : UserControl, IViewFor<IncrementButtonViewModel>
{
    public static readonly StyledProperty<int> CountProperty =
        AvaloniaProperty.Register<IncrementButton, int>(nameof(Count));

    public static readonly StyledProperty<string> TitleProperty =
        AvaloniaProperty.Register<IncrementButton, string>(nameof(Title));

    public int Count
    {
        get => GetValue(CountProperty);
        set => SetValue(CountProperty, value);
    }

    public string Title
    {
        get => GetValue(TitleProperty);
        set => SetValue(TitleProperty, value);
    }

    // 实现IViewFor接口，方便ReactiveUI绑定
    public IncrementButtonViewModel ViewModel { get; set; }
    object IViewFor.ViewModel
    {
        get => ViewModel;
        set => ViewModel = value as IncrementButtonViewModel;
    }

    public IncrementButton()
    {
        InitializeComponent();
        ViewModel = new IncrementButtonViewModel();

        // 建立依赖属性与ViewModel属性的双向绑定
        this.Bind(ViewModel, vm => vm.Count, v => v.Count)
            .DisposeWith(this);
        this.Bind(ViewModel, vm => vm.Title, v => v.Title)
            .DisposeWith(this);
    }

    private void InitializeComponent()
    {
        AvaloniaXamlLoader.Load(this);
    }
}

第三步：编写控件的XAML布局

在XAML中绑定ViewModel的属性和命令，完成UI展示：

<UserControl x:Class="YourNamespace.Controls.IncrementButton"
             xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="clr-namespace:YourNamespace.ViewModels">
    <StackPanel Margin="10" Spacing="5">
        <TextBlock Text="{Binding Title}" FontSize="14" />
        <Button Content="点击递增" Command="{Binding IncrementCommand}" Width="100" />
        <TextBlock Text="{Binding Count}" FontSize="16" FontWeight="Bold" />
    </StackPanel>
</UserControl>

第四步：在父页面中使用控件

直接通过属性传入初始值即可，和Web组件的用法一致：

<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:control="clr-namespace:YourNamespace.Controls"
        Title="MainWindow" Width="400" Height="300">
    <StackPanel Margin="20" Spacing="15">
        <control:IncrementButton Count="1" Title="My Title" />
        <control:IncrementButton Count="2" Title="Hello World" />
    </StackPanel>
</Window>

核心逻辑说明 #

• 外部传入的Count和Title通过依赖属性同步到ViewModel，作为初始值；
• 点击按钮触发ViewModel的IncrementCommand，修改Count属性，通过绑定同步回控件展示；
• ViewModel完全独立，可单独编写单元测试验证递增逻辑，控件也能在任意页面复用。

内容的提问来源于stack exchange，提问作者Kyle Corbin Hurst