图像在 ScrollView 内时不适合/填充

Posted 2023-02-26

【中文标题】图像在 ScrollView 内时不适合/填充

【英文标题】：Image Will Not Aspect Fit/Fill While Inside ScrollView

【发布时间】：2018-06-21 13:19:38

【问题描述】：

我有一个定义了几行的网格。在这些行之一中是单个 ScrollView。那个 ScrollView 有一个 Grid，里面有一个 Image 用作一个部分的一种背景图像。无论我做什么，我都无法在父网格中填充图像、AspectFill 或 AspectFit（我也尝试过 StackView 无济于事）。如果我消除 ScrollView 并将 Grid 和 Image 拉出，则 Image 将适合或填充就好了。

这是我正在做的一个精简示例：

<Grid ColumnSpacing="0" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="48"/>
        <RowDefinition Height="4"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0"> ... </Grid>
    <Grid Grid.Row="1"> ... </Grid>
    <ScrollView Orientation="Vertical" HorizontalOptions="FillAndExpand" 
        VerticalOptions="FillAndExpand" Grid.Row="2">
            <Grid HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <!-- THIS IMAGE WILL NOT FILL! -->
                <Image Source="local:EmbeddedImage  Project.Mobile.Images.fieldBackground.png" Aspect="Fill" />
            </Grid>
    ... More Code ...
    </ScrollView>
</Grid>

无论我做什么，图像都不会填充网格父级。如果我删除 ScrollView，它可以像这样正常工作，但是如果没有 ScrollView，我就无法做到这一点，因为我在下面有更多内容无法显示在屏幕上。

<Grid ColumnSpacing="0" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="48"/>
        <RowDefinition Height="4"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0"> ... </Grid>
    <Grid Grid.Row="1"> ... </Grid>
    <Grid Grid.Row="2" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
    <!-- THIS IMAGE FILLS FINE! -->
        <Image Source="local:EmbeddedImage  Project.Mobile.Images.fieldBackground.png" Aspect="Fill" />
    </Grid>
</Grid>

作为一种解决方法，我尝试不调整/填充图像，而是将其锚定在网格的顶部并让它水平填充。但是无论我尝试什么，除了垂直居中之外，我无法让图像以任何其他方式适合网格内。如果我将 Grid 设置为图像的确切高度，它几乎可以工作，但它在 ios 和 android 之间看起来不同。这似乎是一件很简单的事情？我错过了什么？到目前为止，我已经在这上面浪费了几个小时。

谢谢， 任何帮助表示赞赏！

【参考方案1】：

我会将背景图像放在滚动视图之外（下方）。 如果将两个元素放在网格的同一行/列中，它们将重叠。 第一个孩子在 Z 堆栈的后面，第二个孩子放在它上面，依此类推。

<Grid ColumnSpacing="0" RowSpacing="0">
    <Grid.RowDefinitions>
        <RowDefinition Height="48"/>
        <RowDefinition Height="4"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Grid Grid.Row="0"> ... </Grid>
    <Grid Grid.Row="1"> ... </Grid>

    <Image Grid.Row="2" Source="local:EmbeddedImage  Project.Mobile.Images.fieldBackground.png" Aspect="Fill"  />

    <ScrollView Orientation="Vertical" HorizontalOptions="FillAndExpand" 
        VerticalOptions="FillAndExpand" Grid.Row="2">

        ... Insert your elements here ...
    </ScrollView>
</Grid>

【讨论】：

欣赏评论。我实际上确实需要背景图像来滚动滚动视图的内容。它具有特定的设计，其他数据元素位于顶部和下方，而其他元素没有任何背景。