Table with Imbricated ItemsControl in XAML

Introduction

This tip allows to make a kind of table with imprecated ItemsControl.

For example, you have a list of persons which contains a list of addresses and you want to display all persons vertically and addresses horizontally.

Using the Code

So you have a class Address and a class Person who contains a property Addresses (List<Address>). Then you have a list of Person. Finally, you have a TableHeaders that matches the number of addresses.

In this example, I put data from person and addresses in the same table.

<StackPanel Orientation="Vertical">
 <!-- HEADER -->
 <Grid>
  <Grid.ColumnDefinitions>
   <ColumnDefinition Width="40" />
   <ColumnDefinition Width="Auto" />
   <ColumnDefinition Width="60" />
   <ColumnDefinition Width="20" />
  </Grid.ColumnDefinitions>
  <TextBlock Grid.Column="0" TextAlignment="Center" 
  Text="Person" FontWeight="Bold" />
  <!-- Table header -->
  <ItemsControl ItemsSource="{Binding Path=TableHeaders}" Grid.Column="1">
   <ItemsControl.ItemTemplate>
    <DataTemplate>
     <Grid>
      <Grid.ColumnDefinitions>
       <ColumnDefinition Width="100" />
       <ColumnDefinition Width="20" />
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Column="0" Grid.ColumnSpan="2" 
        TextAlignment="Center" Text="{Binding Path=CityHeader}" 
     </Grid>
    </DataTemplate>
   </ItemsControl.ItemTemplate>
   <ItemsControl.ItemsPanel>
    <ItemsPanelTemplate>
     <StackPanel  Orientation="Horizontal"/>
    </ItemsPanelTemplate>
   </ItemsControl.ItemsPanel>
  </ItemsControl>
  <TextBlock Grid.Column="2" TextAlignment="Center" 
  Text="Job" FontWeight="Bold" />
  <TextBlock Grid.Column="3" TextAlignment="Right" 
  Text="Age" FontWeight="Bold" />
 </Grid>
 
 <!-- DATA -->
 <ItemsControl ItemsSource="{Binding Persons}">
  <ItemsControl.ItemTemplate>
   <DataTemplate>
    <Grid>
     <Grid.ColumnDefinitions>
      <ColumnDefinition Width="40" />
      <ColumnDefinition Width="Auto" />
      <ColumnDefinition Width="60" />
      <ColumnDefinition Width="20" />
     </Grid.ColumnDefinitions>
     
     <!-- Person name -->
     <TextBlock Grid.Column="0" TextAlignment="Center" 
       Text="{Binding Path=Name}" FontWeight="Bold" />                                   
     <!-- Addresses (ZipCode and City name -->
     <ItemsControl Grid.Column="1" Grid.Row="1" 
          ItemsSource="{Binding Path=Addresses}">
      <ItemsControl.ItemTemplate>
       <DataTemplate>           
         <Grid>
         <Grid.ColumnDefinitions>
          <ColumnDefinition Width="100" />
          <ColumnDefinition Width="20" />
         </Grid.ColumnDefinitions>
         <TextBox Grid.Column="0"  TextAlignment="Right" 
         Text="{Binding Path=ZipCode}" />
         <TextBox Grid.Column="1" HorizontalAlignment="Center" 
         IsChecked="{Binding Path=City}" />
        </Grid> 
       </DataTemplate>                                        
      </ItemsControl.ItemTemplate>
      <ItemsControl.ItemsPanel>
       <ItemsPanelTemplate>
        <StackPanel Orientation="Horizontal"/>
       </ItemsPanelTemplate>
      </ItemsControl.ItemsPanel>
     </ItemsControl>
     <!-- Person job -->
     <TextBox Grid.Column="2"  TextAlignment="Right" 
     Text="{Binding Path=Job}" />
     <!-- Person Age -->
     <TextBox Grid.Column="3" TextAlignment="Right" 
     Text="{Binding Path=Age}" />
    </Grid>
   </DataTemplate>
  </ItemsControl.ItemTemplate>
 </ItemsControl>
</StackPanel>

This is a very simple example of what to do with ItemsControl. You can make a more complicated table with different objects and of course change style of the table.