Place Image at top of screen

ChrisMcBride.2625ChrisMcBride.2625 USUniversity ✭✭

How can I place an image at the top of the screen, such that it fills the width, and the height is whatever it needs to be?
Right now it feels like AspectFill and AspectFit don't do what I expect them to do.

I've got an Image in a grid:
<Grid> <Image Source='image.png' Aspect='AspectFit'/> </Grid>

I set Aspect and VerticalOptions and got different results:

Aspect='AspectFit' the image appears how I want it (image extends from one side to the other), but it is vertically centered.|
Aspect='AspectFit' VerticalOptions="Start" then the image appears at the top of the screen, but it is original size (doesn't fill the width)|
Aspect='AspectFill' then the Image fills the screen. Since the image is close to square, it means the image is stretched (so much for maintain the Aspect)
Aspect='AspectFill' VerticalOptions="Start" then the image is full width (extends from left side to right side) but the bottom portion is clipped. The height is the same as the original height.

If I stick the Image (with AspectFit set) inside a StackLayout (I figured I could use a boxview to force the image to the top) (with both Vertical and Horizontal Options set to FillandExpand) then the image is shown at the top of the page it is regular size.
If I change the Aspect to AspectFill, also in the StackLayout then the image is full width but cropped at the bottom to its original height.

It seems like it is impossible to enlarge a photo to the width of the screen, keep the aspect ratio, and show it at the top of the screen.

So far I've only test this using Xamarin Forms on Android.


  • DhruvGohilDhruvGohil USMember ✭✭
    edited April 2017

    <Grid VerticalOptions="Start"> <Image Source='image.png' Aspect='AspectFit'/> </Grid>

    Hope this help !!

  • ChrisMcBride.2625ChrisMcBride.2625 USUniversity ✭✭

    Thanks, that shows me something different, but not what I want.
    Now the image is larger, and is not cutoff at the bottom, but the image isn't the full width of the screen.
    And the other side of my Grid (I want to overlay some stuff on the image) now is only the size of the image.

    I actually want the Grid to have Vertical and Horizontal Options set to FillAndExpand (which is the default when Grid is at the root, isn't it?)
    In fact this is about the only time I can get the image to show up how I want, just not where I want.

  • RodeKubaiziRodeKubaizi USMember ✭✭

    did you figure it out?

Sign In or Register to comment.