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.
Set the DXCollectionView.GroupDescription property to a GroupDescription object with the FieldName property set to Name and GroupInterval set to Alphabetical.
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 |
---|---|
You can also use the following properties, methods, and events of the DXCollectionView object to manage groups of items.
Member | Description |
---|---|
Gets the number of data item groups in a CollectionView. | |
Allow you to manage the height (or width if the Orientation property is set to Horizontal) of group headers. | |
Returns the data value for which the group is created. | |
Returns the number of data items in the group. | |
Returns the handle of the item at the specified position within the specified group. | |
Checks whether the specified item is a group header. | |
Specifies whether users can collapse and expand groups of items. | |
Indicates whether the specified group of items is collapsed. | |
Collapses the specified group of items. | |
Collapses all groups of items. | |
Expands the specified group of items. | |
Expands all groups of items. | |
Occurs before a group of items is collapsed. | |
Occurs after a group of items has been collapsed. | |
Occurs before a group of items is expanded. | |
Occurs after a group of items has been expanded. |