TabbedPage selectedItem doesn't change when change tab programmatically to tab in "More"

Question

I am working on a Xamarin Forms app with a TabbedPage which has 6 tabs.

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         xmlns:tabs="clr-namespace:TabbedPageIssue"
         xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
         android:TabbedPage.ToolbarPlacement="Bottom"
         android:TabbedPage.IsSwipePagingEnabled="False"
         android:TabbedPage.BarSelectedItemColor="#F79320"
         android:TabbedPage.BarItemColor="#B1B2B3"
         x:Class="TabbedPageIssue.MainPage">
 <tabs:Tab1 Title="Tab1"/>
 <tabs:Tab2 Title="Tab2"/>
 <tabs:Tab3 Title="Tab3"/>
 <tabs:Tab4 Title="Tab4"/>
 <tabs:Tab5 Title="Tab5"/>
 <tabs:Tab6 Title="Tab6"/>
</TabbedPage>

In my app, I want to have a button to direct the app to a tab "inbox" in the "More" part with this code:

private void Button_Clicked(object sender, EventArgs e)
     {
         var mainPage = this.Parent as TabbedPage;
         mainPage.CurrentPage = mainPage.Children[4];
     }

When i click the button to change tab, the View changes but the "More" tab is not selected, and if i click on tab1, the view of tab 5 doesn't disappear.

This seems to be a bug of TabbedPage. Everybody has any idea to fix this problem?

Answer 1

I was able to reproduce this issue. For workaround, you could use Shell tabs instead. For the latest version of VS, when you create a Tabbed template, it is using Shell. https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/

Xaml：

<?xml version="1.0" encoding="UTF-8"?>
<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
   xmlns:local="clr-namespace:App3.Views"
   Title="App3"
   x:Class="App3.AppShell">   

<TabBar>

    <ShellContent Title="Tab1"   ContentTemplate="{DataTemplate  local:Page1}" />
    <ShellContent Title="Tab2"   ContentTemplate="{DataTemplate  local:Page2 }" />
    <ShellContent Title="Tab3"   ContentTemplate="{DataTemplate  local:Page3 }" />
    <ShellContent Title="Tab4"   ContentTemplate="{DataTemplate  local:Page4}" />
    <ShellContent Title="Tab5" Route="page5"   ContentTemplate="{DataTemplate  local:Page5 }" />
    <ShellContent Title="Tab6"  ContentTemplate="{DataTemplate  local:Page6 }" />

</TabBar>
</Shell>

Navigating from Page1 to Page5:

 async void Button_Clicked(object sender, EventArgs e)
    {
        await Shell.Current.GoToAsync("//page5");//page5 is the route i set in xaml
    }

OutPut: