Xamarin 形成具有 100% 父容器宽度和自动高度的图像以保持纵横比

Question

是否可以获取Image其父容器的 100% 宽度，同时实际上将整个图像放入此容器中而无需裁剪，并且自动调整高度以保持宽高比？

我在 SO 和 Xamarin 论坛上读过类似的问题，但显然如果不实现自定义渲染器或在代码中手动计算正确的大小，这是无法完成的。但要在代码中计算此值，您需要图像尺寸或纵横比。对于在 head 之前都不知道这些的应用程序，这是一个问题。

就 CSS 而言，我正在寻找的解决方案类似于

width:100%; height:auto;

在我看来，为如此琐碎的任务实现自定义渲染器对于 Xamarin 来说是一种矫枉过正和巨大的尴尬；除非我理解有误。

Answer 1

我长期以来一直在寻找这个问题的答案。正如其他人所指出的，我没有找到仅 Xaml 的解决方案。我选择了一条不同的路线，并向那些可能认为它有启发性的人展示我的解决方案，并将其作为更改 FFImageLoading 以正确解决此问题的种子。

我创建了 CachedImage 的子类并重写了 OnMeasure。为了使 CachedImage.OnMeasure 在宽高比模式（而不是填充模式）下工作，它必须返回与底层图像的比例相匹配的 SizeRequest。因此，我选择的解决方案只是使用提供的 widthConstraint 并将高度计算为 widthConstraint / 比率。此描述仅解决多种情况之一：widthConstraint 不是无穷大，并且希望回答此处提出的具体问题（100% 的宽度和自动高度）。

实现这种情况的子类：

public class CachedImage2 : CachedImage
{
    protected override SizeRequest OnMeasure(double widthConstraint, double heightConstraint)
    {
        var sr = base.OnMeasure(widthConstraint, heightConstraint);
        if (sr.Request.IsZero)
            return sr;

        var ratioWH = sr.Request.Width / sr.Request.Height;
        var sr2 = new SizeRequest(new Size(widthConstraint, widthConstraint / ratioWH));
        return sr2;
    }
}