Skip to main content

DXCollectionView Class

A collection view.

Namespace: DevExpress.Maui.CollectionView

Assembly: DevExpress.Maui.CollectionView.dll

NuGet Package: DevExpress.Maui.CollectionView

Declaration

public class DXCollectionView :
    View,
    IBindingContextParent,
    IDXViewController,
    IAppearanceOwner,
    IDataGrid

Remarks

The DXCollectionView component is a view that displays a list of data items in a vertical or horizontal orientation.

DXCollectionView

Bind to Data

To populate the DXCollectionView with data, assign an object that implements the IList, IList<T>, IEnumerable, or IEnumerable<T> interface to the ItemsSource property.

For example, the following XAML markup populates the DXCollectionView with strings from an array:

Collection View - Simple Data

<dxcv:DXCollectionView>
    <dxcv:DXCollectionView.ItemsSource>
        <x:Array Type="{x:Type x:String}">
            <x:String>Alabama</x:String>
            <x:String>Arizona</x:String>
            <x:String>California</x:String>
            <x:String>Florida</x:String>
            <x:String>Indiana</x:String>
            <x:String>Louisiana</x:String>
            <x:String>Massachusetts</x:String>
            <x:String>Nevada</x:String>
            <x:String>New York</x:String>
            <x:String>Texas</x:String>
            <x:String>Washington</x:String>
        </x:Array>
    </dxcv:DXCollectionView.ItemsSource>
</dxcv:DXCollectionView>

You can also bind the DXCollectionView to a collection of custom objects.

<ContentPage ...>
    <ContentPage.BindingContext>
        <local:ViewModel/>
    </ContentPage.BindingContext>
    <dxcv:DXCollectionView ItemsSource="{Binding Data}"/>
</ContentPage>

Define Item Appearance

Use properties that are listed below to define how the DXCollectionView‘s data items look.

Appearance Classes

Use the ItemAppearance property to specify the item’s colors, padding, font settings, and more. To specify appearance of the selected items, use the SelectedItemAppearance property.

Display Format

DisplayMember—a data source’s field whose values are displayed as list items.

DisplayFormat—a pattern used to format list items.

ItemsSource - DisplayMember, DisplayFormat

<dxcv:DXCollectionView ItemsSource="{Binding Data}"
                       DisplayMember="Name"
                       DisplayFormat="Contact: {0}">
</dxcv:DXCollectionView>

Templates

Use the ItemTemplate property to specify a template that defines the appearance of list items. The binding context of the template is an object that specifies an item in the underlying data source.

ItemsSource - ItemTemplate

<dxcv:DXCollectionView ItemsSource="{Binding Data}">
    <dxcv:DXCollectionView.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.RowDefinitions>
                    <RowDefinition Height="40"/>
                    <RowDefinition Height="30"/>
                    <RowDefinition Height="Auto"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="170"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <Label Text="{Binding Name}" Padding="10, 15, 0, 0"  FontAttributes="Bold"/>
                <Label Text="{Binding Phone}" Padding="10, 15, 0, 0" Grid.Row="0" Grid.Column="1"/>
                <Label Text="{Binding Location}" Padding="10, 0" Grid.Row="1" Grid.Column="1"/>
                <BoxView Grid.Row="2" Grid.ColumnSpan="3" BackgroundColor="#ebebeb" HeightRequest="2"/>
            </Grid>
        </DataTemplate>
    </dxcv:DXCollectionView.ItemTemplate>
</dxcv:DXCollectionView>

Specify Item Size

The DXCollectionView automatically adjusts the height (or width, if the Orientation property is set to Horizontal) of data items to display their entire content, but sets an item’s minimum size with the MinItemSize property. If you specify the ItemSize property, all data items have the same height (width).

The GroupHeaderSize property specifies the height of group headers.

Identify Items

Data items in the DXCollectionView visualize records from the data source.

When data is grouped, the DXCollectionView displays group headers—items that separate groups of data items. Users can tap group headers to expand and collapse groups.

Collection View - Items

Item Handles

Items (data items and group headers) in the DXCollectionView are identified by unique integer values—item handles. Each item has an item handle, regardless of whether an item is currently visible (for example, an item might be scrolled off-screen or hidden within a collapsed group).

An item handle depends on the item’s current position in the view and changes dynamically when items are reordered (for example, when data is sorted or grouped).

  • Data item handles are zero-based indexes that correspond to item order from top to bottom (or from left to right, if the Orientation property is set to Horizontal).
  • Group header handles are negative values that start with -1. The order matches the group order from top to bottom (or from left to right, if the view orientation is horizontal).

Visible items can also be identified by their visible indexes. These indexes start from zero. Successive integers are assigned to all visible items (group headers and data items). An item is hidden if it is contained within a collapsed group.

Collection View - Item Handles

The following methods allow you to obtain item handles:

Method

Description

GetItemHandleByVisibleIndex

Returns the handle of the item by its visible index.

GetChildItemHandle

Returns the handle of the item at the specified position within the specified group.

You can pass item handles as parameters to the following methods that work with items:

Method

Description

GetItem

Returns an object that specifies a record in the CollectionView’s underlying data source.

ScrollTo

