Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Table with Imbricated ItemsControl in XAML

0.00/5 (No votes)
10 Oct 2013 1  
Imbricated ItemsControl (a list into another list) to make a table

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.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here