CollectionView Drag & Drop Item Reordering Spec

[billvenhaus]

Description

Support drag-and-drop item reordering in the CollectionView.

The CollectionView handlers should use the built-in item reordering functionality provided by the platforms:

• On Android, attach the ItemTouchHelper to the RecyclerView.
• On iOS, follow the procedure as described in Reordering Items Interactively. Use a gesture recognizer make calls to beginInteractiveMovementForItem, updateInteractiveMovementTargetPosition, & endInteractiveMovement
• On Windows, enable reordering by setting AllowDrop & CanReorderItems to true.

Reordering should require the CollectionView.ItemsSource be bound to an IList. The platform handlers will use the Remove & Insert methods on the IList to complete the reorder operation.

Example
https://github.com/billvenhaus/ReorderableCollectionView.Maui

(Public) API Changes

Place the new reorder functionality in a separate class that the CollectionView can inherit.

CollectionView

public class CollectionView : ReorderableItemsView
{
}

ReorderableItemsView

public class ReorderableItemsView : GroupableItemsView
{
	public static readonly BindableProperty CanMixGroupsProperty;
	public bool CanMixGroups { get; set; }

	public static readonly BindableProperty CanReorderItemsProperty;
	public bool CanReorderItems { get; set; }

	public event EventHandler ReorderCompleted;
}

Properties

API	Description
CanReorderItems	Gets or sets a value that indicates whether items in the view can be reordered through user interaction.
CanMixGroups	Gets or sets a value that indicates whether items from different groups can be mixed during reordering.

Events

API	Description
ReorderCompleted	Raised whenever reordering user interaction completes.

Usage Scenarios

Basic Item Reordering

The developer has an app which manages the playlist for a media player. The user needs to be able to make changes to the track order by rearranging the songs with drag-and-drop. How can the developer achieve this UI with the proposed API?

In order to achieve this behavior, the developer should set the CollectionView.CanReorderItems property to true. They can be notified of changes to the song order by subscribing to the ReorderCompleted event. At that point the developer can save the changes to the playlist storage location.

Reordering with Grouped Sources (Mixing Items)

The developer has a grouped data source & wishes to mix items. Items in group A can be placed in group B, and items in group B can be placed in group A. How can the developer achieve this with the proposed API?

In order to achieve this behavior, the developer should set both CollectionView.CanReorderItems & CollectionView.CanMixGroups to true.

Detailed Events

The ReorderCompleted is a basic EventHandler that doesn't provide any information about the item that moved. How can the developer determine which item moved & where it moved to?

The developer should bind the CollectionView.ItemsSource to an ObservableCollection if they need to know specific details about the item that moved. The CollectionChanged event of the ObservableCollection can provide that information.

Backward Compatibility

Minimum API Levels:

• Available on all API levels.

Breaking Changes:

• No breaking changes.

Unsupported Platforms:

• Windows reordering only works with ObservableCollections
• Windows reordering does not support grouped sources (see here)

Difficulty

Medium

[AmrAlSayed0]

Reordering should require the CollectionView.ItemsSource be bound to an IList.

Weird, one would think that ObservableCollection is the obvious choice here. Any reason for not having it be a INCC instead?
Nevermind, you already subscribe to INCC in your pull request!

Good job on the PR! 👍

[billvenhaus]

Thanks! Yes, it supports ObservableCollection too. Those actually complicated this task a little bit on Android & iOS. I had to add code to temporarily suspend notifications from INCC to the platform's IItemsViewSource while a move is in progress. Otherwise it disrupts the reorder operation. The IItemsViewSource is set up to refresh the UI whenever the backingINCC changes. Well in this case the UI is already aware of the move because it orchestrated the move.

Windows however does require an ObservableCollection. For that reason, I did seriously consider making ObservableCollection as a requirement in the spec. So perhaps the spec should be changed? The main reason I chose IList in the spec is that it offers broader support on Android & iOS. Forcing those platforms to use an ObservableCollection when it really isn't needed could result in some unnecessary overhead.

[jfversluis]

Just came here to say that this spec is amazing, exactly as I would love to see them, thank you for this @billvenhaus !

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[rmarinho]

Fixed by #3768