Press "Enter" to skip to content

Draggable view in Xamarin Forms

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!

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *