WPFで入れ子になっている要素の変更を反映させたいです

Question

解決したいこと

WPFにおいて，入れ子になっているListBoxにViewModel側で要素を追加しても，画面に反映されません．
どうしたらよいか，解決方法を教えてください．よろしくお願いします．

発生している問題の詳細

図にすると下記のような感じです．

デバッグでWPFビジュアライザーから確認したところ，
WrapperControl内のElementControlsのItemsSourceにObservableCollenction<ElementViewModel>が入っていることは確認できたのですが，
画面には反映されていませんでした．

ソースコード

<Window x:Class="ListBoxExperiment.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:local="clr-namespace:ListBoxExperiment"
				mc:Ignorable="d"
				Title="MainWindow" Height="450" Width="800">
	<Window.DataContext>
		<local:MainViewModel/>
	</Window.DataContext>
	<Grid>
		<Grid.RowDefinitions>
			<RowDefinition/>
			<RowDefinition Height="Auto"/>
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>

		<ListBox
			Grid.Row="0"
			x:Name="WrapperControls"
			ItemsSource="{Binding Wrappers, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">
			<ListBox.ItemTemplate>
				<DataTemplate>
					<local:WrapperControl/>
				</DataTemplate>
			</ListBox.ItemTemplate>
			<ListBox.ItemContainerStyle>
				<Style TargetType="{x:Type ListBoxItem}">
					<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
					<Setter Property="VerticalContentAlignment" Value="Stretch"/>
				</Style>
			</ListBox.ItemContainerStyle>
		</ListBox>

		<Grid Grid.Row="1">
			<Grid.ColumnDefinitions>
				<ColumnDefinition/>
				<ColumnDefinition/>
			</Grid.ColumnDefinitions>

			<Button
				Content="Wrapperを追加"
				Grid.Column="0"
				Command="{Binding AddWrapper}"/>

			<Button
				Content="先頭のWrapperにElementを追加"
				Grid.Column="1"
				Command="{Binding AddElement}"/>
		</Grid>

		<!-- デバッグ時の一時停止用のボタンです．
			ブレークポイントを設定しているだけの関数をコードビハインドに書いています． -->
		<Button Content="ブレイク" Grid.Row="2" Click="Break"/>
	</Grid>
</Window>

<UserControl x:Class="ListBoxExperiment.WrapperControl"
						 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
						 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
						 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
						 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
						 xmlns:local="clr-namespace:ListBoxExperiment"
						 mc:Ignorable="d" 
						 d:DesignHeight="450" d:DesignWidth="800">
	<UserControl.DataContext>
		<local:WrapperViewModel/>
	</UserControl.DataContext>
	<Grid>
		<ListBox
			x:Name="ElementControls"
			ItemsSource="{Binding Elements, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}">
			<ListBox.ItemTemplate>
				<DataTemplate>
					<local:ElementControl/>
				</DataTemplate>
			</ListBox.ItemTemplate>
		</ListBox>
	</Grid>
</UserControl>

<UserControl x:Class="ListBoxExperiment.ElementControl"
						 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
						 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
						 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
						 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
						 xmlns:local="clr-namespace:ListBoxExperiment"
						 mc:Ignorable="d" 
						 d:DesignHeight="450" d:DesignWidth="800">
	<UserControl.DataContext>
		<local:ElementViewModel/>
	</UserControl.DataContext>
	<Grid>
		<TextBlock Text="{Binding AddedAt, StringFormat=Created at {0:yyyy/MM/dd-HH:mm:ss}}"/>
	</Grid>
</UserControl>

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Ink;
using System.Windows.Input;

namespace ListBoxExperiment
{
	public class MainViewModel : INotifyPropertyChanged
	{
		public event PropertyChangedEventHandler? PropertyChanged;

		public ObservableCollection<WrapperViewModel> Wrappers { get; private set; }

		public DelegateCommand AddElement { get; private set; }

		public DelegateCommand AddWrapper { get; private set; }

