Creating a draggable map pin on UWP

问题

After following the instructions in the link here How to create draggable pin in windows 10 to give pick location functionality? I have a half working dragging pin.

Currently the map pin (Grid) starts in the correct place on the map, however, upon dragging the map pin the pin initially pops up to the top left of the screen (0,0) and starts dragging from here. Upon dropping the pin it appears to have disconnected from the map element itself as you can then scroll the map and the pin stays in place on the screen.

I am using Xamarin.Forms with a custom map renderer. Following the original example the map would still pan along with the pin dragging, I corrected this by disabling panning upon Grid_ManipuationStarted. The issue seems to be with the Grid_ManipulationDelta function as this is what removes the Grid from the MapControl children.

I've uploaded a video of the issue onto YouTube. Found here: https://youtu.be/uUkB5Pi5MnA

My code is as follows:

    void IMapControls.startDraggable(Location l) {
        // Create the XAML
        var grid = new Windows.UI.Xaml.Controls.Grid {
            Height=50,
            Width=32,
            Background = new ImageBrush() { ImageSource= new BitmapImage(new Uri("ms-appx:///pin.png",UriKind.RelativeOrAbsolute)),Stretch = Stretch.Uniform },
        };
        grid.ManipulationMode = ManipulationModes.TranslateX|ManipulationModes.TranslateY;
        grid.ManipulationCompleted += Grid_ManipulationCompleted;
        grid.ManipulationStarted += Grid_ManipuationStarted;
        grid.ManipulationDelta += Grid_ManipulationDelta;
        // Set RenderTransform so not null later
        CompositeTransform tran = new CompositeTransform();
        grid.RenderTransform = tran;
        // Add XAML to the map.
        nativeMap.Children.Add(grid);
        Geopoint snPoint = new Geopoint(new BasicGeoposition() { Latitude = l.lat,Longitude = l.lng });
        MapControl.SetLocation(grid,snPoint);
        MapControl.SetNormalizedAnchorPoint(grid,new Windows.Foundation.Point(0.5,1.0));
    }

    private void Grid_ManipuationStarted(Object sender,ManipulationStartedRoutedEventArgs e) {
        nativeMap.PanInteractionMode=MapPanInteractionMode.Disabled;
    }

    private void Grid_ManipulationDelta(object sender,ManipulationDeltaRoutedEventArgs e) {
        var grid = sender as Windows.UI.Xaml.Controls.Grid;
        CompositeTransform xform = grid.RenderTransform as CompositeTransform;

        xform.TranslateX += e.Delta.Translation.X;
        xform.TranslateY += e.Delta.Translation.Y;

        e.Handled = true;
    }

    private void Grid_ManipulationCompleted(object sender,ManipulationCompletedRoutedEventArgs e) {
        nativeMap.PanInteractionMode=MapPanInteractionMode.Auto;
        var grid = sender as Windows.UI.Xaml.Controls.Grid;
        Rect point = grid.TransformToVisual(nativeMap).TransformBounds(new Rect(0,0,grid.Width,grid.Height));
        Geopoint gPoint;
        nativeMap.GetLocationFromOffset(new Windows.Foundation.Point(point.X,point.Y),out gPoint);
        Debug.WriteLine(gPoint.Position.Latitude);
        Debug.WriteLine(gPoint.Position.Longitude);
    }

回答1:

Solved this by creating a Grid and adding it to the map, then creating an Image and adding this to the Grid. You drag the Image using Delta.Translation as above and upon dropping the pin it moves the Grid using MapControl.SetLocation (Not TranslateX/Y) to where the pin drops, then TranslateX/Y the pin Image to 0,0 (relative to the parent Grid). This works as the Grid only moves using SetLocation which seems to work fine and doesn't disconnect it from the map like before. The pin moves relative to the Grid and has no issues as before, ie. Moving to 0,0 upon start and disconnecting from the map object.

Cheers!

Can post code if anyone is interested but I think it is pretty self explanatory.

来源：https://stackoverflow.com/questions/42480276/creating-a-draggable-map-pin-on-uwp