Mr. Gengo（英単語勉強用アプリ）作成シリーズ ～ ListBoxにネストしたListをBindする方法

下記の画像のようなネストしたListのBindをXAML上で行う方法を解説する。

Mr. Gengoのデータ構造は下記のようになる。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 以下、このブログポストのコードは必要な箇所以外をすべて省略している public class Entry {    public ObservableCollection<entrysense> Senses { get; set; } }   public class EntrySense {    public ObservableCollection<gloss> Glosses { get; set; } }   public class Gloss {    public string Text{ get; set; } }

では実際のXAMLとDataContextに渡すクラスであるJMDictModifierPresenterを見てみよう。

?

1 2 3 4

public class JMDictModifierPresenter {    public ObservableCollection<Entry> CurrentEntries { get; set; } }

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<ListBox     ItemsSource="{Binding CurrentEntries}"     IsSynchronizedWithCurrentItem="True" > 　  <!--省略--> </ListBox>   <ListBox     ItemsSource="{Binding CurrentEntries.CurrentItem.Senses}"     IsSynchronizedWithCurrentItem="True" > 　  <!--省略--> </ListBox>   <ListView ItemsSource="{Binding Path=CurrentEntries.CurrentItem.Senses.CurrentItem.Glosses}" >  <ListView.View>   <!--省略ここから-->   <TextBox Text="{Binding Text}" />   <!--省略ここまで-->  </ListView.View> </ListView>

ポイントはItemsSourceにBindしているCurrentItemだ。一つ目のListBoxのItemsSourceにBindしているのはDataContext（JMDictModifierPresenter）のCurrentEntries、二つ目のListBoxのItemsSourceではCurrentEntriesで現在選択されているアイテムのSensesが取得したいのでCurrentEntries.CurrentItem.Sensesとしている。ListViewのItemsSourceも同様なので説明は不要だろう。

また、それぞれのListBoxでIsSynchronizedWithCurrentItem=Trueを設定しておかないと予期した動作にならないので忘れずに設定しておこう。