Exploring Drag and Drop in Xamarin Forms

June 14, 20211 Comment

In Xamarin Forms 5 the ability for doing drag and drop was released. In this article, I’ll explore it and show you how to use it by creating a simple Schedule UI, which will have the ability to drag event cards and drop them over a Trash icon to delete them.

How it works

To work with Drag/Drop, XF released two new GestureRecognizers that can be added to any UI element: DragGestureRecognizer and DropGestureRecognizer.

You just need to add the DragGestureRecognizer to the element you want to drag.

And a DropGestureRecognizer to the element where you want to drop it.

It also provides events/commands that can be used to detect when it starts dragging (DragStartingCommand, DragStarting) or dropping (DragOverCommand, DragLeaveCommand, DropCommand, DragOver).

Let’s use it

First, we are going to create a model that will represent our events:

public class Event { public Event(string title, string location, DateTime time, Color color) { Title = title; Location = location; Time = time; Color = color; }

public string Title { get; } public string Location { get; } public DateTime Time { get; } public Color Color { get; } }

Then create a ViewModel that will contain the list of events:

namespace DragAndDropXFSample { public class EventsPageViewModel { public ObservableCollection<Event> Events { get; }

public EventsPageViewModel() { Events = new ObservableCollection<Event>() { {new Event("Go for a walk", "Home", DateTime.Now.AddHours(3), Color.OrangeRed) }, {new Event("Finish PR", "Work", DateTime.Now.AddHours(5), Color.ForestGreen) }, {new Event("Watch a movie", "Home", DateTime.Now.AddMinutes(40), Color.LightSkyBlue) }, }; } } }

Create the view that will show the events and add the DragGestureRecognizer to a Frame inside the CollectionView DataTemplate, then a DropGestureRecognizer to the Trash Image.

<?xml version="1.0" encoding="UTF-8" ?> <ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="DragAndDropXFSample.EventsPage"> <ContentPage.Content> <StackLayout Padding="20,40" BackgroundColor="Black"> <Label Text="Hi John" FontSize="Large" FontAttributes="Bold"/>

<Frame.GestureRecognizers> <DragGestureRecognizer DragStartingCommand="{Binding Path=BindingContext.DragStartingCommand, Source={x:Reference EventsCollection}}" DragStartingCommandParameter="{Binding .}" /> </Frame.GestureRecognizers> </Frame> </DataTemplate> </CollectionView.ItemTemplate> </CollectionView>

<StackLayout> <Image HeightRequest="30" WidthRequest="30" Source="ic_trash" HorizontalOptions="EndAndExpand"/> <StackLayout.GestureRecognizers> <DropGestureRecognizer DropCommand="{Binding DropOverCommand}"/> </StackLayout.GestureRecognizers> </StackLayout> </StackLayout> </Frame> </StackLayout> </ContentPage.Content> </ContentPage>

In the ViewModel, we will use the DragStartingCommand and DragStartingCommandParameter to pass the event that was dragged to the ViewModel, and the DropCommand to detect when it was dropped over the trash icon to delete the event.

namespace DragAndDropXFSample { public class EventsPageViewModel { public ICommand DragStartingCommand => new Command<Event>((param) => { _dragEvent = param; });

public ICommand DropOverCommand => new Command(() => { if (Events.Contains(_dragEvent)) Events.Remove(_dragEvent); });

private Event _dragEvent; ... } }

Result

That’s how easy it is to add drag/drop in our XF apps. If you want to continue learning about it, I recommend you to read Xamarin Forms Documentation or check this awesome video by Gerald Versluis.

You can find the full source code here.

Happy coding!

Like this:

sana says:

June 17, 2021 at 12:51 am

I like this website.

Reply

Exploring Drag and Drop in Xamarin Forms