I am confused by the behaviour of my TabBar in MAUI, and I am not sure I fully understand the issue yet.

From what I've observed, it seems that my Home tab gets redefined when I click on an item outside of the TabBar, which redirects to a NewView.

After navigating to this NewView, if I click on Home, I remain on NewView instead of being redirected back to the Home tab. Furthermore, if I click on a different tab, such as Profile, and then click on Home again, I am redirected to NewView rather than the Home tab.

Using the code below here is what happens:

Scenario that works:

1. As a user I land on Home page after loading the app
2. As a user I click on Scan, then Venue and Profile tabs, then click on Home, I am redirected to Home

Scenario that does not work:

1. As a user I land on Home page after loading the app

2. As a user I click on Venue in the Home page (but not the tab)

3. As a user I click on Home I am still on the previous venue page

From there, I have a hint that my home tab redirection is redifined by the previoulsy visisted page outside the tab element. I wanted to check if this was true, by going through the same process but then clicking on a tab and click on "home" again to see where I am redirected.

Scenario that does not work:

1. As a user I land on Home page after loading the app

2. As a user I click on Venue in the Home page (but not the tab)

3. As a user I click on any tab buttons (scan, venue profile) and I am succesfully rediected to the right tab

4. As a user I click on Home tab, I am redirected back to the Venue page I clicked on initially from the Home page outside the tab bar element.

As expected, after clicking on a page outside the tab element the home tab is now redirecting to this new page.

I am new to c# and MAUI in general. Is this an expected behaviour of tab elements? Is there a way to avoid this?

<TabBar>
    <!-- Home Tab with HomeViewcontent -->
    <Tab Title="Home" Icon="cat.png">
        <ShellContent ContentTemplate="{DataTemplate views:HomeView}" Route="home"/>
    </Tab>

    <!-- Scan Tab with ScanView -->
    <Tab Title="Scan" Icon="dog.png">
        <ShellContent ContentTemplate="{DataTemplate views:ScanView}" Route="scan" />
    </Tab>

    <!-- Profile Tab with ProfileView -->
    <Tab Title="Profile" Icon="dog.png">
        <ShellContent ContentTemplate="{DataTemplate views:ProfileView}" Route="profile" />
    </Tab>
</TabBar>

ScanView and ProfileView work perfectlt, howevever HomeView does not redirect the user to HomeView with the following return in the log Invalid ID 0x00000000..

In my AppShell.xml.cs

        public AppShell()
        {
            InitializeComponent();
            
            //routing

            Routing.RegisterRoute("home", typeof(HomeView));



#if ANDROID
            vm = new ShellVM(new AndroidLocationService());
                BindingContext = vm;
#endif

        }

I am confused by the behaviour of my TabBar in MAUI, and I am not sure I fully understand the issue yet.

From what I've observed, it seems that my Home tab gets redefined when I click on an item outside of the TabBar, which redirects to a NewView.

After navigating to this NewView, if I click on Home, I remain on NewView instead of being redirected back to the Home tab. Furthermore, if I click on a different tab, such as Profile, and then click on Home again, I am redirected to NewView rather than the Home tab.

Using the code below here is what happens:

Scenario that works:

1. As a user I land on Home page after loading the app
2. As a user I click on Scan, then Venue and Profile tabs, then click on Home, I am redirected to Home

Scenario that does not work:

1. As a user I land on Home page after loading the app

2. As a user I click on Venue in the Home page (but not the tab)

3. As a user I click on Home I am still on the previous venue page

From there, I have a hint that my home tab redirection is redifined by the previoulsy visisted page outside the tab element. I wanted to check if this was true, by going through the same process but then clicking on a tab and click on "home" again to see where I am redirected.

Scenario that does not work:

1. As a user I land on Home page after loading the app

2. As a user I click on Venue in the Home page (but not the tab)

3. As a user I click on any tab buttons (scan, venue profile) and I am succesfully rediected to the right tab

4. As a user I click on Home tab, I am redirected back to the Venue page I clicked on initially from the Home page outside the tab bar element.

