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>
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
}
}
}