时间戳

首页 > 解决方案 > Xamarin Forms Image 具有 100% 的父容器宽度和自动高度以保持纵横比

xaml - Xamarin Forms Image 具有 100% 的父容器宽度和自动高度以保持纵横比

问题描述

是否可以Image在不裁剪的情况下将整个图像实际安装在该容器中，同时自动调整高度以保持纵横比，同时将其父容器的宽度设为 100%？

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

在 CSS 方面，我正在寻找的解决方案类似于

width:100%; height:auto;

在我看来，为这样一个微不足道的任务实现自定义渲染器对 Xamarin 来说是一种矫枉过正和巨大的尴尬。除非我理解错了。

标签： xamlxamarinxamarin.forms

解决方案

我无法找到解决此问题的纯 XAML 解决方案，因此决定使用ffimageloading的Success事件来找出加载图像的原始宽度和高度，并从这些值中获取纵横比，存储它，并在SizeAllocated事件中使用它来维护图像的纵横比，同时确保其宽度为父容器的 100%。

示例代码：

    private void testImage_OnSuccess(object sender, CachedImageEvents.SuccessEventArgs e)
    {
        var image = sender as CachedImage;
        double width = e.ImageInformation.OriginalWidth;
        double height = e.ImageInformation.OriginalHeight;

        ratio = width / height; // store it in a variable

    }


    protected override void OnSizeAllocated(double width, double height)
    {
        base.OnSizeAllocated(width, height);

        if (this.Width > 0 && ratio != 0) // width of the parent container
            testImage.HeightRequest = this.Width / ratio;
    }

推荐阅读