MAUI CollectionView如何绑定当前项？递归布局无限循环问题

核心问题 #

1. TreeNode控件缺少无参构造：MAUI在CollectionView的DataTemplate中实例化控件时默认调用无参构造，你的代码仅提供带参构造，导致控件无法正常实例化，引发加载失败。
2. TreeNodeModel的Children属性设计错误：每次访问Children都会创建新的ObservableCollection<TreeNodeModel>和子节点实例，既造成数据重复，又触发无限递归创建（父节点生成子节点，子节点又生成孙节点，循环往复）。
3. 手动设置BindingContext引发冲突：在TreeNode构造函数中手动指定BindingContext = ViewModel = tnm，破坏了DataTemplate自动绑定当前项的逻辑，导致绑定上下文混乱。

修正步骤 #

1. 调整TreeNode控件构造逻辑 #

添加无参构造，移除构造函数中手动设置BindingContext的代码，让ReactiveUI自动处理ViewModel绑定：

public partial class TreeNode : ReactiveContentView<TreeNodeModel>
{
    public double? IndentWidth => Depth * SpacerWidth;
    public double? PaddingWidth => IndentWidth + 30;
    public int SpacerWidth { get; } = 40;
    private int? Depth => ViewModel?.Value.Depth ?? 0;
    public string ExpandText => (ViewModel?.Children?.Count ?? 0) > 0 ? "▷" : "";

    // 新增无参构造，供MAUI在DataTemplate中实例化
    public TreeNode()
    {
        InitializeComponent();
        SetupReactiveSubscriptions();
    }

    // 保留带参构造，用于手动创建根节点
    public TreeNode(TreeNodeModel tnm) : this()
    {
        ViewModel = tnm;
    }

    // 把订阅逻辑抽离到单独方法
    private void SetupReactiveSubscriptions()
    {
        this.WhenAnyValue(x => x.ViewModel.isExpanded)
            .ObserveOn(RxApp.MainThreadScheduler)
            .Subscribe(b => _ChildrenStackLayout.IsVisible = b);

        this.WhenAnyValue(b => b.ViewModel.selected)
            .ObserveOn(RxApp.MainThreadScheduler)
            .Subscribe(a => SelectionBoxView.IsVisible = a);

        this.WhenAnyValue(b => b.ViewModel)
            .ObserveOn(RxApp.MainThreadScheduler)
            .WhereNotNull()
            .Subscribe(vm =>
            {
                vm.Children.CollectionChanged += (o, e) =>
                {
                    _SpacerBoxView.WidthRequest = IndentWidth ?? 0;
                };
            });
    }
}

2. 修复TreeNodeModel的Children属性，缓存集合避免重复创建 #

将Children改为缓存的ObservableCollection，仅在Value变化时更新子节点：

public class TreeNodeModel : ReactiveObject
{
    private ITreeNode _value;
    private ObservableCollection<TreeNodeModel>? _children; // 缓存集合
    private TreeNodeModel? _parent;
    private bool _toggled;
    private bool _selected;
    private bool _expanded;
    private string _contract;

    [Reactive]
    public ITreeNode Value 
    { 
        get => _value; 
        set 
        {
            if (this.RaiseAndSetIfChanged(ref _value, value))
            {
                // Value变化时更新子节点集合
                UpdateChildrenCollection();
                // 同步Parent到ITreeNode
                if (Parent != null)
                    Value.Parent = Parent.Value;
            }
        }
    }

    [Reactive]
    public TreeNodeModel? Parent
    {
        get => _parent; 
        set
        {
            if (this.RaiseAndSetIfChanged(ref _parent, value))
            {
                Value.Parent = value?.Value;
            }
        }
    }

    // 改为只读属性，返回缓存的集合
    public ObservableCollection<TreeNodeModel> Children
    {
        get
        {
            if (_children == null)
            {
                _children = new ObservableCollection<TreeNodeModel>();
                UpdateChildrenCollection();
            }
            return _children;
        }
    }

    // 新增方法更新子节点集合
    private void UpdateChildrenCollection()
    {
        if (_children == null || Value == null) return;

        _children.Clear();
        foreach (var childNode in Value.Children ?? new ObservableCollection<ITreeNode>())
        {
            var childModel = new TreeNodeModel(childNode, _contract)
            {
                Tree = this.Tree,
                Parent = this
            };
            _children.Add(childModel);
        }
    }

    // 其他属性保持不变
    public TreeNodeModel Root
    {
        get
        {
            TreeNodeModel top = this;
            do
            {
                if (top.Parent != null)
                    top = top.Parent;
                else break;
            } while (top != null);
            return top ?? this;
        }
    }

    [Reactive] public bool isExpanded { get; set; }
    [Reactive] public bool Toggled { get; set; }
    public TreeModel Tree { get; set; }
    [Reactive] public bool selected { get; set; }

    public TreeNodeModel(ITreeNode val, string contract)
    {
        _contract = contract;
        Toggled = val.Toggled;
        selected = false;
        isExpanded = false;
        _value = val;

        // 移除递归创建Parent的TreeNodeModel逻辑，避免无限循环
        this.WhenAnyValue(b => b.Toggled).Subscribe(a => _value.Toggled = a);
    }
}

3. 修正XAML中的DataTemplate绑定 #

指定DataTemplate的DataType，确保当前项正确绑定到TreeNode的ViewModel：

<maui:ReactiveContentView
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:maui="clr-namespace:ReactiveUI.Maui;assembly=ReactiveUI.Maui"
    xmlns:vm="clr-namespace:turquoise_frontend.Controls"
    xmlns:math="clr-namespace:HexInnovation;assembly=MathConverter.Maui"
    x:TypeArguments="vm:TreeNodeModel"
    x:DataType="vm:TreeNodeModel"
    x:Class="turquoise_frontend.Controls.TreeNode" 
    x:Name="this">
    <VerticalStackLayout x:Name="sl2">
        <!-- 省略其他无关代码 -->
        <CollectionView ItemsSource="{Binding Children}" 
                        x:Name="_ChildrenStackLayout" 
                        CanMixGroups="True" 
                        CanReorderItems="True" 
                        ReorderCompleted="_ChildrenStackLayout_ReorderCompleted">
            <CollectionView.ItemTemplate>
                <!-- 指定DataTemplate的DataType，确保绑定上下文正确 -->
                <DataTemplate x:DataType="vm:TreeNodeModel">
                    <!-- 绑定当前集合项到TreeNode的ViewModel -->
                    <vm:TreeNode ViewModel="{Binding .}" />
                </DataTemplate>
            </CollectionView.ItemTemplate>
        </CollectionView>
    </VerticalStackLayout>
</maui:ReactiveContentView>

关键说明 #

• MAUI中DataTemplate的绑定上下文默认是当前集合项，{Binding .}可直接引用当前项，配合x:DataType能让IntelliSense正常工作，避免绑定错误。
• 移除TreeNode构造函数中手动设置BindingContext的逻辑，让ReactiveUI的ReactiveContentView<TViewModel>自动处理ViewModel与BindingContext的关联，避免上下文冲突。
• 缓存TreeNodeModel的Children集合，仅在Value变化时更新，彻底解决无限递归创建子节点的问题。

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