Question

我有一个定义了几行的网格。这些行之一中是一个ScrollView。该ScrollView有一个内部带有单个Image的Grid，用作一个部分的BackGround Image。不管我做什么，我都无法在父网格内填充图像，AspectFill或AspectFit（我也尝试了StackView无效）。如果我取消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>
    <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的顶部并使其水平填充。但是，无论我尝试什么，除了垂直居中之外，我都无法使图像适合网格内的其他任何方式。如果我将Grid设置为图像的确切高度，则几乎可以使用它，但是在iOS和Android之间看起来有所不同。这看起来很简单吗？我想念什么？到目前为止，我已经在这方面浪费了时间。

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

Answer 1

我将背景图像放在滚动视图的外部（下方）。如果将两个元素放在网格的同一行/列中，它们将重叠。第一个孩子在Z堆栈的后面，第二个孩子放在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>

在ScrollView中时，图像无法进行宽高比调整

1 个答案: