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.