Button appearing above page content for all pages on iOS tablet - .NET MAUI

Question

Hi, I have a .NET 8 MAUI app that I'm developing for Android and iOS. I have an issue where all of my pages are showing a blank space at the top with a button, but it's only doing that on iOS when on a tablet. My iPhone doesn't show it and neither does an android tablet.

My iPad is running iPadOS Version 18.2.1.

The button text is coming from AppShell.xaml. If I remove the title property from there or set it to empty it just shows the button without text. I've tried setting Shell.NavBarIsVisible="False" (I also tried setting this in AppShell.xaml.cs and in individual content page code behinds) but that didn't change anything.

AppShell.xaml:

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="Mobile.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ArtExplorer.Mobile"
    Shell.FlyoutBehavior="Disabled">
    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate local:MainPage}"
        Shell.NavBarIsVisible="False"/>
</Shell>

I've tried a few other things, but nothing has made a difference and I can't find anything for this subject when googling unfortunately.

Here's my code:

App.xaml.cs:

public partial class App : Application
{
    public App()
    {
        this.InitializeComponent();
        this.MainPage = new AppShell();
    }
}

MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
    public MainPage(LoginViewModel viewModel)
    {
        this.InitializeComponent();
        
        this.BindingContext = viewModel;
        Shell.SetNavBarIsVisible(this, false);
    }
}

MainPage.xaml:

<?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="Mobile.MainPage"
             xmlns:viewmodel="clr-namespace:Mobile.ViewModels"
             x:DataType="viewmodel:LoginViewModel">
    <ContentPage.Behaviors>
        <mct:StatusBarBehavior StatusBarColor="Green" />
    </ContentPage.Behaviors>
    <Grid>
        <Border>
            <Grid RowDefinitions="Auto" VerticalOptions="Center" HorizontalOptions="Center">
                <Button Grid.Row="0"
                    Style="{StaticResource LoginButton}"
                    Text="Sign in"
                    Command="{Binding LoginCommand}"/>
            </Grid>
        </Border>
    </Grid>
</ContentPage>

MainPage:

Another content page:

Any help to figure out what's going on and remove the "Home" button would be much appreciated. Thanks

Answer 1

Hello,

This is the new feature of iOS18. To avoid it, please customize shell renderer and refer to the following code:

AddHandler on MauiProgram.cs

                .ConfigureMauiHandlers( (handlers) => {
 
#if IOS
                    handlers.AddHandler(typeof(Shell), typeof(CustomShellRenderer));
#endif
}
                    ); 

CustomShellRenderer

 #if IOS
    public class CustomShellRenderer : ShellRenderer
    {
        protected override IShellItemRenderer CreateShellItemRenderer(ShellItem item)
        {
            var renderer = base.CreateShellItemRenderer(item);
 
            if (UIDevice.CurrentDevice.UserInterfaceIdiom == UIUserInterfaceIdiom.Pad && UIDevice.CurrentDevice.CheckSystemVersion(18, 0) && renderer is ShellItemRenderer shellItemRenderer)
                shellItemRenderer.TraitOverrides.HorizontalSizeClass = UIUserInterfaceSizeClass.Compact;
 
            return renderer;
        }
    }
#endif

In addition, there is a known issue reported at GitHub- Shell.TitleView is not replacing the Shell.Title on iOS 18 iPad only. · Issue #26114 · dotnet/maui, you could follow the progress.

Best Regards,

Wenyan Zhang

---

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.