Skip to end of metadata
Go to start of metadata

This topic discusses the grouping capability in ItemsControl model available in all ClientUI controls lineup.

Items Control Grouping is a common feature in WPF platform, but unavailable in Silverlight. Intersoft ClientUI controls provide a framework for ItemsControl model so that similar grouping capability can be achieved for the following controls:

On this page:

Enable Data Grouping

To enable grouping in ItemsControl, you need to use CollectionView with grouping capability and then we supply the collection of CollectionViewGroup to the ItemsControl.

The following code shows how to provide ItemsControl with a collection of CollectionViewGroup.


Notice that you need to encapsulate your source collection to a CollectionView object (in this case its PagedCollectionView) and then set the initial GroupDescriptions. By doing this you can get the collection of CollectionViewGroup from collectionView.Groups property.



Styling and Templating

When grouped, the ItemContainerStyle, ItemContainerStyleSelector, ItemTemplate and ItemTemplateSelector of ItemsControl are still working as if the items have never been grouped. You can still use these properties to control the look and feel of your items.

If you want to style the group item, you can use the GroupStyle property. This property contains a collection of GroupStyle object that determines the group style for each level. If the collection contains less item than the actual group level, it will use the last item in the collection for the rest of group level.

Customizing GroupStyle.ContainerStyle

Similar to any ItemsControl, GroupStyle also has ContainerStyle. This property is used to determine the style for each group item in the same level.


When customizing the ContainerStyle, you can also change the Template property as shown in the above code, and completely redefine the look and feel of the group items.

In the following sample, the look and feel is changed to an ExpandableGroupBox control.

Customizing GroupStyle.ContainerStyleSelector

If you need to perform additional checking to determine which style should be applied, you can use the ContainerStyleSelector similar to the one available in ItemsControl.

To use this approach, you need to create a class that inherits from StyleSelector class.

The following example shows how to use ContainerStyleSelector to distinguish male group and female group.


Customizing GroupStyle.HeaderStringFormat

When the ItemsControl is bound to a collection of object, you can use HeaderStringFormat to format the string representation displayed in group item.

The following example shows how to use HeaderStringFormat.


Customizing GroupStyle.HeaderTemplate

Alternatively, you can use HeaderTemplate to control the look and feel of the group item. The following example shows how to perform templating using HeaderTemplate property.


Customizing GroupStyle.HeaderTemplateSelector

Similar to ContainerStyleSelector, you can also create an HeaderTemplateSelector by creating a class that inherits from DataTemplateSelector. This template selector allows you to apply different template on different group item based on the logic describes in the template selector.

The following example shows how to use DataTemplateSelector to distinguish male group and female group.

Data Template Selector