Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 77050

Image Will Not Aspect Fit/Fill While Inside ScrollView

$
0
0

I'm having a real hard time trying to figure out this problem and I'm hoping someone can help.

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!


Viewing all articles
Browse latest Browse all 77050

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>