Xamarin.Forms Equivelant of UWP's DragUIOverride

Nathan Sokalski 4,126 Reputation points
2021-02-25T02:39:09.51+00:00

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.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,325 questions
0 comments No comments
{count} votes

Accepted answer
  1. JarvanZhang 23,951 Reputation points
    2021-02-25T08:53:42.48+00:00

    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.


0 additional answers

Sort by: Most helpful