Lesson 4: Group Data

• Oct 19, 2020
• 2 minutes to read

The DXCollectionView allows you to group items according to values of the specified data field.

Open the solution created in Lesson 2 and group contacts by the first character of the contact name.

1. Set the DXCollectionView.GroupDescription property to a GroupDescription object with the FieldName property set to Name and GroupInterval set to Alphabetical.

2. Use the DXCollectionView.GroupHeaderTemplate property to specify the appearance of group headers.

XAML

<dxcv:DXCollectionView ItemsSource="{Binding Data}">
    <!-- Define ItemTemplate here.-->

    <!--Group items.-->
    <dxcv:DXCollectionView.GroupDescription>
        <dxcv:GroupDescription FieldName="Name" GroupInterval="Alphabetical"/>
    </dxcv:DXCollectionView.GroupDescription>

    <!--Define the group header template.-->
    <dxcv:DXCollectionView.GroupHeaderTemplate>
        <DataTemplate>
            <StackLayout Margin="2, 0, 18, 10">
                <Label FontFamily="Roboto-Medium"
                       Margin="0,20,0,1"
                       TextColor="#55575c"
                       Text="{Binding Value}"/>
                <BoxView BackgroundColor="#ebebeb" 
                         HeightRequest="1"/>
            </StackLayout>
        </DataTemplate>
    </dxcv:DXCollectionView.GroupHeaderTemplate>
</dxcv:DXCollectionView>

Contacts that start with the same letter are now arranged into groups. Each group is identified by a header. Users can tap group headers to expand or collapse groups.

Before	After

You can also use the following properties, methods, and events of the DXCollectionView object to manage groups of items.

Member	Description
GroupCount	Gets the number of data item groups in a CollectionView.
GroupHeaderSize MinGroupHeaderSize	Allow you to manage the height (or width if the Orientation property is set to Horizontal) of group headers.
GetGroupValue	Returns the data value for which the group is created.
GetChildItemCount	Returns the number of data items in the group.
GetChildItemHandle	Returns the handle of the item at the specified position within the specified group.
IsGroupHeader	Checks whether the specified item is a group header.
AllowGroupCollapse	Specifies whether users can collapse and expand groups of items.
IsGroupCollapsed	Indicates whether the specified group of items is collapsed.
CollapseGroup	Collapses the specified group of items.
CollapseAllGroups	Collapses all groups of items.
ExpandGroup	Expands the specified group of items.
ExpandAllGroups	Expands all groups of items.
GroupCollapsing	Occurs before a group of items is collapsed.
GroupCollapsed	Occurs after a group of items has been collapsed.
GroupExpanding	Occurs before a group of items is expanded.
GroupExpanded	Occurs after a group of items has been expanded.