I have the following issue that appears when using an iPhone 16.

The MAUI App is NOT using shell if that might be useful in any way...

There is a full MAUI example project here

Explanation

The problem seems not to appear on iPad or any Android devices, but on all iPhones that have the bigger status bar at the top.

I am using the CommunityToolkit.Maui Version 9.0.3 to colorize the StatusBar.

Here is a snippet from my csproj to see what Nuget Packages I am using:

<ItemGroup>
    <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
    <PackageReference Include="CommunityToolkit.Maui" Version="9.0.3" />
    <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="9.0.0" />
</ItemGroup>

And this is my MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns=";
             xmlns:x=";
             xmlns:toolkit=";
             NavigationPage.HasBackButton="False"
             NavigationPage.HasNavigationBar="False"
             x:Class="MauiApp1.MainPage">
    <ContentPage.Behaviors>
        <toolkit:StatusBarBehavior
            StatusBarColor="#BE0C24"
            StatusBarStyle="LightContent"/>
    </ContentPage.Behaviors>
    <Grid BackgroundColor="Yellow">
        <Label VerticalOptions="Start" BackgroundColor="Green" Text="^^^ I want to get rid of that yellow space ^^^"/>
    </Grid>
</ContentPage>

What I tried so far

On googling I found several entries that seem to have a similar issue and all providing a similar workaround on overriding the OnAppearing like this:

protected override void OnAppearing()
        {
            base.OnAppearing();

#if IOS
            // Workaround for iPhone 14: 

            if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
            {
                var window = UIKit.UIApplication.SharedApplication.Windows.FirstOrDefault();
                var topPadding = window?.SafeAreaInsets.Top ?? 0;

                var statusBar = new UIView(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, topPadding))
                {
                    BackgroundColor = Colors.Green.ToPlatform()
                };

                var view = UIApplication.SharedApplication.Windows.FirstOrDefault(x => x.IsKeyWindow);
                view?.AddSubview(statusBar);
            }

#endif
        }

Sadly adding this to my code changes NOTHING.

I also tried disabling the safe space like in this post

• .NET MAUI, ios UseSafeArea not working StackLayout, VerticalStackLayout and Grid

But adding IgnoreSafeArea="True" to the grid ignores (big surprise) the status bar safe space completely and it looks like this:

I think the solution must be either shifting the label to the top of the grid somehow OR enlarge the red area...

I am still wondering why a grid even adds that kind of padding, but even setting padding to 0 has no effect.

I now don't know what else to try...

Edit 1

tried using

<Grid RowDefinitions="Auto, *" BackgroundColor="Orange">
    <Label VerticalOptions="Start" BackgroundColor="Green" Text="^^^ I want to get rid of that yellow space ^^^"/>
    <VerticalStackLayout Background="Yellow" Grid.Row="1">
        <Label VerticalOptions="Start" Text="rest of page here"/>
    </VerticalStackLayout>
</Grid>

as suggested by Isidoros Moulas but this is the outcome on iPhone 16 Simulator

I have the following issue that appears when using an iPhone 16.

The MAUI App is NOT using shell if that might be useful in any way...

There is a full MAUI example project here

Explanation

The problem seems not to appear on iPad or any Android devices, but on all iPhones that have the bigger status bar at the top.

I am using the CommunityToolkit.Maui Version 9.0.3 to colorize the StatusBar.

Here is a snippet from my csproj to see what Nuget Packages I am using:

<ItemGroup>
    <PackageReference Include="Microsoft.Maui.Controls" Version="$(MauiVersion)" />
    <PackageReference Include="CommunityToolkit.Maui" Version="9.0.3" />
    <PackageReference Include="Microsoft.Extensions.Logging.Debug" Version="9.0.0" />
</ItemGroup>

And this is my MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft/winfx/2009/xaml"
             xmlns:toolkit="http://schemas.microsoft/dotnet/2022/maui/toolkit"
             NavigationPage.HasBackButton="False"
             NavigationPage.HasNavigationBar="False"
             x:Class="MauiApp1.MainPage">
    <ContentPage.Behaviors>
        <toolkit:StatusBarBehavior
            StatusBarColor="#BE0C24"
            StatusBarStyle="LightContent"/>
    </ContentPage.Behaviors>
    <Grid BackgroundColor="Yellow">
        <Label VerticalOptions="Start" BackgroundColor="Green" Text="^^^ I want to get rid of that yellow space ^^^"/>
    </Grid>
</ContentPage>

What I tried so far

On googling I found several entries that seem to have a similar issue and all providing a similar workaround on overriding the OnAppearing like this:

protected override void OnAppearing()
        {
            base.OnAppearing();

#if IOS
            // Workaround for iPhone 14: https://developer.apple/forums/thread/715417

            if (UIDevice.CurrentDevice.CheckSystemVersion(13, 0))
            {
                var window = UIKit.UIApplication.SharedApplication.Windows.FirstOrDefault();
                var topPadding = window?.SafeAreaInsets.Top ?? 0;

                var statusBar = new UIView(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, topPadding))
                {
                    BackgroundColor = Colors.Green.ToPlatform()
                };

                var view = UIApplication.SharedApplication.Windows.FirstOrDefault(x => x.IsKeyWindow);
                view?.AddSubview(statusBar);
            }

#endif
        }

Sadly adding this to my code changes NOTHING.

I also tried disabling the safe space like in this post

