I had always wondered how to achieve a draggable view in Xamarin Forms to create some different user experiences. You can definitely do this by using custom renderers, it was impressive how well it worked out after just a few hours spent.
Control:
Here some brief details on what it can do:
There are 3 options to set restrictions for drag direction: All (no restrictions), Vertical (can only drag vertically) and horizontal (can only drag horizontally). By default is set to All (can drag in any direction, no dragging restrictions).
public enum DragDirectionType
{
All,
Vertical,
Horizontal
}
There are two options to set the triggering to start the drag by touching or long pressing the view. By default is set to trigger drag by using long press.
public enum DragMode
{
Touch,
LongPress
}
Bindable Properties
- DragMode – Sets the drag trigger mode. Could be by touch or when long pressing that allows you to start the drag.
- DragDirection – Sets the direction for the drag could be in all directions, vertical or horizontal restricted.
- IsDragging – Indicates when the view is being dragged
- RestorePositionCommand – Command to restore the view to the first position it was dragged from.
Events
- DragStarted – Event fired when the drag starts.
- DragEnd – Event fired when the drag ends.
Android:
iOS:
Forms:
You can find the full source code used for this sample here:
https://github.com/CrossGeeks/DragViewSample
Happy dragging!
7 Comments
The above code is just the example I was looking for and works out-of-the-box on iOS, but blows up on Android now that in Xamarin Forms 2.5 they’ve killed off VisualElementRenderer. I’ve been digging into it trying to come up with a fix but I’m just not as familiar with custom Android renderers as I wish I was. Any insight as to how to get this working in 2.5?
Works for me. I just had to add this constructor:
public DraggableViewRendererDroid() : base(Android.App.Application.Context) { }
Hello,
Thank you for this tutorial, is very handy 🙂 I have a small problem, if I have the draggableView in a ScrollView, when I’m trying to drag the element, it triggers the ScrollView. Do you know how I can disable that?
Thanks
Set InputTransparent=true on ScrollView, when you start dragging. This will disable scrolling.
Hi,
Thanks for this tutorial. Can we use this for drag and drop between two different viewes?
Hi,
Great tutorial! Can we drag-drop between two views?
I used this code for drag and dropping FrameLayouts which were children of StackLayout. I had a problem on iOS because TouchesBegan was not called every time (I guess that was because of FrameLayout children). I had to comment lastLocation = Center; in TouchesBegan and add lastLocation = new CGPoint(originalPosition); to
if (panGesture.State == UIGestureRecognizerState.Began)
in order to make it work.
Comments are closed.