Full Width Image in Modal Clipped by Navigation Bar

Issue

I am trying to create a full-width image inside a modal, but the image is going behind the navigation bar on some iOS devices.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MyApp.ModalWithFullWidthImage" 
             NavigationPage.HasNavigationBar="True">
    <ContentPage.Content>
        <StackLayout Grid.Column="0" Grid.Row="0" >
            <Image Source="fullWithImage" Aspect="AspectFill" />
        </StackLayout>
    </ContentPage.Content>
</ContentPage>

The problem is on iPhone 11: the navigation bar blocks the top of the image. The image appears as if it is behind the navigation bar. On iPhone 8, the image is fine.

I need the image to maintain its aspect but go edge-to-edge on the width. The height can be variable and can be cutoff on smaller devices.

I am hoping to find a solution that just uses Xaml. I have seen solutions that adjust the image in the codebehind, but I have to believe there is a simpler solution or workaround.

Solution

Try to add HorizontalOptions and VerticalOptions with FillAndExpand:

<StackLayout>
    <!-- Place new controls here -->
    <Image Source="Images" Aspect="AspectFill" HorizontalOptions="FillAndExpand"
   VerticalOptions="FillAndExpand"/>
</StackLayout>

Refer: Image with AspectFill and xamarin-forms-image-fill-width-with-proper-aspect

Answered By - nevermore