Scrolls the view to make the specified item visible.

GetItemVisibleIndex

Returns the visible index of the item by its handle.

GetGroupValue

Returns the data value for which the group is created.

GetChildItemCount

Returns the number of data items in the group.

IsGroupHeader

Checks whether the specified item is a group header.

IsGroupCollapsed

Indicates whether the specified group of items is collapsed.

CollapseGroup

Collapses the specified group of items.

ExpandGroup

Expands the specified group of items.

Item Count

To obtain the number of data items in the list, use the bound data source’s methods and properties. The VisibleItemCount property returns the total number of group headers (if data is grouped) and data items that are not hidden within collapsed groups, including items outside the current viewport.

Select Items

The DXCollectionView supports single and multiple item selection from the UI (on tap) and code.

Multiple Selection

  • SelectionMode = None (default)
    Items cannot be selected within the view.

  • SelectionMode = Single
    When a user selects (taps) an item, the SelectedItem property is set to an object that specifies the item from the data source that corresponds to the item selected in the list. When a user taps the selected item again, the selection is cleared and the SelectedItem property is set to null.
    To select an item in code, assign the data source’s item object to the view model’s property and bind the SelectedItem property to it.

  • SelectionMode = Multiple
    When a user selects (taps) items, the SelectedItems property is set to a collection of objects that specify items from the data source that correspond to items selected in the list.
    To select multiple items in code, assign a collection of the data source’s item objects to the view model’s property and bind the SelectedItems property to it.

The SelectionChanged event occurs when the selection is changed from the UI (a user taps an item) or code (the SelectedItem or SelectedItems property value is changed).

View Example: DevExpress Collection View for .NET MAUI - Selection

Customize the Selected Item Appearance

To customize the selected item’s appearance, use the SelectedItemTemplate or SelectedItemAppearance properties.

Sort Data

To sort items in the DXCollectionView:

  1. Create a SortDescription object and specify its FieldName and SortOrder properties.
  2. Add this object to the DXCollectionView.SortDescriptions collection.

You can sort list items by multiple data fields. To do this, create a SortDescription object for each field that should be sorted. The order in which you add these objects to the DXCollectionView.SortDescriptions collection defines the sort sequence in the DXCollectionView.

<dxcv:DXCollectionView ItemsSource="{Binding Contacts}">
    <!--...-->

    <dxcv:DXCollectionView.SortDescriptions>
        <dxcv:SortDescription FieldName="Name" SortOrder="Descending"/>
    </dxcv:DXCollectionView.SortDescriptions>
</dxcv:DXCollectionView>

Read Tutorial

Group Data

The DXCollectionView allows you to arrange items with identical values in a specific data field into collapsible groups. To expand or collapse a group, a user can tap its header.

Collection View - Grouping

To group data, set the DXCollectionView.GroupDescription property to a GroupDescription object with the specified FieldName and GroupInterval properties.

Use the GroupItemAppearance or GroupHeaderTemplate properties to specify the appearance of group headers.

<dxcv:DXCollectionView ItemsSource="{Binding Contacts}">
    <!--...-->

    <!--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>

Read Tutorial

Filter Data

You can use the FilterExpression and FilterString properties to filter data in a DXCollectionView against single or multiple data fields. When a filter is applied, the view displays a subset of data items that meet the specified criteria.

Collection View - FilterString

<dxcv:DXCollectionView ItemsSource="{Binding Recents}"
                       FilterString="StartsWith([Name], 'M')">
    <!-- ... -->
</dxcv:DXCollectionView>

Read Tutorial

Pull to Refresh

You can set up the DXCollectionView so that users can refresh content with a pull-down gesture.

Collection View - Pull to Refresh

To enable this functionality, set the IsPullToRefreshEnabled property to true. Then, either define a refresh command in a view model and bind it to the PullToRefreshCommand property, or handle the PullToRefresh event. Use the IsRefreshing property to notify the view that the pull-to-refresh activity is complete and the refresh indicator should be hidden.

View Example: DevExpress Collection View for .NET MAUI - Pull-to-Refresh

Load More

You can set up the DXCollectionView so that it adds a set of new data items when a user scrolls to the last item.

Collection View - Load More

To enable this functionality, set the IsLoadMoreEnabled property to true. Then, either define a load-more command in a view model and bind it to the LoadMoreCommand property, or handle the LoadMore event. Use the IsRefreshing property to notify the view that the load-more activity is complete and the load indicator should be hidden. The IndicatorColor property allows you to change the indicator color.

View Example: DevExpress Collection View for .NET MAUI - Infinite Scrolling

Drag and Drop Items

The DXCollectionView has a set of properties and events that allow you to enable drag-and-drop operations and control them at different stages.

Property

Description

AllowDragDropItems

Gets or sets whether users can drag items within the view. This is a bindable property.

AllowDragDropSortedItems

Gets or sets whether users can drag items that are sorted or grouped. This is a bindable property.

Event

Description

DragItem

Occurs when a user taps and holds an item to drag it.

DragItemOver

Occurs each time an item is dragged over another item.

DropItem

Occurs when a user drops an item.

CompleteItemDragDrop

Occurs after a drag-and-drop operation is completed.

See Also