As expected, after clicking on a page outside the tab element the home tab is now redirecting to this new page.

I am new to c# and MAUI in general. Is this an expected behaviour of tab elements? Is there a way to avoid this?

<TabBar>
    <!-- Home Tab with HomeViewcontent -->
    <Tab Title="Home" Icon="cat.png">
        <ShellContent ContentTemplate="{DataTemplate views:HomeView}" Route="home"/>
    </Tab>

    <!-- Scan Tab with ScanView -->
    <Tab Title="Scan" Icon="dog.png">
        <ShellContent ContentTemplate="{DataTemplate views:ScanView}" Route="scan" />
    </Tab>

    <!-- Profile Tab with ProfileView -->
    <Tab Title="Profile" Icon="dog.png">
        <ShellContent ContentTemplate="{DataTemplate views:ProfileView}" Route="profile" />
    </Tab>
</TabBar>

ScanView and ProfileView work perfectlt, howevever HomeView does not redirect the user to HomeView with the following return in the log Invalid ID 0x00000000..

In my AppShell.xml.cs

        public AppShell()
        {
            InitializeComponent();
            
            //routing

            Routing.RegisterRoute("home", typeof(HomeView));



#if ANDROID
            vm = new ShellVM(new AndroidLocationService());
                BindingContext = vm;
#endif

        }

• c#
• maui
• tabbar

• What's the Venue page? Do you register it in the shell？ – Liqun Shen-MSFT Commented Mar 25 at 1:49

2 Answers 2

You're defining the home route twice in this code. Once in AppShell.XAML, and once in the code behind. This can cause issues when navigating to the double registered route and using the back button. Any page in Shell tab bar is automatically registered as a route in the app.

Also, the venue page does not seem to be registered as a route.

Update your AppShell initialisation to account for this.

public AppShell()
{
    InitializeComponent();
    //routing
    Routing.RegisterRoute("Venue", typeof(VenueView));       
}

The above might be enough to solve your problem.

You might also find this snippet of code useful. Drop it into AppShell.xaml.cs. It ensures that you always go to the first page in the navigation stack for a clicked Tab item.

protected override void OnNavigating(ShellNavigatingEventArgs args)
    {
        base.OnNavigating(args);

        if (args.Source == ShellNavigationSource.ShellSectionChanged)
        {
            var navigation = Shell.Current.Navigation;
            var pages = navigation.NavigationStack;
            for (var i = pages.Count - 1; i >= 1; i--)
            {
                navigation.RemovePage(pages[i]);
            }
        }
    }

Something else to try would be moving the route from the ShellContent to the tab.

<Tab Title="Home" 
     Icon="cat.png"
     Route="home" >// <- Here
        <ShellContent ContentTemplate="{DataTemplate views:HomeView}" />
    </Tab>

When you navigate to a new view (like Venue) from within the Home view, you are essentially pushing that new view onto the navigation stack. When you then click on the Home tab, it does not automatically pop back to the Home view; instead, it remains on the last view that was active, which is Venue in your case. This is why you see the behavior where you remain on the Venue page instead of being redirected back to Home.

The behavior you are experiencing is expected in a navigation stack. By default, the tab navigation maintains its own stack of pages, and clicking on a tab does not reset that stack unless explicitly handled.

Here are a few approaches you can take to ensure that clicking on the Home tab returns you to the Home view:

Use Navigation Reset: When you click on the Home tab, you can reset the navigation stack to ensure it shows the Home view. You can do this in the Shell's CurrentPageChanged event.

protected override void OnNavigatingTo(NavigatingToShellEventArgs e)
{
    base.OnNavigatingTo(e);
    if (e.Target.Location.OriginalString == "home")
    {
        Shell.Current.GoToAsync("//home");
    }
}

Handle Tab Selection: You can handle the tab selection to check if the current view is the Home view and navigate accordingly. You can subscribe to the CurrentItemChanged event of the TabBar.

TabBar.CurrentItemChanged += (s, e) =>
{
    if (e.NewItem.Title == "Home")
    {
        Shell.Current.GoToAsync("//home");
    }
};