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 |
|
|
|
Engineer |
24 |
Sam |
|
|
|
Developer |
53 |
Connor |
|
|
|
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">
-->
<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" />
-->
<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>
-->
<ItemsControl ItemsSource="{Binding Persons}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="60" />
<ColumnDefinition Width="20" />
</Grid.ColumnDefinitions>
-->
<TextBlock Grid.Column="0" TextAlignment="Center"
Text="{Binding Path=Name}" FontWeight="Bold" />
-->
<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>
-->
<TextBox Grid.Column="2" TextAlignment="Right"
Text="{Binding Path=Job}" />
-->
<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.