在 Xamarin Forms 中顶部对齐纵横比填充图像

Question

更新：我简化了示例和代码并提供了一张图片

我有一个包含两张图片的堆栈布局。第一张图片只是为了显示整个图像。第二张图片的高度固定，图片纵横比设置为 AspectFill。我看到第二张图片的中间部分，但想看到顶部。有什么办法可以实现吗？

这是XAML

<StackLayout Spacing="20">

    <Image Source="darth.jpg" />

    <Image Source="darth.jpg"
           HeightRequest="100"
           Aspect="AspectFill" />

</StackLayout>

这是它的样子。我希望第二张图片显示图片的顶部，而不是中间部分。

Answer 1

Xamarin.FormsImage实现中没有代码，用Aspect.AspectFill调整图片的位置，所以这里有两个选择：

尝试用 HeightRequest="100" 在第二张图片周围添加一个额外的环绕，并从中删除 HeightRequest="100" 和 Aspect="AspectFill"。
按照此 guide.

ImageRenderer

Answer 2

如果您在图像上设置 HeightRequest，这将导致 Xamarin.Forms 进行裁剪，您似乎无能为力。但是，如果您将其包装在 HeightRequest 为 100 的 ScrollView 中，它将按您的需要呈现：

var image = new Image()
{
    Source = "darth.jpg",
    Aspect = Aspect.AspectFill
};
var imageWrap = new ScrollView()
{
    HeightRequest = 100,
    Content = image
};

这增加了用户可以滚动浏览图像的功能。根据上下文，这可能是不可取的。另外，根据 Xamarin documentation:

ScrollViews should not be nested. ScrollViews should not be nested with other controls that provide scrolling, like ListView and WebView.

在 Xamarin Forms 中顶部对齐纵横比填充图像

Top align an aspect filled image in Xamarin Forms

xamarin.forms