How do I Create Multiple Headers with ColumnSpans in a WPF GridView?

Question

I want to "group" some columns in a WPF GridView by having an additional header row that spans a couple of the columns in the GridView.

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

<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>

So the "Value 1" would just have the one header, while "Value 2" and "Value 3" would have a header and a grouping header above that.

Any thoughts on how to do this type of thing in WPF? Thanks.

Answer 1

I have done this using DataGrid in Wpf, Here is the sample:

    <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>