Spanning a Record Over Multiple Rows in WPF Toolkit's DataGrid

Question

Hello,

Is it possible to style WPF Toolkit's DataGrid so a data record can span multiple rows. Example screen shot from a commercial control.

Thanks,
Ben

Answer 1

It is not possible with the toolkit DataGrid or GridView for a ListView, no.

However you may have luck with your own implementation, as I recently discovered you can use GridViewHeaderRowPresenter (MSDN reference), set the Columns property to the columns you want: that will give you a header row.

Then you can use GridViewRowPresenter (MSDN reference), attach it to the same Columns collection and voila, your columns in the rows and header will be linked (resize the header, the columns change).

See here for a good example:

http://msdn.microsoft.com/en-us/library/ms752313.aspx

In order to get the stacked effect, you could create a ListView or ListBox, and for each item you'd output a vertically-stacked pair of GridViewRowPresenter controls, each bound to a separate columns collection. Then in your own custom header (just above the control) you'd do the same thing with a pair of GridViewHeaderRowPresenter controls.

You could then add any other bits you'd like as well, for example the text/label that they have in your example screenshot.

No reason why this shouldn't work. It's not a pre-built solution but is possible with clean coding, it's not a hack, and you have complete control over how it looks and works! Adding sorting and so on is fairly easy too, MSDN has an example for that too.

Hope that helps - any more questions on the details of this please add a comment here!

Answer 2

It looks as though the control in that screenshot is creating the illusion of row-span by dividing the cells in every column to the right of the picture into multiple rows. Perhaps you could achieve the row-span effect you are looking for in the same way.

<tk:DataGrid AutoGenerateColumns="False">
    <tk:DataGrid.Columns>
        <tk:DataGridTextColumn Header="ID" Binding="{Binding ID}" />
        <tk:DataGridTemplateColumn Header="Photo">
            <tk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Image Source="{Binding Photo}" />
                </DataTemplate>
            </tk:DataGridTemplateColumn.CellTemplate>
        </tk:DataGridTemplateColumn>
        <tk:DataGridTemplateColumn>
            <tk:DataGridTemplateColumn.Header>
                <Grid>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                    <TextBlock Grid.Row="0">FirstName</TextBlock>
                    <TextBlock Grid.Row="1">LastName</TextBlock>
                </Grid>
            </tk:DataGridTemplateColumn.Header>
            <tk:DataGridTemplateColumn.CellTemplate>
                <DataTemplate>
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition />
                            <RowDefinition />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="{Binding FirstName}" />
                        <TextBlock Grid.Row="1" Text="{Binding LastName}" />
                    </Grid>
                </DataTemplate>
            </tk:DataGridTemplateColumn.CellTemplate>
        </tk:DataGridTemplateColumn>
    </tk:DataGrid.Columns>
</tk:DataGrid>