Empty space between elements .NET MAUI

Влад Тигинян 40 Reputation points
2024-04-19T07:41:18.8766667+00:00

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.Screenshot_1

<?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>
.NET MAUI
.NET MAUI
A Microsoft open-source framework for building native device applications spanning mobile, tablet, and desktop.
2,984 questions
C#
C#
An object-oriented and type-safe programming language that has its roots in the C family of languages and includes support for component-oriented programming.
10,390 questions
XAML
XAML
A language based on Extensible Markup Language (XML) that enables developers to specify a hierarchy of objects with a set of properties and logic.
772 questions
0 comments No comments
{count} votes

Accepted answer
  1. Yonglun Liu (Shanghai Wicresoft Co,.Ltd.) 37,111 Reputation points Microsoft Vendor
    2024-04-22T03:02:34.9166667+00:00

    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.


0 additional answers

Sort by: Most helpful