【C# WPF】コレクションに格納したデータがViewに表示されない

Question

前提・実現したいこと

ViewModelで格納したデータをViewで表示したい

お世話になっております。
stringで宣言したNameメンバとintで宣言したAgeメンバを持つPersonクラスを
データとしてViewModelに持たせて、ListBoxにバインドさせているのですが、バインドさせたデータがViewに表示されません。
どうしたらViewに表示されるかご教授をお願い致します。

該当のソースコード

【ViewModel.cs】

namespace ViewModel
{
    public class ViewModel
    {
        public ObservableCollection<Person> people { get; private set; }

        public ViewModel()
        {
                people = new ObservableCollection<Person>(Enumerable.Range(1, 100)
                 .Select(x => new Person
                 {
                    Name = "aaa" + x,
                    Age = (30 + x) % 50
                 }));
        }
    }
    public class Person
    {
        public string Name
        {
            get;
            set;
        }
        public int Age
        {
            get;
            set;
        }
    }
}

<Window x:Class="Test.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:ViewModel"
        xmlns:vm="clr-namespace:ViewModel"
        mc:Ignorable="d"
        Title="Test" Height="720" Width="960">

    <Window.DataContext>
        <vm:ViewModel/>
    </Window.DataContext>

<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="6*"/>
        </Grid.ColumnDefinitions>

        <ScrollViewer Grid.Row="2" Grid.RowSpan="8" Grid.Column="1" HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Hidden">
            <ListBox
            ItemsSource="{Binding people}">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding people.Age}" />
                            <TextBlock Text="{Binding people.Name}" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </ScrollViewer>
</Grid>

###問題点

画像のようにスクロールバーとListBoxは生成されるがTextが表示されない

試したこと

DataGridにデータをバインド→表示された

・変更点のみ記載
<DataGrid ItemsSource="{Binding people}" Grid.Row="2" Grid.RowSpan="8" Grid.Column="1"/>
(ScrollViewerはコメントアウトされています)

ViewModelを解せず直接XAML.csにデータを持たせた→表示された

【MainWindow.xaml.cs】
namespace Main
{
    public partial class MainWindow : Window
    {
        public ObservableCollection<Person> people { get; private set; }
        public MainWindow()
        {
            InitializeComponent();
            people = new ObservableCollection<Person>(Enumerable.Range(1, 100)
            .Select(x => new Person
                {
                   Name = "aaa" + x,
                   Age = (30 + x) % 50
                }));
            this.DataContext = people;
        }
    }
}

・前述のコードからの変更点のみ記載

・ViewModelとの紐付けをコメントアウト
    <!--<Window.DataContext>
        <vm:ViewModel/>
    </Window.DataContext>-->

・Bindingの名前を変更
          <ListBox
            ItemsSource="{Binding }">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel>
                            <TextBlock Text="{Binding Age}" />
                            <TextBlock Text="{Binding Name}" />
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>

これをViewModelにデータを持たせた状態で実現させたいです
おそらくバインドのやり方が間違っている？と思うのですが正しいやり方が分かりません
どうが教えていただきますと幸いです。よろしくお願いいたします。

Answer 1

DataContextは基本的に親（上位のコントロール）の値を引き継ぎますが、ListBoxのようにコレクションをソースにとるものの場合、下位のListBoxItemにはコレクション中の１個がDataContextにセットされます。

ItemTemplateではすでに個々のPersonになっているため、↓こういうことになります。

<ListBox ItemsSource="{Binding people}">
  <ListBox.ItemTemplate>
    <DataTemplate>
      <StackPanel>
        <TextBlock Text="{Binding Age}" />
        <TextBlock Text="{Binding Name}" />
      </StackPanel>
    </DataTemplate>
  </ListBox.ItemTemplate>
</ListBox>

変更後のコードもthis.DataContext = this;としたとすると同じになります。

---

元コードを実行したときに、↓のようなエラーが出力ウィンドウに大量に出ていたと思います。

System.Windows.Data Error: 40 : BindingExpression path error: 'people' property not found on 'object' ''Person' (HashCode=35943562)'. BindingExpression:Path=people.Age; DataItem='Person' (HashCode=35943562); target element is 'TextBlock' (Name=''); target property is 'Text' (type 'String')

「Personにはpeopleプロパティがないので、TextBlockのTextに値をセットできません。」のような意味なので、「あれ？ここにはPersonが入ってきているのか！」と気付くことができます。

Comments

[Riz.]

出力ウィンドウを見るのを失念しておりました・・・
迅速で分かりやすい回答ありがとうございました。とても助かりました。