国を表す ItemsControl を使用します。国ごとに、都市を表示するために ListView を使用します。
<ItemsControl ItemsSource="{Binding Countries}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListView Margin="10"
ItemsSource="{Binding Cities}">
<ListView.View>
<GridView>
<GridViewColumn Width="140"
Header="City"
DisplayMemberBinding="{Binding Name}" />
<GridViewColumn Width="90"
Header="Population"
DisplayMemberBinding="{Binding Population}" />
</GridView>
</ListView.View>
</ListView>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
結果:
ユーザーが最初のリストビューで列幅を変更するたびに、2番目のリストビューがそれに応じて幅を調整する必要があります(グリッドのSharedGroupSizeのようなもの)。
どうすればこれを達成できますか?