Search code examples
c#eventsdrag-and-dropmaui

Drag-Drop events do not fire in .NET MAUI 8


Should the drag-event work this way and is it a bug,
or am I missing any declaration or definition here?

Nothing happens when trying to drag any drag-enabled element on the page. The entire drag-event does not fire to begin with. I cannot test if the drop event does fire, because for that I need drag to work first.

This is a file->new MAUI application with no packages, nothing installed and nothing changed except for adding the drag and drop elements with GestureRecognizers and event methods in the C# / code behind.

MainPage.xaml

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiApp1.MainPage">

    <ScrollView>
        <VerticalStackLayout
            Padding="30,0"
            Spacing="25">
            <Image
                Source="dotnet_bot.png"
                HeightRequest="185"
                Aspect="AspectFit"
                SemanticProperties.Description="dot net bot in a race car number eight" />

            <Label
                Text="Hello, World!"
                Style="{StaticResource Headline}"
                SemanticProperties.HeadingLevel="Level1" />

            <Label
                Text="Welcome to &#10;.NET Multi-platform App UI"
                Style="{StaticResource SubHeadline}"
                SemanticProperties.HeadingLevel="Level2"
                SemanticProperties.Description="Welcome to dot net Multi platform App U I" />

            <VerticalStackLayout>
                    <Border Margin="20"
                            HorizontalOptions="Fill"
                            BackgroundColor="#FFAAAA"
                            HeightRequest="128"
                            x:Name="DroppableBorder">
                        <Border.GestureRecognizers>
                            <DropGestureRecognizer AllowDrop="True"
                                                   Drop="DropGestureRecognizer_Drop"/>
                        </Border.GestureRecognizers>
                    </Border>
                    <Label Text="Drag Me" 
                           HorizontalTextAlignment="Center" 
                           TextColor="Black" 
                           FontSize="36"
                           x:Name="DraggableLabel">
                        <Label.GestureRecognizers>
                            <DragGestureRecognizer CanDrag="True"
                                                   DragStarting="DragGestureRecognizer_DragStarting"/>
                        </Label.GestureRecognizers>
                    </Label>
            </VerticalStackLayout>
        
        </VerticalStackLayout>
    </ScrollView>

</ContentPage>

MainPage.xaml.cs

namespace MauiApp1;

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }

    private void DropGestureRecognizer_Drop(object sender, DropEventArgs e)
    {
        var data = e.Data.Properties["Text"].ToString();
        DroppableBorder.Content = new Label
        {
            Text = data
        };
    }

    private void DragGestureRecognizer_DragStarting(object sender, DragStartingEventArgs e)
    {
        e.Data.Properties.Add("Text", DraggableLabel.Text);
    }
}

I don't have any issues with other gestures such as PanGestureRecogniser. The events fire and method actions are performed. This is not the case for Drag-Drop gestures.


Solution

  • According to the docs: Recognize a drag and drop gesture:

    A drag gesture is initiated with a long-press followed by a drag.

    So you need to long-press to trigger the drag.