.NET Maui Tabs with Breadcrumb Navigation

Question

I was trying to make a tabbed view with a breadcrumb navigation, unfortunately the titles are not working the way they're supposed to.

When it seems like the NavigationStack is empty so the previous site title gets overwritten with the current title?

AppShell.xaml

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="WorkTime2.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:WorkTime2"
    xmlns:view="clr-namespace:WorkTime2.View"
    Shell.FlyoutBehavior="Disabled">
    <TabBar>
        <Tab Title="Home" Icon="icon_shell_dashboard.png" Route="Home">
            <ShellContent ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
        </Tab>
        <Tab Title="Employers" Icon="icon_shell_employer.png" Route="Employers">
            <ShellContent ContentTemplate="{DataTemplate view:EmployerPage}" Route="EmployerPage" />
        </Tab>
        <Tab Title="Settings" Icon="icon_shell_settings.png" Route="Settings">
            <ShellContent ContentTemplate="{DataTemplate view:SettingsPage}" Route="SettingsPage" />
        </Tab>
    </TabBar>
</Shell>

AppShell.xaml.cs

using WorkTime2.View;

namespace WorkTime2;

public partial class AppShell : Shell
{
    public AppShell()
    {
        Routing.RegisterRoute("EmployerPage/AddEmployerPage", typeof(AddEmployerPage));
        InitializeComponent();
    }
}

EmployerPage.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:controller="clr-namespace:WorkTime2.Controller"
             x:Class="WorkTime2.View.EmployerPage"
             Title="Employer">
    <ContentPage.BindingContext>
        <controller:EmployerController />
    </ContentPage.BindingContext>
    <ContentPage.ToolbarItems>
        <ToolbarItem IconImageSource="plus_icon.png" Command="{Binding CreateEmployer}" />
    </ContentPage.ToolbarItems>
    <ContentPage.Content>
    </ContentPage.Content>
</ContentPage>

AddEmployerPage.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:controller="clr-namespace:WorkTime2.Controller"
             x:Class="WorkTime2.View.AddEmployerPage"
             Title="Add Employer">
    <ContentPage.BindingContext>
        <controller:AddEmployerController />
    </ContentPage.BindingContext>
    <ContentPage.Content>
        
    </ContentPage.Content>
</ContentPage>

EmployerController.cs

using System.Windows.Input;
using WorkTime2.Core;

namespace WorkTime2.Controller;

public class EmployerController : ControllerBase
{
    public EmployerController()
    {
        CreateEmployer = new Command(execute: () =>
        {
            Shell.Current.GoToAsync("AddEmployerPage");
            Console.WriteLine("Add clicked!");
            
        }, canExecute: () => true);
    }
    
    public ICommand CreateEmployer { get; set; }
}

Does anyone have an idea how to fix it? Thanks!

I have tried different routing registrations, without the previous one, GoToAsync with / and //

EDIT: AddEmployerController.cs

using WorkTime3.Core;
using WorkTime3.View;

namespace WorkTime3.Controller;

public class AddEmployerController : ControllerBase
{
    private WorkTime3Database _db;
    public AddEmployerController()
    {
        _db = new WorkTime3Database();
        TestCommand = new Command(
            execute: () =>
            {
                Shell.Current.GoToAsync(nameof(AddTimePage)); 
            }, canExecute: () => true);
    }
    private string _title = "Add Employer";
    public string Title
    {
        get => _title;
        set => SetProperty(ref _title, value);
    }
    
    public ICommand TestCommand { get; set; }
}

Answer 1

For a TabBar navigation you could just use ShellContent. It handles most basic functionality like registering the page.

<?xml version="1.0" encoding="UTF-8"?>
    
<Shell
    x:Class="WorkTime2.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:WorkTime2"
    xmlns:view="clr-namespace:WorkTime2.View"
    Shell.FlyoutBehavior="Disabled">
    <TabBar>
        <ShellContent Title="Home" Icon="icon_shell_dashboard.png" 
                      ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
        <ShellContent Title="Employers" Icon="icon_shell_employer.png" 
                      ContentTemplate="{DataTemplate view:EmployerPage}" Route="EmployerPage" />
        <ShellContent Title="Settings" Icon="icon_shell_settings.png" 
                      ContentTemplate="{DataTemplate view:SettingsPage}" Route="SettingsPage" />
    </TabBar>
</Shell>