Xamarin.Forms Equivelant of UWP's DragUIOverride

Question

I am working on adding Drag & Drop to my Xamarin.Forms app. When the user drags the element, I want it to look like they are dragging it, not copying it (I want it to look like the content is being moved, not copied). In UWP, the DragEventArgs had a DragUIOverride property that allowed you to specify the appearance of the moving content. Is there a way to do this with Xamarin.Forms? Thanks.

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

When the user drags the element, I want it to look like they are dragging it, not copying it

For this, two things need to be realized. The first is to set the content of the drag view to null after it's dragged successfully. For example, set the source of the image to null after dragging the image. The other is to add a moving effect, you could detect the DragStarting and DropCompleted events to change the Opacity of the view to do this.

I tested a basic demo about dragging an image, check the code:

   <StackLayout Margin="20">  
       <Image x:Name="img" Source="test.png" HorizontalOptions="Center">  
           <Image.GestureRecognizers>  
               <DragGestureRecognizer CanDrag="True" DragStarting="DragGestureRecognizer_DragStarting" DropCompleted="DragGestureRecognizer_DropCompleted"/>  
           </Image.GestureRecognizers>  
       </Image>  
         
       <Image BackgroundColor="Silver" HeightRequest="300" WidthRequest="250">  
           <Image.GestureRecognizers>  
               <DropGestureRecognizer AllowDrop="True"/>  
           </Image.GestureRecognizers>  
       </Image>  
   </StackLayout>  

Page.xaml.cs

   public partial class ImageDragDemoPage : ContentPage  
   {  
       public ImageDragDemoPage()  
       {  
           InitializeComponent();  
       }  
     
       bool IsDraggingSuccessufl;  
       private void DragGestureRecognizer_DragStarting(object sender, DragStartingEventArgs e)  
       {  
           img.Opacity = 0;  
       }  
     
       private void DragGestureRecognizer_DropCompleted(object sender, DropCompletedEventArgs e)  
       {  
           if (!IsDraggingSuccessufl)  
           {  
               img.Opacity = 1;  
           }  
       }  
     
       private void DropGestureRecognizer_Drop(object sender, DropEventArgs e)  
       {  
           img.Source = null;  
           IsDraggingSuccessufl = true;  
       }  
   }  

Best Regards,

Jarvan Zhang

---

If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.