Tricky WPF styling issue - can you do it?

Question

Hey guys

I have an observable collection of items, where each item has a name and a "group name" (both strings).

The tricky part is, in XAML, I need to style this collection such that all items with the same group name are listed next to each other, and the group name is shown at the top.

I have designed user controls for the layout of the group name, as well as the layout of each item being displayed. I have played around with ItemsControl but have no idea how to style it so that items with the same group are somehow "merged" into the same ItemsControl that uses the generic ItemControl user control as its source, with the group name displayed on top.

I did have this working by using a collection of "groups", with a collection of items inside each group, because the bindings work perfectly. However, I did not take into account that each item may be in more than one group (think of a person as being in a "work friends" as well as "colleagues" group, so it needs to be duplicated).

Any advice or solutions are much appreciated :)

Answer 1

First, use a CollectionViewSource to sort the items:

<CollectionViewSource  x:Key="SortedItems" Source="{Binding YourUnsortedItems}">
    <CollectionViewSource.SortDescriptions>
        <scm:SortDescription PropertyName="GroupName"/>
    </CollectionViewSource.SortDescriptions>
</CollectionViewSource>

Then bind to it from your ItemsControl (or whatever):

<ItemsControl Source="{Binding Source={StaticResource SortedItems}}">
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- stick your template for each item here -->
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

HTH, Kent