Title view not displayed after navigating shell tabs

[tdeborde2]

Description

While adding a title view to a new .NET MAUI shell application with a bottom tab bar, I noticed that the title view is removed after returning to first tab. This has only been verified on iOS and macOS.

Repository containing sample project

Steps to Reproduce

1. Create new .NET MAUI project
2. Create new Content View (XAML) and set as shell title view.
3. Add a tab bar and two tabs to the AppShell.xaml.
4. Launch app and navigate to second tab and return to the first tab.

Version with bug

6.0.486 (current)

Last version that worked well

Unknown/Other

Affected platforms

iOS, macOS

Affected platform versions

iOS 15, macOS 12.3.1

Did you find any workaround?

No response

Relevant log output

No response

[tdeborde2]

#9687

[tdeborde2]

After testing on Android, I found that the TitleView is not displayed on the second tab but is still present when navigating back to the first tab.

[HNordhaus]

I can confirm this happens on Android, too.
And there is a difference between .NET 6 and .NET 7:
6: Icons in the Navigation Bar remain visible, but TapGestureRecognizers do no longer work
7: The Title View is completely clear

This is a really critical issue, as long as there is no workaround.

[tdeborde2]

I have found a workaround. By wrapping the shell in a navigation page, the title view is no longer affected by shell tab navigation.

A few things I will mention, this will place the TitleView above the Flyout menu if flyout items are used and the Shell is no longer accessible using Shell.Current. In order to access the shell, I set the shell to a static property in App.xaml.cs, so I can still navigate using routes by calling App.Shell.GoToAsync("//...").

Hopefully this will be resolved soon. The title bar above the menu items is not ideal in my case and I'd rather not have the Shell accessible as a static property in my App class.

I have added an example to the repro project but the steps are listed below.

1. In App.xaml.cs set MainPage to a new Navigation Page with AppShell set as root.

public App()
{
    InitializeComponent();

    Shell = new AppShell();
    MainPage = new NavigationPage(Shell);
}

2. In AppShell.xaml set the Navigation.TitleView to the custom TitleView.

<Shell
    x:Class="ShellNavPageTitleView.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:ShellNavPageTitleView"
    NavigationPage.TitleView="{StaticResource TitleView}">
    ...
</Shell>

[LennoxP90]

@tdeborde2, I like your workaround except for the following:

it doesn't have a back button when you navigate into a sub shell like /page1/page1details
i utilize this using the original titleview off of Shell works great in Android iOS not at all

I am sure i can implement something like this manually, but an official fix from Microsoft would be better appreciated sooner than later.

[vhugogarcia]

@tdeborde2, I like your workaround except for the following:

it doesn't have a back button when you navigate into a sub shell like /page1/page1details

i utilize this using the original titleview off of Shell works great in Android iOS not at all

I am sure i can implement something like this manually, but an official fix from Microsoft would be better appreciated sooner than later.

You can try the solution posted here. I hope it helps 🙂👍🏻

#9687 (comment) 👈🏻