WPF Group Container Styles

imageI’ve been trying to work out for a while now how to present data in the Group header of a CollectionViewSource.

All of the samples I’ve seen out on the web simply bind to the Name property and the ItemCount. After a bit of digging today I worked out how to Group on a common object property within a collection of objects, then borrow down into that object and bind to it’s properties from the group header.

Demonstrated in the picture above where I’m displaying a list of OrderItems (containing a product and amount) grouped by the Order (with the customer detail, delivery address etc) property they contain, then showing the order number and customer name in the group header.

I wasn’t very hard in the end so here we go, first up setup your CollectionViewSource to point to your ObjectDataProvider with some grouping etc etc as shown in this article.

Now assuming your PropertyGroupDescription is pointing to your object that is common across all the elements in the group (OrderItem.Order in my case).

<CollectionViewSource.GroupDescriptions>
    <PropertyGroupDescription PropertyName="Order"/>
</CollectionViewSource.GroupDescriptions>

You should be about to bind to the Objects properties like so.

<StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
   <TextBlock Text="{Binding Path=Items[0].Order.Customer.Code, Mode=Default}"/>
   <TextBlock Text="{Binding Path=Items[0].Order.Customer.Name, Mode=Default}"/>
</StackPanel>

This is looking particularly handy for me as I can simply maintain a big list of OrderItem objects yet still render them as one Order.

Leave a Reply

Your email address will not be published.