如何在视图构造函数中绑定ReactiveCommand到ItemTemplate内的Button

问题背景 #

使用C#的ReactiveUI和Avalonia框架开发时，自定义控件MyItemsControl的ItemTemplate内按钮点击无任何反应，绑定未报错且视图、控件显示正常。若直接在XAML中绑定命令可正常执行，但希望遵循官方推荐在视图构造函数中完成绑定。

代码示例 #

视图MyView（XAML） #

<UserControl
    ...
    x:Class="MyApp.MyView"
    xmlns:vm="using:MyApp.ViewModels"
    xmlns:mycontrols="clr-namespace:MyApp.MyContorls" 
    DataContext="vm:MyViewModel"
>
    <!--Other code-->
    <mycontrols:MyItemsControl
        Name="MyItemsControl1"
    >
    <!--Other code-->
</UserControl>

MyView代码后置 #

public partial class MyView : IViewFor<MyViewModel>
{
    public MyItemsControl MyItemsControl1 => this.FindControl<MyItemsControl>("MyItemsControl1");

    public MyView()
    {
        this.WhenActivated(disposables =>
        {
            this.BindCommand(ViewModel, vm => vm.RemoveItemCommand, v => v.MyItemsControl1.RemoveThisItemCommand)
                .DisposeWith(disposables);
        }
        AvaloniaXamlLoader.Load(this);
    }
}

视图模型MyViewModel #

public class MyViewModel : ReactiveObject
{
    //other code
    private ReactiveCommand<SomeItem, Unit>? _removeItemCommand;
    public ReactiveCommand<SomeItem, Unit>? RemoveItemCommand
    {
        get { return _removeItemCommand; }
        private set { this.RaiseAndSetIfChanged(ref _removeItemCommand, value); }
    }
    //other code
}

自定义用户控件MyItemsControl（XAML） #

<UserControl
    x:Class="MyApp.MyControls.MyItemsControl"
    Name="ParentUserControl"
>
    <!--Other code-->
    <ItemsControl
        Items={Binding #ParentUserControl.SomeItems}
    >
        <ItemsControl.ItemTemplate>
            <DataTemplate>
                <Button
                    Command={Binding #ParentUserControl.RemoveThisItemCommand}
                    CommandParameter="{Binding .}"
                />
            </DataTemplate>
        </ItemsControl.ItemTemplate>
    </ItemsControl>
</UserControl>

MyItemsControl代码后置 #

public partial class MyItemsControl : UserControl
{
    public static readonly DirectProperty<MyItemsControl, ReactiveCommand<SomeItem, Unit>> RemoveThisItemCommandProperty =
        AvaloniaProperty.RegisterDirect<MyItemsControl, ReactiveCommand<SomeItem, Unit>>(nameof(RemoveThisItemCommand), x => x.RemoveThisItemCommand, (x, v) => x.RemoveThisItemCommand = v);

    private ReactiveCommand<SomeItem, Unit> _removeThisItemCommand;
    public ReactiveCommand<SomeItem, Unit> RemoveThisItemCommand
    {
        get => _removeThisItemCommand;
        set => SetAndRaise(RemoveThisItemCommandProperty, ref _removeThisItemCommand, value);
    }
}

解决方案 #

核心问题 #

视图构造函数中代码执行顺序错误：先调用WhenActivated进行绑定，再加载XAML，导致绑定执行时控件未初始化，命令未正确关联到控件属性。

修复步骤 #

1. 调整代码顺序：先加载XAML初始化控件，再执行绑定逻辑：

public partial class MyView : IViewFor<MyViewModel>
{
    public MyItemsControl MyItemsControl1 => this.FindControl<MyItemsControl>("MyItemsControl1");

    public MyView()
    {
        // 先加载XAML，确保控件实例化完成
        AvaloniaXamlLoader.Load(this);
        
        this.WhenActivated(disposables =>
        {
            this.BindCommand(ViewModel, vm => vm.RemoveItemCommand, v => v.MyItemsControl1.RemoveThisItemCommand)
                .DisposeWith(disposables);
        });
    }
}

2. 确认命令初始化：确保ViewModel中的RemoveItemCommand已正确实例化：

public MyViewModel()
{
    RemoveItemCommand = ReactiveCommand.Create<SomeItem>(item =>
    {
        // 实现移除逻辑
    });
}

3. 优化DataTemplate绑定（可选）：若使用新版本Avalonia，可替换名称绑定为父控件类型绑定，提升兼容性：

<Button
    Command="{Binding $parent[MyItemsControl].RemoveThisItemCommand}"
    CommandParameter="{Binding .}"
/>

验证要点 #

• 断点查看MyItemsControl1.RemoveThisItemCommand是否被正确赋值为ViewModel的命令实例
• 确认Button的CommandParameter是否正确传递当前项

内容的提问来源于stack exchange，提问作者Miljac