Image Will Not Aspect Fit/Fill While Inside ScrollView

Question

I have a Grid with a few Rows defined. Within one of those rows is a single ScrollView. That ScrollView has a Grid with a single Image inside that's used as a sort of BackGround Image for one section. No matter what I do I cannot get the Image to Fill, AspectFill or AspectFit inside the Parent Grid (I have also tried a StackView to no avail). If I eliminate the ScrollView and pull the Grid and Image out the Image will Fit or Fill just fine.

Here is a stripped down example of what I'm doing:

<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>

No matter what I do the Image will not Fill the Grid Parent. If I remove the ScrollView it works just fine like this but I cannot do this without a ScrollView because I have more content directly below that cannot fit on the screen.

<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>

As a workaround I attempted to not aspect fit/fill the image but to anchor it at the top of the Grid and let it fill horizontally. But I cannot get the image to fit any other way inside the Grid besides centered vertically no matter what I try. If I make the Grid the exact height of the image it almost works but it looks different between iOS and Android. This seems like such a simple thing? What am I missing? I've wasted hours on this so far.

Thanks, Any help is appreciated!

GiampaoloGabba GiampaoloGabba · Accepted Answer · 2018-06-21T13:41:45

I would put the background image outside (below) the scrollview. If you put both elements inside the same row/column in a grid, they will overlap. The first child is at the back of the Z stack, the second child is placed above it, and so on.

<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>

Image Will Not Aspect Fit/Fill While Inside ScrollView

1 Answers