Problem with image in grid row with auto height getting cropped

Hi,

I am having real problems laying out my screen in Xamarin Forms.

Basically, I have used a Grid layout for my screen and it contains a combination of images and other controls.

The two top rows of the grid contain images.

The first grid row has its height set to "auto" and the second row has its height set to "*"

The source images are stored in their respective platform resource folders.

I am wanting the images to fit the width of the screen (less a little bit of padding) but then obviously adjust their height to maintain aspect ratio.

The problem I have is with the first image. It's height just gets cropped all the time, not matter what combination of VerticalOptions, HorizontalOptions and Aspect I use.

Here is my code:-

<ContentPage.Padding>
 <OnPlatform x:TypeArguments="Thickness"
 iOS="20, 40, 20, 20"
 Android="20, 20, 20, 20"
 WinPhone="20, 20, 20, 20" />
 </ContentPage.Padding>
 <ContentPage.Content>
 <Grid>
 <Grid.RowDefinitions>
 <RowDefinition Height="Auto" />
 <RowDefinition Height="*" />
 <RowDefinition Height="Auto" />
 <RowDefinition Height="Auto" />
 <RowDefinition Height="Auto" />
 <RowDefinition Height="Auto" />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="*"/>
 <ColumnDefinition Width="*"/>
 </Grid.ColumnDefinitions>
 <Frame Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Padding="0,5,0,5" >
 <Image Source="logotext.png" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" />
 </Frame>
 <Frame Grid.Column="0" Grid.Row="1" Grid.ColumnSpan="2" Padding="0,5,0,5">
 <Image Source="logo.png" Aspect="AspectFill" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"/>
 </Frame>
 <Frame Grid.Column="0" Grid.Row="2" Padding="0,5,5,5">
 <Entry Keyboard="Text" Placeholder="First Name"/>
 </Frame>
 <Frame Grid.Column="1" Grid.Row="2" Padding="5,5,0,5">
 <Entry Keyboard="Text" Placeholder="Surname"/>
 </Frame>
 <Frame Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="2" Padding="0,5,0,5">
 <Entry Keyboard="Email" Placeholder="Email Address"/>
 </Frame>
 <StackLayout Grid.Column="0" Grid.Row="4" Grid.ColumnSpan="2" Orientation="Horizontal" HorizontalOptions="Center" Padding="0,5,0,5">
 <Label Text="Subscribe me to the Newsletter" VerticalOptions="Center" FontSize="Medium"/>
 <Switch VerticalOptions="Center"/>
 </StackLayout>
 <Frame Grid.Column="0" Grid.Row="5" Grid.ColumnSpan="2" Padding="0,5,0,5">
 <Button Text="Continue" WidthRequest="100" HeightRequest="50" x:Name="ContinueButton" FontSize="Large"/>
 </Frame>
 </Grid>

Apologies that the code is not formatted nicely, but I cannot find out how to do it when posting

Here is the sort of thing I would expect to see :-

****

And here is what I am actually seeing:-

It seems that the auto row height is being restricted by the original height of the image and the row height isn't adjusting automatically to accommodate the resized image.

I have trawled the forums and the web but cannot find a definitive answer to how to deal with this and have also tried every combination of settings.

If anyone could give me any advice to stop me tearing my hair out, it would be very much appreciated.

Kind Regards

Simon