[FIXED] Full Width Image in Modal Clipped by Navigation Bar


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"
        <StackLayout Grid.Column="0" Grid.Row="0" >
            <Image Source="fullWithImage" Aspect="AspectFill" />

enter image description here

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.


Try to add HorizontalOptions and VerticalOptions with FillAndExpand:

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

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

Answered By – nevermore

Answer Checked By – Gilberto Lyons (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published