Navigation bar background color bug when navigating in a specific manner

[Elmigo]

Description

When navigating in a specific way between three pages, the navigation bars' background color changes to a darkish gray color that is defined nowhere within my application.

The setup of my pages: I have 3 pages. The first page (A) has a list of A-items. The second page (B) has a list of B-items. The third page (C) allows to create new B-items to show on page B. Both pages A and B can navigate to C. The only difference is: B navigates to C directly, but A navigates to C using an absolute path via B (absolute path: /B/C). So whenever you hit the back button on C you'll always and up on page B and you won't get back to A again.

The problem that occurs: When I navigate from B to C and then back to B, nothing interesting happens. However, when I navigate from A to (absolute path) /B/C and then back to B, the navigation bars background color changes to a darkish gray color. In other words, when navigating using Shell, this is what happens exactly:

B > C > (backto)B = no problem A > B/C > (backto)B = unintended navigation bar color change

After the navigation bars color has changed, navigating away from the current page (B) and then back to the current page again will reset the color back to normal. The color change is not permanent throughout the apps lifecycle and is merely a temporary thing, while on the page. Possibly XAML failing to load the color when navigating back, causing it to use the "fall back" gray color instead. Either way, using the navigation bars default back button or a <Button/> element in XAML to go back to B, both create the same result. It does not make any difference. The grey "bug" color is defined nowhere within my application. It does seem to occur only when using shell tabs.

Visual representation: (notice the title bar color)

Further information: The default Shell.BackgroundColor defined in Styles.xaml, provided by a brandnew .NET MAUI project, is not the color that the navigation bar changes into. When I remove this Shell background color, the navigation bar on all pages change to this "bug" color, regardless of the navigation sequence.

The "bug" color also is not defined within the (Android) platform-specific resources values either. It seems like there is some sort of fall back color defined, somewhere outside of my project and outside of my control.

Steps to Reproduce

1. Create a File > New .NET MAUI App
2. Add three pages (or two minus the MainPage)
3. Add buttons to all three pages
4. Create events or commands (I'm using MVVM) for all buttons
5. Use events/commands to navigate from A to (absolute path) /B/C

Link to public reproduction project repository

https://github.com/Elmigo/NET_MAUI_Bug_titleBarBackgroundColor

Version with bug

7.0.86

Last version that worked well

Unknown/Other

Affected platforms

At least on Android. I am currently unable to test on iOS

Affected platform versions

Android, all versions. Issue also exists on Android 11 Go Edition (other Android Go versions not tested).

Did you find any workaround?

No workaround has been found yet.

Relevant log output

No response

[Elmigo]

Did anybody find a workaround or manage to reproduce this problem? It seems to be quite rare.

[XamlTest]

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0. Repro on Android 13.0-API33 and Windows 11 .NET 8, not repro on iOS 16.4 with below Project: TitleBarBgColor.zip

[vy-shmal]

I have the same problem , when the user redirects to the MainPage after the user validation , the title bar changes to the color the issue mentions. If I close the android application , it starts with correct color.

Here is the photo of the wrong color

Here is the code that redirects to the MainPage

Shell.Current.Navigating -= Current_Navigating;
MainThread.BeginInvokeOnMainThread(async () =>
{
    Shell.Current.Navigating -= Current_Navigating;        
    await Shell.Current.Navigation.PopToRootAsync(false); 
});

Same onEmulator (Pixel 5) and Local Android Device Xiaomi Note 7. Microsoft Visual Studio Community 2022 (64-bit) - Current Version 17.6.5

[vecalion]

I wonder if anyone has a workaround for this issue?

[Elmigo]

So I guess nobody has found a workaround?

It still happens in the latest VS22 after updating. It happens as soon as I navigate back multiple pages. Assuming you're on page (route) 'A/B/C/D' and you want to go back multiple pages, it does not matter whether I use '..' to go back like: await Shell.Current.GoToAsync("../..", true); or actually use the page names to navigate from the bottom page upward on the navigation stack like: await Shell.Current.GoToAsync($"//{nameof(PageA)}/{nameof(PageB)}", true); Both produce the same bugged navigation bar result.

[bcaceiro]

I am also facing this issue. No idea where the color comes from. Starting the application again, the color doesn't appear.

[bcaceiro]

This still happens in latest net 8 SR ( 8.0.90) and .net9 rc2

[Elmigo]

This still happens in latest net 8 SR ( 8.0.90) and .net9 rc2

I figured that popping to root first and then navigating to the desired page, did solve the issue for my current MAUI 8 project. So I updated from NET MAUI 7 right to NET MAUI 8 to begin with. Previously this workaround was ineffective.

Please note that I haven't been able to test a lot of different occasions yet, if there are any...

So instead of this:

await Shell.Current.GoToAsync($"//{nameof(DesiredPage)}", true);

I would navigate like this:

await Shell.Current.Navigation.PopToRootAsync(false);
await Shell.Current.GoToAsync($"//{nameof(DesiredPage)}", true);

Note that I have set the animation parameter for PopToRootAsync to false, so backwards navigation animation is not that obvious.

Hope this helps at least some of you having the same issue.