Drag and Drop on Xamarin Forms

Viewed 325

We want to implement drag and drop functionality in Xamarin forms

and in this user should be able to drag an emoji from 1 place, and put on another. We don’t want the source emoji to go away though and should be able to come to know on which employee, rating is given .

Image how it is before

Image how it is after

Question also posted on: https://forums.xamarin.com/discussion/184104/drag-and-drop-on-xamarin-forms/p1?new=1

We have checked a few links like below, but none of them seem to work:

Xamarin Forms Drag Image between Views https://blog.francois.raminosona.com/drag-and-drop-in-xamarin-forms/

Will appreciate if could get some tips on how to do it and even if this was possible on forms?

1 Answers

You could check the code below.

xaml:

<StackLayout Margin="10">

        <StackLayout Margin="10" Orientation="Horizontal">
            <components:DragAndDropSample3ReceivingView
                BackgroundColor="Beige"
                HeightRequest="80"
                WidthRequest="80" />
            <components:DragAndDropSample3ReceivingView
                BackgroundColor="Beige"
                HeightRequest="80"
                WidthRequest="80" />
            <components:DragAndDropSample3ReceivingView
                BackgroundColor="Beige"
                HeightRequest="80"
                WidthRequest="80" />

        </StackLayout>
        <BoxView
            BackgroundColor="Blue"
            HeightRequest="5"
            WidthRequest="3" />
        <StackLayout Margin="10" Orientation="Horizontal">

            <components:DragAndDropSample3MovingView
                BackgroundColor="Red"
                CornerRadius="40"
                HeightRequest="40"
                WidthRequest="40" />
            <components:DragAndDropSample3MovingView
                BackgroundColor="Green"
                CornerRadius="40"
                HeightRequest="40"
                WidthRequest="40" />
        </StackLayout>

    </StackLayout>

Code Behind:

 public void OnDropReceived(IDragAndDropMovingView view)
    {
        if (view is DragAndDropSample3MovingView sender)
        {
            var control = new DragAndDropSample3MovingView()
            {
               BackgroundColor=sender.BackgroundColor,
               CornerRadius=sender.CornerRadius,
               WidthRequest=sender.WidthRequest,
               HeightRequest=sender.HeightRequest,                 
              
            };
            Content = control;


        }

    }

Screenshot:

enter image description here

You could check the source file from the code project for reference. https://github.com/WendyZang/Test/tree/master/Drag_Drop_Controls/Xamarin-Developer-Sample-master

Related