		public MainViewModel()
		{
			this.Wrappers = new ObservableCollection<WrapperViewModel>();
			this.Wrappers.Add(new WrapperViewModel());
			this.Wrappers[0].PropertyChanged += (s, e) => this.PropertyChanged?.Invoke(s, new PropertyChangedEventArgs(nameof(Wrappers)));
			this.AddElement = new DelegateCommand(() => this.Wrappers[0].Elements.Add(new ElementViewModel()), () => true);
			this.AddWrapper = new DelegateCommand(() => this.Wrappers.Add(new WrapperViewModel()), () => true);
		}
	}

	public class DelegateCommand : ICommand
	{
		public event EventHandler? CanExecuteChanged;

		public bool CanExecute(object? parameter) => this._canExecute();

		public void Execute(object? parameter) => this._execute();

		private Action _execute;
		private Func<bool> _canExecute;

		public DelegateCommand(Action execute, Func<bool> canExecute)
		{
			_execute = execute;
			_canExecute = canExecute;
		}
	}
}

using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using System.ComponentModel;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ListBoxExperiment
{
	public class WrapperViewModel : INotifyPropertyChanged
	{
		public event PropertyChangedEventHandler? PropertyChanged;

		public ObservableCollection<ElementViewModel> Elements { get; private set; }

		public WrapperViewModel()
		{
			this.Elements = new ObservableCollection<ElementViewModel>();
			this.Elements.Add(new ElementViewModel());
			this.Elements.CollectionChanged += (s, e) => this.PropertyChanged?.Invoke(s, new PropertyChangedEventArgs(nameof(Elements)));
		}
	}
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace ListBoxExperiment
{
	public class ElementViewModel
	{
		public DateTime AddedAt { get; private set; }

		public ElementViewModel()
		{
			this.AddedAt = DateTime.Now;
		}
	}
}

試したこと

上記のコードのように，CollectionChangedにPropertyChangedを登録したり，
WrapperViewModelのPropertyChangedにMainViewModelのPropertyChangedを登録したりしてみたのですが，
うまくいきませんでした．

Answer 1

表題は解決されたようですが、INotifyPropertyChangedとINotifyCollectionChangedを混同しているようなので回答します。
INotifyPropertyChanged インターフェイス (System.ComponentModel) | Microsoft Docs
INotifyCollectionChanged インターフェイス (System.Collections.Specialized) | Microsoft Docs

ObservableCollectionはコレクションの増減を（Viewに）通知しますので、PropertyChangedを伝搬させるような？訳のわからないことをする必要はありません。

もちろん中の要素内の（プロパティ）変更は（ObservableCollectionは）関知しませんが、中の要素がINotifyPropertyChangedを実装していれば（Viewに）反映されます。
ObservableCollection<T> クラス (System.Collections.ObjectModel) | Microsoft Docs

中の要素のイベント購読は、できるだけ避けたほうがいいでしょう（削除時に購読解除しないとリークします）
どうしても必要な場合は、ObserveElementProperty・ObserveElementObservablePropertyの利用を検討してください。
MVVM をリアクティブプログラミングで快適に ReactiveProperty オーバービュー 2020 年版 後編 - Qiita

---

.NET6です^^
NuGet Gallery | CommunityToolkit.Mvvm 8.0.0

<Window
  x:Class="Q6osq4khrbfz2od.MainWindow"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:local="clr-namespace:Q6osq4khrbfz2od"
  Width="800"
  Height="450">
  <Window.DataContext>
    <local:MainViewModel />
  </Window.DataContext>
  <Window.Resources>
    <DataTemplate DataType="{x:Type local:ElementViewModel}">
      <TextBlock Text="{Binding AddedAt, StringFormat=Created at {0:yyyy/MM/dd-HH:mm:ss}}" />
    </DataTemplate>

    <DataTemplate DataType="{x:Type local:WrapperViewModel}">
      <Grid>
        <!--  多少意味は違いますが原因を確認する分には十分でしょう。  -->
        <!--  ↓をコメント化した場合と、コメント解除した場合でBreakを確認してください。  -->
        <!--<Grid.DataContext>
          <local:WrapperViewModel />
        </Grid.DataContext>-->
        <ListBox ItemsSource="{Binding Elements}" />
      </Grid>
    </DataTemplate>
  </Window.Resources>
  <DockPanel>
    <Button
      Click="Break"
      Content="ブレイク"
      DockPanel.Dock="Bottom" />

    <UniformGrid DockPanel.Dock="Bottom" Rows="1">
      <Button Command="{Binding AddWrapper}" Content="Wrapperを追加" />
      <Button
        Command="{Binding AddElement}"
        CommandParameter="{Binding Wrappers[0]}"
        Content="先頭のWrapperにElementを追加" />
      <Button
        Command="{Binding AddElement}"
        CommandParameter="{Binding SelectedItem, ElementName=WrapperControls}"
        Content="選択中のWrapperにElementを追加" />
    </UniformGrid>

    <ListBox x:Name="WrapperControls" ItemsSource="{Binding Wrappers}">
      <ListBox.ItemContainerStyle>
        <Style TargetType="{x:Type ListBoxItem}">
          <Setter Property="Padding" Value="30,0,0,0" />
          <Setter Property="HorizontalContentAlignment" Value="Stretch" />
        </Style>
      </ListBox.ItemContainerStyle>
    </ListBox>
  </DockPanel>
</Window>

using System;
using System.Collections.ObjectModel;
using System.Diagnostics;
using System.Windows;
using System.Windows.Media;
using CommunityToolkit.Mvvm.Input;

namespace Q6osq4khrbfz2od;


public class MainViewModel
{
    public ObservableCollection<WrapperViewModel> Wrappers { get; } = new() { new(), };
    public RelayCommand AddWrapper { get; }
    public RelayCommand<WrapperViewModel> AddElement { get; }

    public MainViewModel()
    {
        AddWrapper = new(() => Wrappers.Add(new()));
        AddElement = new(x => x?.Elements.Add(new()));
    }
}

public class WrapperViewModel
{
    public ObservableCollection<ElementViewModel> Elements { get; } = new() { new(), };

    public override string ToString() => $"WrapperViewModel:{GetHashCode()}";
}

public class ElementViewModel
{
    public DateTime AddedAt { get; } = DateTime.Now;
}

public partial class MainWindow : Window
{
    public MainWindow() => InitializeComponent();

    private void Break(object sender, RoutedEventArgs e)
    {
        var w0 = (DataContext as MainViewModel)?.Wrappers[0];

        var listBoxItem = WrapperControls.ItemContainerGenerator.ContainerFromItem(w0) as FrameworkElement;
        var border = VisualTreeHelper.GetChild(listBoxItem, 0) as FrameworkElement;
        var contentPresenter = VisualTreeHelper.GetChild(border, 0) as FrameworkElement;
        var grid = VisualTreeHelper.GetChild(contentPresenter, 0) as FrameworkElement;

        var w0_a = listBoxItem?.DataContext;
        var w0_b = border?.DataContext;
        var w0_c = contentPresenter?.DataContext;
        var w0_d = grid?.DataContext;

        Debug.WriteLine($"w0   {w0}");
        Debug.WriteLine($"w0_a {w0_a}");
        Debug.WriteLine($"w0_b {w0_b}");
        Debug.WriteLine($"w0_c {w0_c}");
        Debug.WriteLine($"w0_d {w0_d}"); // xamlのコメントを解除をするとこれだけ違う。
    }
}

Comments

[terullet]

ありがとうございます！
イベントの購読は，要素内のプロパティ変更を受け取るのに必要かなと思ってやっていたことだったのですが，`INotifyPropertyChanged`を実装していれば問題なかったどころか，解除しないとリークしてしまうのですね．
ためになりました！

Answer 2

WrapperControlのDataContextに設定されているVMがMainViewModelで保持しているWrapperViewModelとは別ものだからでは？

<UserControl x:Class="ListBoxExperiment.WrapperControl"
						 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
						 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
						 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
						 xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
						 xmlns:local="clr-namespace:ListBoxExperiment"
						 mc:Ignorable="d" 
						 d:DesignHeight="450" d:DesignWidth="800">
    <!--
   <UserControl.DataContext>
        <local:WrapperViewModel/>
    </UserControl.DataContext>
  -->
    <Grid>
        <ListBox

Comments

[terullet]

解決できました．ありがとうございます！