如何将ObservableCollection<string>作为自定义依赖属性？后台添加项不更新

问题描述 #

尝试创建ObservableCollection<string>类型的自定义依赖属性，希望从XAML代码后台向其中添加项。发现从ViewModel添加项时绑定会更新UI，但从代码后台添加时却不会，询问是否可实现或遗漏关键步骤。

现有代码 #

XAML代码 #

<Window x:Class="NodeEditor.Views.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:views="clr-namespace:NodeEditor.Views"
        xmlns:viewModels="clr-namespace:NodeEditor.ViewModel"
        mc:Ignorable="d"
        d:DataContext="{d:DesignInstance viewModels:ItemsList}"
        MouseDown="AddItems"
        ItemsList="{Binding ItemsList}"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
            <ItemsControl ItemsSource="{Binding Items}">
                <ItemsControl.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Vertical">
                            <TextBlock Text="{Binding Name}"></TextBlock>
                            <Rectangle Fill="Red" Width="100" Height="100"></Rectangle>
                        </StackPanel>
                    </DataTemplate>
                </ItemsControl.ItemTemplate>
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Canvas Height="500" Width="500"/>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
        </ItemsControl>

    </Grid>
</Window>

代码后台（MainWindow.xaml.cs） #

public partial class MainWindow : Window
{
    public static readonly DependencyProperty ItemListProperty =  DependencyProperty.Register(
                                                                      name: "ItemList",
                                                                      propertyType: typeof(ObservableCollection<string>),
                                                                      ownerType: typeof(MainWindow));

    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += MainWindow_OnLoaded;
        this.SetValue(ItemListProperty, new ObservableCollection<string>());
    }

    private void AddItems(object sender, MouseButtonEventArgs args)
    {
        this.ItemList.Add("newItem");
    }

    private void MainWindow_OnLoaded(object sender, RoutedEventArgs e)
    {
        this.DataContext = new ItemsList();
        this.SetValue(ItemListProperty, new ObservableCollection<NodeClass>());
    }

    public ObservableCollection<string> ItemList
    {
        get => (ObservableCollection<string>)this.GetValue(ItemListProperty);
        set
        {
            this.SetValue(ItemListProperty, value);
        }
    }
}

ViewModel代码（ItemsList.cs） #

public class ItemsList : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler? PropertyChanged;
    private ObservableCollection<string> _itemList;

    public ItemsList()
    {
        this._itemList = new ObservableCollection<string>();
        this.ItemList = new ObservableCollection<string> { 
            "Item1","Item2"
        };
    }

    public ObservableCollection<string> ItemList
    {
        get => this._itemList;
        set
        {
            this._itemList = value;
            this.RaisePropertyChanged(nameof(ItemList));
        }
    }

    private void RaisePropertyChanged(string propertyName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

问题根源 #

1. XAML属性名不匹配：自定义依赖属性的CLR属性名为ItemList，但XAML中绑定写的是ItemsList="{Binding ItemsList}"（多了一个s），导致绑定未正确关联到依赖属性。
2. ItemsControl绑定目标错误：ItemsControl的ItemsSource绑定的是{Binding Items}，但ViewModel中对应的集合属性是ItemList，UI无法获取正确的数据源。
3. 依赖属性被错误覆盖：在MainWindow_OnLoaded事件中，直接调用SetValue给依赖属性赋值new ObservableCollection<NodeClass>()，不仅类型与依赖属性定义的ObservableCollection<string>不匹配，还会打破之前的绑定关系（直接赋值会覆盖绑定的源）。
4. 集合类型不一致：代码后台中混用了ObservableCollection<string>和ObservableCollection<NodeClass>，类型不匹配会导致运行时异常或绑定失效。

修复步骤 #

1. 修正XAML中的属性绑定

   • 将窗口的自定义属性绑定从ItemsList="{Binding ItemsList}"改为ItemList="{Binding ItemList, Mode=TwoWay}"，确保属性名一致，同时开启双向绑定（保障代码后台修改能同步到ViewModel）。
   • 将ItemsControl的ItemsSource从{Binding Items}改为{Binding ItemList}，匹配ViewModel的集合属性名。

2. 移除错误的依赖属性赋值

   • 删除MainWindow_OnLoaded中的this.SetValue(ItemListProperty, new ObservableCollection<NodeClass>());这行代码，避免破坏绑定关系和类型不匹配问题。

3. 确保集合类型一致

   • 统一使用ObservableCollection<string>，避免混用其他类型的集合。

4. 优化依赖属性初始化

   • 可以在依赖属性注册时设置默认值，无需在构造函数中手动赋值：

     public static readonly DependencyProperty ItemListProperty = DependencyProperty.Register(
         name: "ItemList",
         propertyType: typeof(ObservableCollection<string>),
         ownerType: typeof(MainWindow),
         new PropertyMetadata(new ObservableCollection<string>()));
     

   • 然后删除构造函数中的this.SetValue(ItemListProperty, new ObservableCollection<string>());。

修复后的关键代码示例 #

修正后的XAML片段 #

<Window x:Class="NodeEditor.Views.MainWindow"
        ...
        MouseDown="AddItems"
        ItemList="{Binding ItemList, Mode=TwoWay}"
        ...>
    <Grid>
            <ItemsControl ItemsSource="{Binding ItemList}">
                ...
            </ItemsControl>
    </Grid>
</Window>

修正后的代码后台片段 #

public partial class MainWindow : Window
{
    public static readonly DependencyProperty ItemListProperty = DependencyProperty.Register(
        name: "ItemList",
        propertyType: typeof(ObservableCollection<string>),
        ownerType: typeof(MainWindow),
        new PropertyMetadata(new ObservableCollection<string>()));

    public MainWindow()
    {
        InitializeComponent();
        this.Loaded += MainWindow_OnLoaded;
    }

    private void AddItems(object sender, MouseButtonEventArgs args)
    {
        this.ItemList.Add("newItem");
    }

    private void MainWindow_OnLoaded(object sender, RoutedEventArgs e)
    {
        this.DataContext = new ItemsList();
    }

    public ObservableCollection<string> ItemList
    {
        get => (ObservableCollection<string>)this.GetValue(ItemListProperty);
        set => this.SetValue(ItemListProperty, value);
    }
}

说明 #

修复后，从代码后台调用this.ItemList.Add("newItem")时，因为依赖属性已正确绑定到ViewModel的ItemList集合（双向绑定），而ObservableCollection本身会在集合项变化时通知UI更新，所以UI会同步显示新增的项。

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