Xamarin.Forms draggable element in UWP

Question

Hiiho! I am developing a dashboard view using Xamarin.Forms.

Now I want to allow a user to drag and drop my icons to rearrange my Grid. But for some reason I get no visual representation of the drag event on UWP. The "DragStarted" event those fire tho. Here is my code

This is my custom renderer in UWP.

[assembly: ExportRenderer(typeof(DashboardIcon), typeof(DashboardIconRenderer))]
namespace Paraply.Droid.Custom_Renderers
{
class DashboardIconRenderer : ViewRenderer<DashboardIcon, Windows.UI.Xaml.FrameworkElement>
    {

        public DashboardIconRenderer()
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<DashboardIcon> e)
        {
            base.OnElementChanged(e);

            if (this == null)
                return;
            this.CanDrag = true;
            this.DragStarting += OnDragStarting;
            //this.Holding += HandleHoldEvent;
        }

        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);

            this.CanDrag = true;
        }

        private void OnDragStarting(object sender, DragStartingEventArgs e)
        {
        //This fires
        }
}

My contentpage in Xamarin.Forms, or its the funciton that fills my Grid

public void InflateServices(IList<InstalledServiceModel> services)
{
    int count = 0;
    serviceBoard.Children.Clear();
    foreach (InstalledServiceModel service in services)
    {
        DashboardIcon icon = new DashboardIcon(service.Name, service.IconURL, service.Id);

        var p = new TapGestureRecognizer();
        p.CommandParameter = icon;
        p.SetBinding(TapGestureRecognizer.CommandProperty, "IconClick");
        icon.GestureRecognizers.Add(p);

        icon.Holding += HandleHoldEvent;

        serviceBoard.Children.Add(icon, count % 3, count / 3);
        count++;
    }
}

Now every DashboardIcon is a class that derives from Grid. It looks like this

public class DashboardIcon : Grid 
{
    //public event EventHandler<DashboardHoldingEventArgs> Holding;
    //public void OnHolding(DashboardHoldingEventArgs e) { Holding(this, e); }


    public DashboardIcon(string title, string url, int id = -1)
    {   
        Title = title;
        URL = url;
        ServiceId = id;
        /*
        UI design 
        */
        HorizontalOptions = LayoutOptions.FillAndExpand;
        VerticalOptions = LayoutOptions.FillAndExpand;

        RowDefinitions.Add(new RowDefinition() { Height = new GridLength(0.6, GridUnitType.Star) });
        RowDefinitions.Add(new RowDefinition() { Height = new GridLength(0.4, GridUnitType.Star) });

        image = new Image()
        {
            Source = url,
            HorizontalOptions = LayoutOptions.CenterAndExpand,
            Aspect = Aspect.AspectFit
        };

        text = new Label()
        {
            Text = title,
            HorizontalTextAlignment = TextAlignment.Center,
            TextColor = Color.Black
        };

        Children.Add(image, 0, 0);
        Children.Add(text, 0, 1);
    }

Now my OnDragStarting function does fire just fine. But for some reason I get no visual representation of the view I'm dragging, I was expecting the view to follow my finger until I drop it?

check out mrgestures.com, there's some UWP mention there that may help you if the component itself doesn't work for you. — Sten Petrov
Not sure about UWP with custom renderer, but since you mentioned that you are using Xamarin.Forms, you could try to implement this with cross platform Pan Gesture Recognizer. — Nikola Prokopić

Matt Matt · Accepted Answer · 2016-04-24T22:39:01

In OnDragStarting you can set e.DragUI.SetContentFromBitmap() for example. There you can specify what you want to see while dragging (the image probably). Also here you could set this.Opacity = 0.2; so it gets transparent or invisible.

Xamarin.Forms draggable element in UWP

1 Answers