[Android] Shell BackButtonBehavior binding Command to valid ICommand causes back button to disappear

[rjygraham]

Description

Binding to a valid ICommand on Shell.BackButtonBehavior causes back button to disappear on Android (maybe iOS as well, no idea on Windows since it is not currently supported).

Steps to Reproduce

1. File -> New .NET MAUI App
2. Create multi-page Shell App
3. On SecondPage create BackButtonBehavior and bind Command to a valid ICommand on the BindingContext:

   <Shell.BackButtonBehavior>
     <BackButtonBehavior
         Command="{Binding BackCommand}"
         IsEnabled="True"
         IsVisible="True">
         <BackButtonBehavior.IconOverride>
             <FontImageSource FontFamily="OpenSansSemibold" Glyph="&#x2039;" />
         </BackButtonBehavior.IconOverride>
     </BackButtonBehavior>
   </Shell.BackButtonBehavior>

4. Run the app and navigate to SecondPage
5. Observe back button is not visible
6. While app is still running, use Hot Reload to change the BackButtonBehavior Command binding to invalid ICommand and observe the back button appears but does nothing since binding is invalid

RC3 reproduction repo can be found here: https://github.com/rjygraham/MauiShellNav

Reproduction video can be found here: https://raw.githubusercontent.com/rjygraham/MauiShellNav/main/videos/BackButtonBehavior.mp4

Version with bug

Release Candidate 3 (current)

Last version that worked well

Unknown/Other

Affected platforms

Android, I was not able test on other platforms

Affected platform versions

Android 11

Did you find any workaround?

None yet

Relevant log output

No response

[v-longmin]

Verified repro on Android 12.0 with VS 17.3.0 Preview 1.0 [32427.505.main]. Repro project: MauiShellNav-main.zip

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[espenrl]

The same happens on .NET 7 SR 1.

[mikkpaasuke]

Still an issue. This leaves some particular navigation requirements for a client of mine dead in the water.

[Zhanglirong-Winnie]

Verified this issue with Visual Studio Enterprise 17.7.0 Preview 5.0. Can repro on android platform with sample project. MauiShellNav-main.zip

[dainius-r]

Same on .NET 8. Anyway to work around this, because now back button behavior simply not works? @PureWeen

[jankalfus]

Happens on both Android and iOS. The button is actually there, as it’s clickable, but it’s invisible.

Update: I’ve managed to fix it in my case on iOS, the solution was to set Shell.ForegroundColor on ContentPage. Apparently, the default color was the same as the bar’s background, so the button was invisible.

But it’s still an issue on Android, the button is invisible, even when Shell.TitleColor is set to black:

https://github.com/dotnet/maui/assets/12714276/799e38bf-e2f2-4b69-950e-f0210f479cd4

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:viewModels="clr-namespace:Xpens.ViewModels"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="Xpens.Views.AddExpensePage"
             Shell.ForegroundColor="Black"
             Shell.TabBarIsVisible="False"
             Title="Add expense"
             Shell.TitleColor="Black">
    <ContentPage.BindingContext>
        <viewModels:AddExpenseViewModel />
    </ContentPage.BindingContext>
    <Shell.BackButtonBehavior>
        <BackButtonBehavior TextOverride="My expenses" />
    </Shell.BackButtonBehavior>

[albyrock87]

This is a workaround to fix the color: handlers.AddHandler<Shell, PatchedShellRenderer>();

https://github.com/nalu-development/nalu/blob/main/Samples/Nalu.Maui.Sample/Platforms/Android/PatchedShellRenderer.cs

Which also explains the source of the bug.