Search code examples
silverlightlistboxgroupingitemscontrol

Silverlight: Datagrid like grouping in ItemsControl


Is it possible to group items in a ItemsControl or Listbox in Silverlight? These controls are bound to a DomainDataSource.

Or are there any 3rd party controls that do this?

UPDATE:

This is the sort of UI I am trying to create.

alt text


Solution

  • You can do this by using nested ItemsControls bound to a PagedCollectionView.

    Say I have a datasource - MyItems - with fields: Category, Section and Option. I can create a PagedCollectionView from an IEnumerable(of MyItems) and tell it which fields to group by.

    Dim original As IEnumerable(Of MyItems) = GetMyItems()
    
    Dim pcv = New PagedCollectionView(original)
    
    pcv.GroupDescriptions.Add(New PropertyGroupDescription("Category"))
    pcv.GroupDescriptions.Add(New PropertyGroupDescription("Section"))
    

    Then I bind my first ItemsControl to the PagedCollectionView

    hisMyItems.ItemsSource = pcv.Groups
    

    The PCV creates a nested hierachy like:

    -Name
        -Items
    

    where Name is the value in the grouped field and Items contains the rows/objects in that grouping. I guess you could also create the PCV in xaml if you prefer.

    The xaml would look something like:

    <controls:HeaderedItemsControl x:Name="hisMyItems" Header="{Binding Name}" ItemsSource="{Binding Items}" >
        <controls:HeaderedItemsControl.ItemTemplate>
            <DataTemplate>
    
                <controls:HeaderedItemsControl Header="{Binding Name}" ItemsSource="{Binding Items}" ItemsPanel="{StaticResource ItemsPanelTemplate1}" >
                    <controls:HeaderedItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Button Content="{Binding Option}" />
                        </DataTemplate>
                    </controls:HeaderedItemsControl.ItemTemplate>
                </controls:HeaderedItemsControl>
    
            </DataTemplate>
        </controls:HeaderedItemsControl.ItemTemplate>
    </controls:HeaderedItemsControl>
    

    I hope that makes sense. I have tried to simplify things from my actual app but I could have made some mistakes in copying it over. Obviously you could use normal ItemsControls or other controls too and customize with templates etc.