Search code examples
drag-and-dropmaui

.Net MAUI - How to change the image shown as you drag from the source to the target?

I'm working on a UI in .Net MAUI that uses drag and drop. The drag and drop is not a problem; works fine. The issue is that I want to change the image show as I drag it around. Not the drag source nor the drop target, but the image that follows the cursor.

The example below shows the behavior. I want to change it so that the image that is moving with the cursor is different.

If I had two wishes for Christmas, it would be to hide the "Copy" tooltip-esq graphic that MAUI puts on top of my image as I drag it.

XAML

<Frame Margin="20" HorizontalOptions="Center" BorderColor="LightBlue" ZIndex="1" MaximumWidthRequest="400" MaximumHeightRequest="400" BackgroundColor="LightBlue">
    <Image x:Name="reds"  Source="reds_trans_bg.png" MaximumHeightRequest="100" MinimumHeightRequest="100" MaximumWidthRequest="100" MinimumWidthRequest="100">
        <Image.GestureRecognizers>
            <DragGestureRecognizer  CanDrag="True" DragStarting="DragGestureRecognizer_DragStarting_2"  />
        </Image.GestureRecognizers>
    </Image>
</Frame>

<Frame Margin="20" HorizontalOptions="Center" BorderColor="LightBlue" ZIndex="1" MaximumWidthRequest="400" MaximumHeightRequest="400" BackgroundColor="LightBlue">
    <Frame.GestureRecognizers>
        <DropGestureRecognizer AllowDrop="True" Drop="DropGestureRecognizer_Drop_2" />
    </Frame.GestureRecognizers>
    <VerticalStackLayout VerticalOptions="Center" BackgroundColor="LightBlue">
        <Image Source="washer_trans_bg.png" BackgroundColor="LightBlue" ZIndex="100" MaximumWidthRequest="100" MaximumHeightRequest="100" >
        </Image>
        <HorizontalStackLayout HorizontalOptions="Center" BackgroundColor="LightBlue">
            <Label x:Name="contents" Text="test" BackgroundColor="LightBlue" TextColor="White" FontAttributes="Bold">
            </Label>
        </HorizontalStackLayout>
    </VerticalStackLayout>
</Frame>

Code

private void DragGestureRecognizer_DragStarting_2(object sender, DragStartingEventArgs e)
{
    var image = (sender as Element)?.Parent as Image;
    e.Data.Properties.Add("Text", "Red");
}

private void DropGestureRecognizer_Drop_2(object sender, DropEventArgs e)
{
    var data = e.Data.Properties["Text"].ToString();
    
    contents.Text = $"Red: {++count}";
}

maui drag and drop example

Solution

  • Afaik the only platforms where you can do that out of the box are iOS and Mac catalyst.

    From the docs.

    void OnDragStarting(object sender, DragStartingEventArgs e)
{
#if IOS || MACCATALYST
    Func<UIKit.UIDragPreview> action = () =>
    {
        var image = UIKit.UIImage.FromFile("dotnet_bot.png");
        UIKit.UIImageView imageView = new UIKit.UIImageView(image);
        imageView.ContentMode = UIKit.UIViewContentMode.Center;
        imageView.Frame = new CoreGraphics.CGRect(0, 0, 250, 250);
        return new UIKit.UIDragPreview(imageView);
    };

    e.PlatformArgs.SetPreviewProvider(action);
#endif
}