WinUI 3绑定Layer类ObservableCollection至ListView时程序挂起问题求助

核心问题是同一个UI元素不能同时存在于两个可视化树中：

• 你的Layer类继承自Canvas，属于UI元素，构造函数里已经把它添加到主画布的子元素，也就是加入了主画布的可视化树。
• 当你把Layer实例放进ObservableCollection<Layer>绑定到ListView时，ListView的DataTemplate会尝试将这个Layer实例作为可视化元素渲染到列表项中，这就导致同一个Layer实例要同时属于主画布和ListView项容器两个可视化树，WPF不允许这种情况，进而引发死锁或可视化树冲突，导致程序挂起。
• 而用ObservableCollection<Canvas>正常，是因为你传入的Canvas实例没有被添加到主画布的可视化树，ListView可以正常渲染这些独立的Canvas实例。

修复方案：分离数据与UI层 #

不要直接用UI元素（Layer）作为ListView的绑定源，而是用ViewModel来承载数据，让UI元素只负责渲染：

1. 创建LayerViewModel（数据模型）

public class LayerViewModel : INotifyPropertyChanged
{
    private string _name;
    private bool _isVisible = true;

    public string Name
    {
        get => _name;
        set { _name = value; OnPropertyChanged(); }
    }

    public bool IsVisible
    {
        get => _isVisible;
        set { _isVisible = value; OnPropertyChanged(); }
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

2. 修改Layer类（UI元素）
   去掉构造函数中自动添加到主画布的逻辑，改为绑定ViewModel的属性来控制状态：

public class Layer : Canvas
{
    public static readonly DependencyProperty ViewModelProperty =
        DependencyProperty.Register(nameof(ViewModel), typeof(LayerViewModel), typeof(Layer),
            new PropertyMetadata(null, OnViewModelChanged));

    public LayerViewModel ViewModel
    {
        get => (LayerViewModel)GetValue(ViewModelProperty);
        set => SetValue(ViewModelProperty, value);
    }

    private static void OnViewModelChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        var layer = (Layer)d;
        var vm = (LayerViewModel)e.NewValue;
        layer.Visibility = vm.IsVisible ? Visibility.Visible : Visibility.Collapsed;
        
        vm.PropertyChanged += (s, args) =>
        {
            if (args.PropertyName == nameof(LayerViewModel.IsVisible))
            {
                layer.Visibility = vm.IsVisible ? Visibility.Visible : Visibility.Collapsed;
            }
        };
    }

    public Layer() { }
}

3. 主ViewModel/代码后台同步数据与UI
   维护ViewModel集合供ListView绑定，同时创建对应的Layer实例添加到主画布：

public class MainViewModel : INotifyPropertyChanged
{
    public ObservableCollection<LayerViewModel> LayerViewModels { get; } = new ObservableCollection<LayerViewModel>();
    public Canvas MainCanvas { get; set; }

    public void AddLayer(string layerName)
    {
        var vm = new LayerViewModel { Name = layerName };
        LayerViewModels.Add(vm);
        
        var layer = new Layer { ViewModel = vm };
        MainCanvas.Children.Add(layer);
        layer.Width = MainCanvas.Width;
        layer.Height = MainCanvas.Height;
    }

    public event PropertyChangedEventHandler PropertyChanged;
    protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

4. ListView绑定与DataTemplate
   在XAML中绑定到ViewModel集合，用控件显示名称和控制可见性：

<ListView ItemsSource="{Binding LayerViewModels}">
    <ListView.ItemTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <TextBlock Text="{Binding Name}" Margin="0 0 10 0"/>
                <CheckBox IsChecked="{Binding IsVisible}" Content="可见"/>
            </StackPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

这样，ListView绑定的是纯数据的ViewModel，不会涉及UI元素的重复使用，主画布的Layer则通过ViewModel的属性来同步状态，彻底解决可视化树冲突的问题。

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