All docs
V20.2
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
1.1
The page you are viewing does not exist in version 1.1. This link will take you to the root page.

Lesson 4: Group Data

  • 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.

<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

Collection View - Item Template

Collection View - Group Data

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.