CODEWITHSUNDEEP
androidiosxamarin.forms
innomotion media
innomotion media

Reputation: 922

Xamarin.Forms: iOS 11 Layout is rendered BEHIND the notch

I just started making crossplattform apps with Xamarin.Forms. I got most things to run smoothly but the iOS 11 is giving me a headache:

I was just playing around with this layout:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:d="http://xamarin.com/schemas/2014/forms/design"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             mc:Ignorable="d"
             x:Class="App1.MainPage"

             BackgroundImageSource="magda.jpg" 
             >


    <ContentPage.Content>
        <Grid>
            <Image
            HorizontalOptions="FillAndExpand"
            VerticalOptions="Center"
            Aspect="AspectFill"
            Source="magda.jpg" />
            <StackLayout
                HorizontalOptions="FillAndExpand"
                VerticalOptions="FillAndExpand">
                <Entry x:Name ="xaml_Username" Placeholder="Username" TextColor="#FFFFFF" PlaceholderColor="#FFFFFF"  />
                <Entry x:Name ="xaml_Password" IsPassword="true" Placeholder="Password" />
                <Button x:Name="xaml_Ok" Text="Ok" />
            </StackLayout>
        </Grid>
    </ContentPage.Content>

</ContentPage>

It Includes a background image, two textboxes (named entry here) and an Button with an "OK" on it.

Those all work and render fine on any phone, iOS or Android. Only on the iOS Version 11 it looks like this:

enter image description here

While the filed "Password" is clearly visible, the filed "Username" isnt. It is supposed to be ontop.

I believe that this super modern "notch" is hiding it.

How can I upate my layout code to get the layout to start rending just underneath the notch, but leave every other iOS and Android version untouched? It is probably just a property in the code somewhere.

Thank you!

Upvotes: 0

Views: 373

Answers (2)

Ganesan VG
Ganesan VG

Reputation: 176

Use UseSafeArea property using platform specific code like below,

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="com.Sample.ContentPage"
             xmlns:iOS="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
             iOS:Page.UseSafeArea="True">

Upvotes: 1

Alec
Alec

Reputation: 464

It seems that you don't have the conent in the "Safe area". For short:

<ContentPage ...
         ios:Page.UseSafeArea="true">

This article explains briefly what the problem is: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/platform/ios/page-safe-area-layout

Upvotes: 1

Related Questions