MVVM模式下Canvas中添加UserControl无UI反馈问题排查

核心问题1：Shelf实例未设置Type属性，导致模板不匹配 #

你在AddShelf方法中创建Shelf对象时，只赋值了X、Y、Width、Height，但没有设置Type属性。而XAML中的DataTrigger是通过Type值来匹配加载UCShelf或UCPort模板的，因此模板不会被触发，ContentControl没有内容，UI自然不显示。

修复代码：

private void AddShelf()
{
    if(_shelfs == null)
    {
        _shelfs = new ObservableCollection<Shelf>();
    }
    // 添加Type属性赋值
    _shelfs.Add(new Shelf {X = (_shelfs.Count *  40), Y = 10, Width = 30, Height = 30, Type = "Shelf" });
    // 若Shelfs是ObservableCollection类型，这行可以删除
    // OnPropertyChanged(nameof(Shelfs));
    MessageBox.Show("Total Shelf = " + _shelfs.Count);
}

核心问题2：Shelf类未实现INotifyPropertyChanged接口 #

你的Shelf类中的X、Y、Width、Height、Type属性没有实现属性变更通知，即使后续修改这些属性，UI也无法更新。更关键的是，WPF绑定需要目标对象实现该接口才能确保绑定生效（虽然添加新项时ObservableCollection会通知集合变化，但单个属性的绑定依赖于该接口）。

修复代码：

public class Shelf : INotifyPropertyChanged
{
    private double _x;
    public double X
    {
        get => _x;
        set
        {
            _x = value;
            OnPropertyChanged(nameof(X));
        }
    }

    private double _y;
    public double Y
    {
        get => _y;
        set
        {
            _y = value;
            OnPropertyChanged(nameof(Y));
        }
    }

    private double _width;
    public double Width
    {
        get => _width;
        set
        {
            _width = value;
            OnPropertyChanged(nameof(Width));
        }
    }

    private double _height;
    public double Height
    {
        get => _height;
        set
        {
            _height = value;
            OnPropertyChanged(nameof(Height));
        }
    }

    private string _type;
    public string Type
    {
        get => _type;
        set
        {
            _type = value;
            OnPropertyChanged(nameof(Type));
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }
}

可选优化：简化ItemsSource绑定与模板逻辑 #

1. 优化Shelfs属性声明：将Shelfs属性改为ObservableCollection<Shelf>类型，这样不需要手动调用OnPropertyChanged(nameof(Shelfs))，因为ObservableCollection自身会触发集合变更通知：

private ObservableCollection<Shelf> _shelfs;
public ObservableCollection<Shelf> Shelfs => _shelfs;

public MainViewModel()
{
    _shelfs = new ObservableCollection<Shelf>();
}

2. 添加默认模板：避免当Type不匹配时无内容显示，给ContentControl设置默认模板：

<Style TargetType="ContentControl">
    <!-- 默认加载UCShelf模板 -->
    <Setter Property="ContentTemplate">
        <Setter.Value>
            <DataTemplate>
                <UC:UCShelf Width="{Binding Width}" Height="{Binding Height}"/>
            </DataTemplate>
        </Setter.Value>
    </Setter>
    <Style.Triggers>
        <DataTrigger Binding="{Binding Type}" Value="Port">
            <Setter Property="ContentTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <UC:UCPort Width="{Binding Width}" Height="{Binding Height}"/>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </DataTrigger>
        <!-- 保留Shelf的DataTrigger也可以，或者因为默认已经是UCShelf，可省略 -->
    </Style.Triggers>
</Style>

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