Empty space between elements .NET MAUI

Question

The entire page is a grid. I'm trying to position a child grid on top of the parent grid. This works on Android. On Apple up to iPhone 14 too. On iPhones 14 and 15, the space between the parent and child grids is displayed.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mct="clr-namespace:CommunityToolkit.Maui.Behaviors;assembly=CommunityToolkit.Maui"
             x:Class="IOSMauiAppGroupsOneApp.NewPage1"
             Shell.BackgroundColor="{AppThemeBinding Light=#3856A8, Dark=#232234}"
             Shell.NavBarIsVisible="False"
             Title="NewPage1">
    <ContentPage.Behaviors>
        <mct:StatusBarBehavior StatusBarColor="{AppThemeBinding Light=#3856A8, Dark=#232234}" />
    </ContentPage.Behaviors>
    <Grid BackgroundColor="Red">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid Margin="0"
              Grid.Row="0"
              ColumnSpacing="16"
              Padding="16,12,16,12"
              HorizontalOptions="Fill"
              VerticalOptions="Start"
              BackgroundColor="{AppThemeBinding Light=#3856A8, Dark=#232234}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>
            <Button
                 Grid.Column="0"
                 Text="Сохранить"
                 BorderColor="White"
                 BackgroundColor="Transparent"
                 CornerRadius="8"
                 TextColor="White"/>
            <Image
                Grid.Column="3"
                Source="icon_folder.png"
                HorizontalOptions="EndAndExpand"
                VerticalOptions="Center"
                ToolTipProperties.Text="Открыть документ">
            </Image>
            <Image
                Grid.Column="2"
                HorizontalOptions="EndAndExpand">
            </Image>
        </Grid>
    </Grid>
</ContentPage>

Answer 1

Hello,

Thanks for your feedback.

After testing, this problem is caused by StatusBarBehavior. If you remove it from the code, this margin will not appear on iOS.

For issues with this plug-in control, it is more recommended that you report it to the official repository to make the development team aware of it.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.