How to create multiple headers using ColumnSpans in WPF GridView?

Question

I want to “group” some columns in a WPF GridView, having an extra header row that spans a couple of columns in a GridView.

In ASP.Net with a repeater, this would look like this:

<asp:Repeater ID="myRepeater">
    <HeaderTemplate>
       <table>
       <tr>
          <td></td>
          <td colspan="2">Group 1</td>
          <td colspan="2">Group 2</td>
          <td></td>
       </tr>
       <tr>
          <td>Value 1 Header</td>
          <td>Value 2 Header</td>
          <td>Value 3 Header</td>
          <td>Value 4 Header</td>
          <td>Value 5 Header</td>
          <td>Value 6 Header</td>
       </tr>
    </HeaderTemplate>
    <ItemTemplate>
       <tr>
          <td>Value 1</td>
          <td>Value 2</td>
          <td>Value 3</td>
          <td>Value 4</td>
          <td>Value 5</td>
          <td>Value 6</td>
       </tr>
    </ItemTemplate>
    <FooterTemplate>
       </table>
    </FooterTemplate>
 </asp:Repeater>

Thus, the value “1” will have only one heading, while the “Value 2” and “Value 3” will have the heading and the heading of the group above.

Any thoughts on how to do this in WPF? Thank.

Answer 1

I did this using a DataGrid in Wpf. Here is an example:

    <toolkit:DataGrid x:Name="dgValue" AutoGenerateColumns="False">
        <toolkit:DataGrid.Columns>
            <toolkit:DataGridTemplateColumn>
                <toolkit:DataGridTemplateColumn.Header>
                    <Grid Width="150">
                        <Grid.RowDefinitions>
                            <RowDefinition/>
                            <RowDefinition/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition/>
                            <ColumnDefinition/>
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.ColumnSpan="2" HorizontalAlignment="Center" Text="Item"/>
                        <TextBlock Grid.Row="1" Text="SubItem1"/>
                        <TextBlock Grid.Row="1" Grid.Column="1" Text="SubItem2"/>
                    </Grid>
                </toolkit:DataGridTemplateColumn.Header>
                <toolkit:DataGridTemplateColumn.CellTemplate>
                    <DataTemplate>
                        <Grid Width="150">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition/>
                                <ColumnDefinition/>
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding SubItem1}" />
                            <TextBlock Grid.Column="1" Text="{Binding SubItem2}" />
                        </Grid>
                    </DataTemplate>
                </toolkit:DataGridTemplateColumn.CellTemplate>
            </toolkit:DataGridTemplateColumn>
        </toolkit:DataGrid.Columns>
    </toolkit:DataGrid>