Awesome

ReorderableCollectionView for Xamarin Forms

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

1. Item reordering
2. 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

Properties for the VariableSpanGridItemsLayout

Events

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:

"Built in reordering is not supported when items are grouped, or when a VariableSizedWrapGrid is used as the ItemsPanel."
https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.controls.listviewbase.canreorderitems