• .NET MAUI, ios UseSafeArea not working StackLayout, VerticalStackLayout and Grid

But adding IgnoreSafeArea="True" to the grid ignores (big surprise) the status bar safe space completely and it looks like this:

I think the solution must be either shifting the label to the top of the grid somehow OR enlarge the red area...

I am still wondering why a grid even adds that kind of padding, but even setting padding to 0 has no effect.

I now don't know what else to try...

Edit 1

tried using

<Grid RowDefinitions="Auto, *" BackgroundColor="Orange">
    <Label VerticalOptions="Start" BackgroundColor="Green" Text="^^^ I want to get rid of that yellow space ^^^"/>
    <VerticalStackLayout Background="Yellow" Grid.Row="1">
        <Label VerticalOptions="Start" Text="rest of page here"/>
    </VerticalStackLayout>
</Grid>

as suggested by Isidoros Moulas but this is the outcome on iPhone 16 Simulator

• c#
• ios
• iphone
• xaml
• maui

Share Improve this question Follow edited Apr 2 at 8:46 CrazyEight asked Mar 12 at 14:20 CrazyEightCrazyEight 48788 silver badges2727 bronze badges 7

• Did you test it on the physical device? – Guangyu Bai - MSFT Commented Mar 18 at 1:21
• Its on both, simulator and physical. All devices that have the "dynamic island" so from iPhone 14 Pro upwards. My current (hacky) solution for this is figuring out if the device has a dynamic island by reading the height property of the status bar using UIKit like so UIKit .UIApplication.SharedApplication.StatusBarFrame.Height == 54 (on iPhone devices without dynamic island the height is 47) and then applying a negative top-margin (-10) to the content of the grid. Im not proud of it but it does the job for now – CrazyEight Commented Mar 18 at 8:31
• did you ever find a fix for this in the end it seems to be an issue i am also facing – Dean Beckerton Commented Apr 7 at 7:53
• No I am currently fixing that by identifying if the device has a dynamic island and if it has I add a negative top margin of 16 to the first element in the grid – CrazyEight Commented Apr 7 at 8:18
• i tried that but you can see the space when the page first loads up and then it vanished which is still not ideal how did you do it so the user cannot see the flash where the gap decreases? – Dean Beckerton Commented Apr 7 at 8:32

 |  Show 2 more comments

4 Answers 4

Sorted by: Reset to default 0

Have you tried setting the vertical options on the grid itself?

<Grid VerticalOptions="Start" BackgroundColor="Yellow">
        <Label VerticalOptions="Start" BackgroundColor="Green" Text="^^^ I want to get rid of that yellow space ^^^"/>
    </Grid>

Ok after some more research I found that this might have been fixed with CommunityToolkit.Maui version 11.0.0
https://github/CommunityToolkit/Maui/releases/tag/11.0.0
or
https://github/CommunityToolkit/Maui/pull/2309

This requires .NET 9

I am currently still bringing my .NET 8 Project to .NET 9 so I could not test this

EDIT

Tested... Problem still remaining.
I'm about to go crazy here

What if you try a workaround like this?

<Grid BackgroundColor="Yellow">
   <Label Margin="0,-5,0,0" VerticalOptions="Start" BackgroundColor="Green" Text="^^^ I want to get rid of that yellow space ^^^"/>
</Grid>

EDIT

Another work around is the below. I suppose the bottom green may be an issue but it depends on the final layout of your app.

<Grid RowDefinitions="Auto, *"  BackgroundColor="Green" >
    <Label Grid.Row="0" VerticalOptions="Start" BackgroundColor="Green" Text="^^^ I want to get rid of that yellow space ^^^"/>

    <VerticalStackLayout Background="Yellow" Grid.Row="1">
        <Label VerticalOptions="Start" Text="rest of page here"/>
    </VerticalStackLayout>
</Grid>

Hope that helps

I ended up creating a partial helper class with ios and android implementations. The helper class has two methods. One method gets the height of the SafeAreaInsets top value and the other method gets the status bar height. Then on the OnAppearing method of the page I call the method to get the safe area inset top value. If it is non zero I then call the method to get the status bar height. I then set the padding of the page on the top to -(safe area top - status bar height) which covers the little padding line.

public static partial class LayoutHelper

{

    #region LayoutHelper Members
 
    public static partial double GetSafeAreaTopHeight()

    {

        double safeAreaTopHeight = 0;
 
        if( UIDevice.CurrentDevice.CheckSystemVersion( 11, 0 ) )

        {

            UIWindow window = UIApplication.SharedApplication.Delegate.GetWindow();

            safeAreaTopHeight = window != null

                ? window.SafeAreaInsets.Top

                : 0;

        }
 
        return safeAreaTopHeight;

    }
 
    public static partial double GetStatusBarHeight()

    {

        return UIApplication.SharedApplication.StatusBarFrame.Height;

    }
 
    #endregion LayoutHelper Members
 
}
 

protected override void OnAppearing()
{
    base.OnAppearing();
 
    var safeAreaTopHeight = LayoutHelper.GetSafeAreaTopHeight();
    if( safeAreaTopHeight != 0 )
    {
        var statusBarHeight = LayoutHelper.GetStatusBarHeight();
        Padding = new Thickness( Padding.Left, -(safeAreaTopHeight - statusBarHeight), Padding.Right, Padding.Bottom );
    }
}