.NET MAUI中获取AbsoluteLayout内自适应图片的真实尺寸

核心问题原因 #

你遇到的Width/Height返回窗口尺寸的问题，是因为AbsoluteLayout的LayoutFlags设置为All或SizeProportional时，图片的布局尺寸是基于父容器的比例约束，直接访问Width/Height拿到的是布局约束值，而非最终渲染后的实际尺寸。

具体解决方案 #

1. 监听图片的SizeChanged事件获取真实渲染尺寸

布局完成后，图片的实际渲染尺寸会通过SizeChanged事件返回，这时候拿到的Width和Height才是准确的。

XAML示例：

<AbsoluteLayout x:Name="MainAbsoluteLayout">
    <Image x:Name="MainImage" 
           Source="main_image.png"
           AbsoluteLayout.LayoutFlags="All"
           AbsoluteLayout.LayoutBounds="0,0,1,1"
           SizeChanged="MainImage_SizeChanged"/>
</AbsoluteLayout>

后台代码：

private double _mainRenderWidth;
private double _mainRenderHeight;
// 存储原始图片尺寸
private double _mainOriginalWidth;
private double _mainOriginalHeight;

private void MainImage_SizeChanged(object sender, EventArgs e)
{
    if (sender is Image img)
    {
        _mainRenderWidth = img.Width;
        _mainRenderHeight = img.Height;
        
        // 首次加载时获取原始图片尺寸
        if (_mainOriginalWidth == 0 && img.Source is FileImageSource fileSrc)
        {
            using var stream = File.OpenRead(fileSrc.File);
            var bitmap = SKBitmap.Decode(stream);
            _mainOriginalWidth = bitmap.Width;
            _mainOriginalHeight = bitmap.Height;
        }
    }
}

2. 计算缩放比例，转换小图片定位坐标

拿到原始尺寸和渲染尺寸后，计算缩放因子，就能把基于原始图片的坐标转换成AbsoluteLayout中的布局坐标：

// 假设小图片要放在原始图片的(150, 250)位置，原始宽高60x60
double scaleX = _mainRenderWidth / _mainOriginalWidth;
double scaleY = _mainRenderHeight / _mainOriginalHeight;

// 转换为AbsoluteLayout中的实际布局参数
double targetX = 150 * scaleX;
double targetY = 250 * scaleY;
double targetWidth = 60 * scaleX;
double targetHeight = 60 * scaleY;

// 创建并添加小图片
var smallImg = new Image { Source = "small_image.png" };
AbsoluteLayout.SetLayoutBounds(smallImg, new Rect(targetX, targetY, targetWidth, targetHeight));
AbsoluteLayout.SetLayoutFlags(smallImg, AbsoluteLayoutFlags.None);
MainAbsoluteLayout.Children.Add(smallImg);

3. 是否需要切换到Canvas？

如果只是叠加少量图片元素，用上述方法配合AbsoluteLayout完全能解决问题，没必要切换。如果需要大量动态绘制、复杂图形交互，Canvas会更灵活，但学习成本和代码复杂度会更高。

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