Xamarin.Forms：在BindableLayout中将图像大小调整为父对象的宽度

如何解决Xamarin.Forms：在BindableLayout中将图像大小调整为父对象的宽度

我正在尝试将Image的大小调整为BindableLayout中父容器的宽度，但是我没有找到实现此目的的方法。

我基于其他topic来实现这一目标。

我首先尝试将Image嵌入到Grid容器中，如下所示：

<StackLayout x:Name="NewsList"
             BindableLayout.ItemsSource="{Binding News}">
    <BindableLayout.ItemTemplate>
        <DataTemplate>
            <Frame>
                <Grid Padding="0" Margin="0"
                      VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"
                      BackgroundColor="Red">
                    <Image Source="{Binding Image}" Aspect="AspectFit"/>
                </Grid>
                <Label Text="Description" />
            </Frame>
        </DataTemplate>
    </BindableLayout>
</StackLayout

=>，但我们可以看到图像周围出现红色条纹（在顶部/底部，或在左侧/右侧）：

然后，我尝试像这样使用CachedImage中的FFImageLoading：

<Grid Padding="0" Margin="0"
        HorizontalOptions="FillAndExpand"
        VerticalOptions="FillAndExpand"
        BackgroundColor="Orange">
    <ffimageloading:CachedImage Source="{Binding Image}"
                    HorizontalOptions="Fill"
                    VerticalOptions="Fill"
                    Aspect="AspectFill"
                    DownsampletoViewSize="True"/>
</Grid>

=>，但在这种情况下，图像不完全可见或被截断

=>那么还有另一种方法可以让我在父容器的整个宽度上显示图像，并保持原始比例吗？

更新1：

显示的图像来自Facebook帖子。这是显示的第四张图像：

更新2：

我已经尝试了@Leo给出的解决方案：

<StackLayout Orientation="Vertical" x:DataType="model:News">
    <Image Source="{Binding Image}" Aspect="AspectFill"/>
    <Label Text="Description" />
</StackLayout>

但是由于第一张和第四张图片被截断，结果仍然不理想：

解决方法

我下载了图片并按照下面的方法进行操作，您可以检查一下：

<StackLayout x:Name="NewsList" BackgroundColor="Red"
         BindableLayout.ItemsSource="{Binding News}">
     <BindableLayout.ItemTemplate>
            <DataTemplate>
                    <StackLayout Orientation="Vertical">
                        <Image Source="{Binding .}" Aspect="AspectFill"/>
                        <Label Text="Description" />
                    </StackLayout>
                </DataTemplate>
     </BindableLayout.ItemTemplate>
</StackLayout>

效果如下：

我终于找到了对我here有效的解决方案，这是 Frankvans 提供的解决方案：

class ImageFit : Image {
    protected override SizeRequest OnMeasure(double widthConstraint,double heightConstraint) {
        SizeRequest sizeRequest = base.OnMeasure(double.PositiveInfinity,double.PositiveInfinity);

        var innerRatio = sizeRequest.Request.Width / sizeRequest.Request.Height;

        if (double.IsNaN(innerRatio))
            return sizeRequest;

        // Width needs to be adjusted
        if (double.IsInfinity(heightConstraint)) {
            // Height needs to be adjusted
            if (double.IsInfinity(widthConstraint)) {
                widthConstraint = sizeRequest.Request.Width;
                heightConstraint = sizeRequest.Request.Height;
            } else {
                // Adjust height
                heightConstraint = widthConstraint * sizeRequest.Request.Height / sizeRequest.Request.Width;
            }
        } else if (double.IsInfinity(widthConstraint)) {
            // Adjust width
            widthConstraint = heightConstraint * sizeRequest.Request.Width / sizeRequest.Request.Height;
        } else {
            // strech the image to make it fit while conserving it's ratio
            var outerRatio = widthConstraint / heightConstraint;

            var ratioFactor = (innerRatio >= outerRatio) ?
                (widthConstraint / sizeRequest.Request.Width) :
                (heightConstraint / sizeRequest.Request.Height);

            widthConstraint = sizeRequest.Request.Width * ratioFactor;
            heightConstraint = sizeRequest.Request.Height * ratioFactor;
        }
        sizeRequest = new SizeRequest(new Size(widthConstraint,heightConstraint));
        return sizeRequest;
    }
}