如何在 Xamarin.forms C# 中相对于图像的特定位置放置标签？

Question

I need my Xamarin app to display an image and place labels at very specific positions. I have:

• the image file name,
• the image size in pixels
• the labels' coordinates in pixels
• the labels' contents.

The labels must be placed correctly regardless of the shape of the screen, like pinpoints and names of places on a map.

The XAML just defines the empty myRelativeLayout and places it in a grid.

This is the corresponding c# file. It doesn't work. The labels seem to position themselves relatively to the layout rather than the image itself.

public partial class MyPage : ContentPage
{
    public MyPage()
    {
        InitializeComponent();

        Image myImage = new Image()
        {
            Source = ImageSource.FromFile(MainImagePath))
        };

        myRelativeLayout.Children.Add(myImage, () => myRelativeLayout.Bounds);

        foreach (Tag ft in ImageTags)
        {
            Label lb = new Label
            {
                Text = ft.TagContent,
                BackgroundColor = Color.FromHex("0x40000000"),
                TextColor = Color.White,
                FontSize = 10
            };

            Constraint ccx = Constraint.RelativeToView(myImage, (p, s) => { return s.Width * ft.X / fp.MainImage.Width; });
            Constraint ccy = Constraint.RelativeToView(myImage, (p, s) => { return s.Height * ft.Y / fp.MainImage.Height; });

            myRelativeLayout.Children.Add(lb, xConstraint: ccx, yConstraint: ccy);
        }

    }
}

In a different XAML I was able to make it work statically using {ConstraintExpression ...} for the constraints.

Answer 1

我通过使用 Skiasharp 库而不是布局和标签来解决这些问题。