Is it possible to make Editor draggable in Xamarin?

Question

I want to make a function just like other social media apps where the users can add a text to the post and drag the text to anywhere they want it to be. I have a code for Editor which allows the user to type anything they want and it shows on the screen when the user clicks a button. Typing wise, it works perfectly fine but now I want to implement a function where the user can drag the text anywhere they want because as default, I set up to show the texts in the middle of the screen. I tried to use PanGestureRecognizer but am not sure if this is the right approach or if there is a better approach. Is there a way where once the user is done typing using Editor, they can just drag it anywhere they want? This is the code for the Editor.

<Editor IsVisible="{Binding HasTextBox}" Text="{Binding EntryText}" HorizontalOptions="Center" VerticalOptions="Center">
   <Editor.GestureRecognizers>
      <PanGestureRecognizer PanUpdated="OnPanUpdated" />
   </Editor.GestureRecognizers>
</Editor>

And this is the code I had for PanUpdated method which didn't work.

        double x, y;

        private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
        {
            var editor = sender as Editor;

            switch (e.StatusType)
            {
                case GestureStatus.Started:
                    // Store the current position
                    x = editor.TranslationX;
                    y = editor.TranslationY;
                    break;
                case GestureStatus.Running:
                    // Adjust the position based on the user's movement
                    editor.TranslationX = x + e.TotalX;
                    editor.TranslationY = y + e.TotalY;
                    break;
                case GestureStatus.Completed:
                    // Optionally store the final position
                    x = editor.TranslationX;
                    y = editor.TranslationY;
                    break;
            }
        }

Answer 1

Yes you can use the PanGestureRecognizer for this use case. To implement the draggable Editor/Button/AnyControl you can use a combination of the PanGestureRecognizer and manipulating the position of the that control.

You need to create Custom Control from ContentView class like:

public class DraggableView : ContentView
{
    private double _startX, _startY;

    public DraggableView()
    {
        var panGesture = new PanGestureRecognizer();
        panGesture.PanUpdated += OnPanUpdated;
        GestureRecognizers.Add(panGesture);
    }

    private void OnPanUpdated(object sender, PanUpdatedEventArgs e)
    {
        switch (e.StatusType)
        {
            case GestureStatus.Started:
                _startX = TranslationX;
                _startY = TranslationY;
                break;

            case GestureStatus.Running:
                TranslationX = _startX + e.TotalX;
                TranslationY = _startY + e.TotalY;
                break;

            case GestureStatus.Completed:
                // you can handle any additional actions over here when the dragging is been completed
                break;
        }
    }
}

You can use it in xaml like:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YOURNAMESPACE"     // Add the reference of draggable view
             x:Class="YOURNAMESPACE.YOURPAGE">
    <Grid>
        <local:DraggableView>
            <Editor Text="This is a draggable editor" />
            // You can add any control here which you want to make draggable
        </local:DraggableView>
    </Grid>
</ContentPage>

You can have the UI components as per your requirement like setting the background color and etc.