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.

Person	CityHeader 1	CityHeader 2	CityHeader 3	Job	Age
Jon	2355 London	9875 Roma	4000 Paris	Engineer	24
Sam	25621 Berlin	8995 Zurich	6786 Madrid	Developer	53
Connor	25621 Berlin	890767 Geneva	7882 Vienna	Chef	11

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.