Xamarin.Forms Reorderable WrapLayout

Question

I have a group of cells (of type StackLayout) and they are all in a WrapLayout. I can't seem to figure out how to make it reorderable, similar to Drag & Drop ListView.

Here is the WrapLayout:

WrapLayout layout = new WrapLayout
{
    Spacing = 5,
    Orientation = StackOrientation.Horizontal,
    Padding = new Thickness(5, Device.OnPlatform(20, 5, 5), 5, 5),
    HorizontalOptions = LayoutOptions.FillAndExpand,
    VerticalOptions = LayoutOptions.FillAndExpand,
};

And here is one cell:

// Configure cell
var cell = new StackLayout
{
    WidthRequest = Device.Idiom == TargetIdiom.Phone ? 60 : 140,
    HeightRequest = Device.Idiom == TargetIdiom.Phone ? 60 : 50,
    BackgroundColor = Color.FromRgb(60, 56, 72),
    Children = {
        new Label {
            Text = Device.Idiom == TargetIdiom.Phone ? book.Contains("1") || book.Contains("2") || book.Contains("3") ? book.Substring(0,4).Replace(" ", "") : book.Substring(0,2) : book,
            FontSize = 18,
            TextColor = Color.White,
            LineBreakMode = LineBreakMode.TailTruncation,
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalTextAlignment = TextAlignment.Center,
            HorizontalTextAlignment = TextAlignment.Center
        }
    }
};
layout.Children.Add(cell);

And here is what the app actually looks like as of now:

Any help in making this possible is appreciated.

Answer 1

Well the WrapLayout that you're referring to is a custom layout that was created as one of them demos by the devs I believe. To have drag and drop functionality, you would have to implement it manually yourself.

Personally I would attach an event handler to the Tapped event of the cell:

var cell = new StackLayout
{
    Tapped += Cell_Tapped;
    WidthRequest = Device.Idiom == TargetIdiom.Phone ? 60 : 140,
    HeightRequest = Device.Idiom == TargetIdiom.Phone ? 60 : 50,
    BackgroundColor = Color.FromRgb(60, 56, 72),
    Children = {
        new Label {
            Text = Device.Idiom == TargetIdiom.Phone ? book.Contains("1") || book.Contains("2") || book.Contains("3") ? book.Substring(0,4).Replace(" ", "") : book.Substring(0,2) : book,
            FontSize = 18,
            TextColor = Color.White,
            LineBreakMode = LineBreakMode.TailTruncation,
            VerticalOptions = LayoutOptions.FillAndExpand,
            HorizontalOptions = LayoutOptions.FillAndExpand,
            VerticalTextAlignment = TextAlignment.Center,
            HorizontalTextAlignment = TextAlignment.Center
        }
    }
};
layout.Children.Add(cell);

and then create an event handler:

void Cell_Tapped(object sender, EventArgs e)
{
    // Stuff you want to do with that cell
    // Make the current selected cell invisible, attach it to a boxview that is being moved by the tap event
}

This would however only work for a tap and not a true drag and drop implementation, and Xamarin.Forms doesn't currently give you access to touch events. You could write out Custom Renderers for the cells on iOS and Android that would allow you to access the TouchesBegan and TouchesEnded type events on both platforms.

This Xamarin link gives walkthroughs on integrating touch on both iOS and Android.

I hope this helps, I'm sure there are different implementations of this.