顶部对齐 Xamarin Forms 中的方面填充图像答案

【问题标题】：Top align an aspect filled image in Xamarin Forms顶部对齐 Xamarin Forms 中的方面填充图像
【发布时间】：2016-08-20 04:30:01
【问题描述】：

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

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

这里是 XAML

<StackLayout Spacing="20">

    <Image Source="darth.jpg" />

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

</StackLayout>

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

【问题讨论】：

可以通过依赖服务管理或缩放图像来实现。
您是否在创建问题时跳过复制 RowDefinitions 和 ColumnDefinitions？我不知道它是否与您的问题有关，但是没有这些的 Grid 似乎很奇怪。但也许更重要的是，您尝试过 RelativeLayout 吗？
只使用stacklayout
与父布局无关。我重新编写了问题以从问题中删除网格和自定义控件。这与图像控件处理宽高比和固定高度的方式有关。

标签： xamarin.forms

【解决方案1】：

如果您在图像上设置 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：

ScrollView 不应嵌套。 ScrollViews 不应该嵌套与其他提供滚动的控件，如 ListView 和 WebView。

【讨论】：

它在所有情况下都不能很好地工作。按预期在 iOS 上工作。但是，在 Android 上，它只有在源位图大于 Image 控件的宽度时才有效。如果它更小，它会以这样一种方式剪辑内容，即使滚动也无法查看所有内容。

【解决方案2】：

Xamarin.Forms Image 实现中没有代码，它用Aspect.AspectFill 调整图像的位置，所以这里有两种选择：

尝试使用HeightRequest="100" 在第二张图片周围添加额外的包装，并从中删除HeightRequest="100" 和Aspect="AspectFill"。
在此guide 之后为目标平台实现您自己的ImageRenderer。

【讨论】：

尝试添加额外的包装。没用。当图像控制高度小于实际图像高度时，可以肯定内置图像渲染器将图像居中。不幸的是，自定义渲染器似乎是要走的路。