Blazor Hybrid unknown Margin / padding

Question

hi i build a dotnet maui hybrid app with blazor web view and razor components

i try to make the blazor web view fill the screen and status bar white but i get a small gap on the top of the page and i dont know how to solv it

here is the xaml page

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:toolkit="http://schemas.microsoft.com/dotnet/2022/maui/toolkit"
        xmlns:local="clr-namespace:BNext.NativeClient"
        xmlns:pages="clr-namespace:BNext.NativeClient.Components.Pages"
        xmlns:sharedPages="clr- 
 namespace:BNext.GuiShared.Pages;assembly=BNext.GuiShared"
        x:Class="BNext.NativeClient.MainPage"
        BackgroundColor="{DynamicResource PageBackgroundColor}"
        Padding="0">

<ContentPage.Behaviors>
    <toolkit:StatusBarBehavior StatusBarColor="White" StatusBarStyle="DarkContent" />
</ContentPage.Behaviors>
<Grid BackgroundColor="Red" Padding="0" Margin="0">
    <BlazorWebView HostPage="wwwroot/index.html" Margin="0">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type local:Components.Routes}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</Grid>

</ContentPage>

Answer 1

I can reproduce the issue and the issue is caused by setting the status bar color either via iOS platform or using .NET MAUI toolkit, there is a gap between the Blazor WebView and the status bar. See [BUG] Blazor Hybrid white gap/field below status bar #19778

To fix it, you can add the below code in your MainpPage.xaml.cs:

using Microsoft.Maui.Platform;
#if IOS

using UIKit;

#endif

namespace MauiAppHybridApp
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

        protected override void OnHandlerChanged()
        {
            base.OnHandlerChanged();
#if IOS

            var window = this.GetParentWindow()?.Handler?.PlatformView as UIWindow;

            if (window is not null)
            {
                var topPadding = window?.SafeAreaInsets.Top ?? 0;
                var statusBar = new UIView(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, topPadding))
                {
                    BackgroundColor = Colors.White.ToPlatform()
                };

                var view = this.Handler?.PlatformView as UIView;
                if (view is not null)
                {
                    view?.AddSubview(statusBar);

                }
            }
#endif
        }
    }
}