Windows AppShell Title is overlaying on itself

[Eronan]

Description

When the NavigationStack has 2 or more items, and the ModalStack has 1 item. The AppShell will create another copy of its Window Title and attempt to overlay itself over itself causing the Title to be unreadable.

Steps to Reproduce

1. Create a new .NET Maui App Project.
2. Add the following code to the end of OnCounterClicked on MainPage

if (Navigation.NavigationStack.Count > 1)
{
    await Navigation.PushModalAsync(new MainPage());
}
else
{
    await Navigation.PushAsync(new MainPage());
}

3. Click on the button twice, such that the NavigationStack has 2 items and the ModalStack has 1 item.
4. 

Link to public reproduction project repository

https://github.com/Eronan/NavigationOverlayIssue

Version with bug

8.0.20 SR4

Is this a regression from previous behavior?

Not sure, did not test other versions

Last version that worked well

Unknown/Other

Affected platforms

Windows

Affected platform versions

net8.0-windows10.0.19041.0

Did you find any workaround?

Using INavigation.PushModalAsync(new NavigationPage(new ModalPage())); instead of using shell navigation

Relevant log output

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• Shell navigation with modal page does not show title view (#21321), similarity score: 0.80

Closed similar issues:

• Navigation bar overlaps title bar when replacing MainPage for a maui Windows App (#10710), similarity score: 0.81
• [Shell][iOS] Page Title is wrong when navigating (#14434), similarity score: 0.79
• [Shell] [WinUI] TitleView always shows ShellContent title, even if it's set. (#6148), similarity score: 0.79
• Windows Navigation Bar does not display Title and/or ToolbarItems Correctly (#5887), similarity score: 0.78

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[Foda]

Hmmm... I'm having difficulty reproducing this issue. Could you provide me a stand-alone sample with the problem?

Here's what I've tried to test with:

MainPage.cs:

public MainPage()
{
	InitializeComponent();
	this.Loaded += MainPage_Loaded;
}

private void MainPage_Loaded(object? sender, EventArgs e)
{
	this.Window.Title = "Main Page";
}

private async void Button_Clicked(object sender, EventArgs e)
{
	if (Navigation.NavigationStack.Count > 1)
	{
		await Navigation.PushModalAsync(new MainPage());
	}
	else
	{
		await Navigation.PushAsync(new MainPage());
	}
}

I've tried using both NavigationPage and Shell as the Window root page.

[Eronan]

https://github.com/Eronan/NavigationOverlayIssue

Created a separate repository, project, and solution file.

[Eronan]

The workaround used in this Bug will also remove the duplicate heading at the top of the AppShell.

[Foda]

For a workaround, just remove the default Page style in Styles.xaml. That seems to be the source of the problem.

[sasharp]

It may happen, if there is Flyout. For this case workaround to hide it:

AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
...
Navigated="shell_Navigated"
...

AppShell.xaml.cs

    private void shell_Navigated(object sender, ShellNavigatedEventArgs e) {
        if (GetPresentationMode(CurrentPage) == PresentationMode.Modal ||
            GetPresentationMode(CurrentPage) == PresentationMode.ModalAnimated ||
            GetPresentationMode(CurrentPage) == PresentationMode.ModalNotAnimated)
        {
            SetFlyoutBehavior(this, FlyoutBehavior.Disabled);
        }
        else
        {
            SetFlyoutBehavior(this, FlyoutBehavior.Flyout);
        }
    }

You wont see overlapping if you have the same Title on pages. More difficult it is if you have multiple modals.