如何在Xamarin.Forms中为图片添加标记点（Pin Mark）及获取该标记点的当前位置

Got it, let's break down these two Xamarin.Forms image pin mark questions step by step. I’ve built similar features before, so these approaches should work smoothly for you.

The best way to overlay interactive pin marks on an image is using an AbsoluteLayout—this container lets you stack elements directly on top of each other, so you can position pins anywhere on the image without disrupting the layout flow. Here's a practical implementation:

Step 1: Set Up the XAML Layout #

First, create a page with an AbsoluteLayout wrapping your target image. We’ll add tap support to the image so users can place pins where they tap:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="ImagePinDemo.MainPage">
    <AbsoluteLayout x:Name="ImageContainer"
                    HorizontalOptions="FillAndExpand"
                    VerticalOptions="FillAndExpand">
        <Image x:Name="TargetImage" 
               Source="your_image_file.png"
               Aspect="AspectFit"
               AbsoluteLayout.LayoutBounds="0,0,1,1"
               AbsoluteLayout.LayoutFlags="All" />
    </AbsoluteLayout>
</ContentPage>

Step 2: Handle Image Taps to Add Pins #

In the code-behind, we’ll add a tap gesture recognizer to the image. When the user taps, we’ll create a pin (using a Frame for a simple circular marker) and position it at the tap location:

public partial class MainPage : ContentPage
{
    private List<View> _pinMarks = new List<View>();
    private double _imageActualWidth;
    private double _imageActualHeight;

    public MainPage()
    {
        InitializeComponent();
        // Track when the image finishes rendering to get its actual size
        TargetImage.SizeChanged += OnImageSizeChanged;
        // Add tap support to the image
        var imageTap = new TapGestureRecognizer();
        imageTap.Tapped += OnImageTapped;
        TargetImage.GestureRecognizers.Add(imageTap);
    }

    private void OnImageSizeChanged(object sender, EventArgs e)
    {
        // Store the image's rendered width/height for position calculations
        _imageActualWidth = TargetImage.Width;
        _imageActualHeight = TargetImage.Height;
    }

    private void OnImageTapped(object sender, TappedEventArgs e)
    {
        var tapPosition = e.GetPosition(TargetImage);
        if (tapPosition.HasValue && _imageActualWidth > 0 && _imageActualHeight > 0)
        {
            // Create a circular pin mark (customize this to fit your design)
            var pinMark = new Frame
            {
                WidthRequest = 20,
                HeightRequest = 20,
                CornerRadius = 10,
                BackgroundColor = Color.Red,
                BorderColor = Color.White,
                BorderWidth = 2,
                Margin = new Thickness(-10, -10, 0, 0) // Offset to center the pin on the tap point
            };

            // Optional: Add tap support to the pin for editing/deleting
            var pinTap = new TapGestureRecognizer();
            pinTap.Tapped += (s, args) => DisplayAlert("Pin Tapped", "You selected this pin!", "OK");
            pinMark.GestureRecognizers.Add(pinTap);

            // Position the pin on the AbsoluteLayout
            AbsoluteLayout.SetLayoutBounds(pinMark, new Rectangle(tapPosition.Value.X, tapPosition.Value.Y, 20, 20));
            AbsoluteLayout.SetLayoutFlags(pinMark, AbsoluteLayoutFlags.None);

            ImageContainer.Children.Add(pinMark);
            _pinMarks.Add(pinMark);
        }
    }
}

There are two reliable ways to get a pin’s position—either store relative coordinates (best for handling image scaling) or fetch the layout bounds directly. Here’s how both methods work:

Method 1: Store Relative Coordinates (Recommended for Scaling) #

When you create a pin, calculate its position relative to the image’s size. This ensures the position stays accurate even if the image scales (e.g., on screen rotation or different device sizes):

// Add a helper class to store pin data
public class PinData
{
    public View PinView { get; set; }
    public double RelativeX { get; set; } // Value between 0 (left) and 1 (right)
    public double RelativeY { get; set; } // Value between 0 (top) and 1 (bottom)
}

private List<PinData> _pinDataList = new List<PinData>();

// Modify the OnImageTapped method to store relative positions
private void OnImageTapped(object sender, TappedEventArgs e)
{
    var tapPosition = e.GetPosition(TargetImage);
    if (tapPosition.HasValue && _imageActualWidth > 0 && _imageActualHeight > 0)
    {
        var pinMark = new Frame { /* Same pin setup as before */ };

        // Calculate relative position
        double relativeX = tapPosition.Value.X / _imageActualWidth;
        double relativeY = tapPosition.Value.Y / _imageActualHeight;

        // Store pin and its relative position
        _pinDataList.Add(new PinData
        {
            PinView = pinMark,
            RelativeX = relativeX,
            RelativeY = relativeY
        });

        // Add pin to layout...
    }
}

// Method to retrieve all pin positions
public void GetAllPinPositions()
{
    foreach (var pinData in _pinDataList)
    {
        // Convert relative position back to actual image coordinates
        double actualX = pinData.RelativeX * _imageActualWidth;
        double actualY = pinData.RelativeY * _imageActualHeight;

        // Optional: Get position relative to the screen
        var screenPosition = TargetImage.TranslateToParent(new Point(actualX, actualY));

        Console.WriteLine($"Pin: Image Relative ({actualX:F2}, {actualY:F2}) | Screen Relative ({screenPosition.X:F2}, {screenPosition.Y:F2})");
    }
}

Method 2: Fetch Layout Bounds Directly #

If you don’t need to handle image scaling, you can directly get the pin’s bounds from the AbsoluteLayout:

// Get position for a specific pin
private void GetPinPosition(View pinMark)
{
    var layoutBounds = AbsoluteLayout.GetLayoutBounds(pinMark);
    // Calculate the pin's center point (since layout bounds are top-left)
    double pinCenterX = layoutBounds.X + (layoutBounds.Width / 2);
    double pinCenterY = layoutBounds.Y + (layoutBounds.Height / 2);

    // Convert to image-relative position
    var imageRelativePoint = TargetImage.TranslateFromParent(new Point(pinCenterX, pinCenterY));

    Console.WriteLine($"Pin Center (Image Relative): ({imageRelativePoint.X:F2}, {imageRelativePoint.Y:F2})");
}

内容的提问来源于stack exchange，提问作者Akram Talmoudi