WPF点击Add按钮无法在Canvas添加UserControl问题求助

核心问题 #

1. DataTemplate 类型不匹配
   你的XAML中定义的DataTemplate是针对ShelfViewModel和PortViewModel的，但StkObjects集合中添加的是ItemViewModel实例。WPF无法为ItemViewModel找到对应的渲染模板，因此不会在Canvas上生成任何可视化元素。

2. ObservableCollection 多余的通知操作
   ObservableCollection<T>本身会在集合元素增删时自动触发UI更新，不需要手动调用RaisePropertyChanged(nameof(StkObjects))，多次调用属于冗余操作。

3. 违背MVVM数据驱动原则
   手动实例化UCShelf并设置DataContext的方式不符合MVVM模式，应该由DataTemplate根据ViewModel自动创建对应的View。

解决方案 #

方案1：直接使用ViewModel作为集合元素（推荐）

移除多余的ItemViewModel，让StkObjects直接存储ShelfViewModel/PortViewModel实例，这样XAML中的DataTemplate可以直接匹配渲染：

修改AddShelf方法：

private void AddShelf()
{
    var shelfViewModel = new ShelfViewModel
    {
        Top = ((_stkObjects.Count + 1) * 100),
        Left = ((_stkObjects.Count + 1) * 100),
        Width = 50,
        Height = 50,
    };

    // 直接将ViewModel添加到ObservableCollection，UI会自动更新
    _stkObjects.Add(shelfViewModel);
}

方案2：保留ItemViewModel（不推荐，仅兼容现有结构）

如果必须保留ItemViewModel，需要为其添加对应的DataTemplate，并通过子ViewModel关联到UserControl：

1. 修改ItemViewModel，添加子ViewModel属性：

public class ItemViewModel : INotifyPropertyChanged
{
    private object _contentViewModel;
    public object ContentViewModel
    {
        get => _contentViewModel;
        set { _contentViewModel = value; RaisePropertyChanged(); }
    }

    // 原有Top/Left/Width/Height属性...
}

2. 在XAML中添加ItemViewModel的DataTemplate：

<DataTemplate DataType="{x:Type local:ItemViewModel}">
    <ContentControl Content="{Binding ContentViewModel}" />
</DataTemplate>

3. 修改AddShelf方法：

private void AddShelf()
{
    var shelfViewModel = new ShelfViewModel
    {
        Top = ((_stkObjects.Count + 1) * 100),
        Left = ((_stkObjects.Count + 1) * 100),
        Width = 50,
        Height = 50,
    };

    var item = new ItemViewModel
    {
        ContentViewModel = shelfViewModel,
        Top = shelfViewModel.Top,
        Left = shelfViewModel.Left,
        Width = shelfViewModel.Width,
        Height = shelfViewModel.Height,
    };

    _stkObjects.Add(item);
}

额外检查 #

确保所有ViewModel（ShelfViewModel/PortViewModel/ItemViewModel）都正确实现了INotifyPropertyChanged接口，否则属性变更无法通知UI更新。

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