ReorderableCollectionView for Xamarin Forms

The ReorderableCollectionView extends the standard CollectionView to include 2 new features:

Item reordering
Support for a new ItemsLayout called VariableSpanGridItemsLayout

Aside from that, it will behave & function exactly as the standard CollectionView. The 2 are not dependent on one another. The existing GridItemsLayout & LinearItemLayout are also compatible with this new control's reordering feature.

The VariableSpanGridItemsLayout is much like the GridItemsLayout however it does not have a fixed span. It instead has a column span which will vary based on the size of the control. Rather than having item sizes that grow & shrink, the span will grow & shrink. If desired, items can span multiple columns by supplying a custom lookup.

Getting started

The project is up on NuGet at the following URL:

https://www.nuget.org/packages/ReorderableCollectionView.Forms

Install this package into your shared project and your platform specific projects (Android, iOS, and UWP). Then simply add the namespace declaration to your files.

In your C# page, add:

using ReorderableCollectionView.Forms;

In your XAML page, add the namespace attribute:

xmlns:rcv="clr-namespace:ReorderableCollectionView.Forms;assembly=ReorderableCollectionView.Forms"

Syntax

Reordering is enabled & disabled through the CanReorderItems property.

Additionally, if you'd like to mix items between different groups you'll need to enable the CanMixGroups property. By default, group A items can only be reordered within group A. You won't be able to drag an item from group A into group B unless you set CanMixGroups to true.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:rcv="clr-namespace:ReorderableCollectionView.Forms;assembly=ReorderableCollectionView.Forms"
             x:Class="MyLittleApp.MainPage">

     <Grid>

        <rcv:ReorderableCollectionView ItemsSource="{Binding Monkeys}" CanReorderItems="True" CanMixGroups="False" />

    </Grid>

</ContentPage>

Here's the sytax if you'd like to try the new VariableSpanGridItemsLayout.

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:rcv="clr-namespace:ReorderableCollectionView.Forms;assembly=ReorderableCollectionView.Forms"
             x:Class="MyLittleApp.MainPage">

     <Grid>

        <rcv:ReorderableCollectionView ItemsSource="{Binding Monkeys}">
           <rcv:ReorderableCollectionView.ItemsLayout>
              <rcv:VariableSpanGridItemsLayout ItemWidth="150" ItemHeight="80"
                                                VerticalItemSpacing="5"
                                                HorizontalItemSpacing="5" />
           </rcv:ReorderableCollectionView.ItemsLayout>
        </rcv:ReorderableCollectionView>

    </Grid>

</ContentPage>

The default column span for each item within a VariableSpanGridItemsLayout is 1. This can be overridden by supplying an optional custom ItemSpanLookup. (Optional)

public class SpanLookup : ISpanLookup
{
    public int GetColumnSpan(object item)
    {
        if (item is Monkey monkey && monkey.Name == "Blue Monkey")
        {
            return 2;
        }
        return 1;
    }
}

Properties

Properties for the ReorderableCollectionView

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

Properties for the VariableSpanGridItemsLayout

Property	Type	Description
`ItemWidth`	double	Gets or sets the width of the layout area for each item contained within the grid.
`ItemHeight`	double	Gets or sets the height of the layout area for each item contained within the grid.
`HorizontalItemSpacing`	double	Gets or sets the horizontal spacing between items.
`VerticalItemSpacing`	double	Gets or sets the vertical spacing between items.
`ItemSpanLookup`	IItemSpanLookup	Gets or sets a lookup that can assign custom column spans to each item.

Events

Event	Type	Description
`ReorderCompleted`	EventHandler	Event that is triggered whenever reordering completes.

Limitations

The UWP platform can only reorder ObservableCollections.

The UWP platform cannot reorder grouped items. Nor can it reorder items within a VariableSpanGridItemsLayout that uses a custom ItemSpanLookup. This is due to the built-in reordering mechanisms provided by UWP's ListView, GridView, & VariableSizedWrapGrid. When a custom ItemSpanLookup is supplied, the UWP renderer will use a VariableSizedWrapGrid as the ItemsPanel. According to the official docs: