Proper Navigation Between Tabs in Xamarin.Forms

Question

Like the user in this thread this thread, I wanted a Flyout menu but with tabbed navigation - so I added Tabs to my first Flyout Item. In my tabs, I want to use C# to navigate to other tabs - but when I do so with await Navigation.PushAsync(new TabIWantToGoTo());, my app doesn't actually navigate to that next tab, it stays on the current tab and creates a new instance of that page within it.

My question is - how can I recreate the exact functionality of a user selecting a given tab? I want that tab have its tab icon highlighted and I don't want a separate instance with a back button on my current tab. Here are some images of the issue:

Image of Tab 1

Image of Tab 2, navigated to via the above C# command - You'll see that Tab 1 is still selected and now there is a back button. I'd like, ideally for there to be no back button and for Tab 2 to be selected just like a user would expect when selecting Tab 2 by touch event.

Image of Tab 2, selected by manual user input - No back button, Tab 2 is properly highlighted and Tab 1 is now unhighlighted

Thanks!

set the `CurrentPage` property of the `TabbedPage` – Jason Jun 16 '22 at 19:24 — Jason, Jun 16 '22 at 19:24
I think the template project in VS2019 can do this too. – Shaw Jun 16 '22 at 20:31 — Shaw, Jun 16 '22 at 20:31

score 1 · Accepted Answer · answered Jun 17 '22 at 01:57

According to the images, your project is a shell app. So you can try to set the Shell.Current.CurrentItem in the page.cs. Such as:

In the AppShell.xaml:

<FlyoutItem Title="About" Icon="icon_about.png">
    <Tab Title="One">
       <ShellContent Route="AboutPage" ContentTemplate="{DataTemplate local:AboutPage}" />
    </Tab>
    <Tab Title="Two">
        <ShellContent Route="ItemsPage" ContentTemplate="{DataTemplate local:ItemsPage}" />
    </Tab>
</FlyoutItem>

And then I go to the Items Page in the AboutPage.cs:

Shell.Current.CurrentItem = Shell.Current.Items[0].Items[1];
//the first Items is the FlyoutItems and the second Items is the Tabs in the FlyoutItems
//So this line code is go to page which is the first FlyoutItem's second shell content.

You can check the official document:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/tabs#tab-selection

Does this solve your problem?@Anubis4574 – Liyun Zhang - MSFT Jun 17 '22 at 08:48 — Liyun Zhang - MSFT, Jun 17 '22 at 08:48

Proper Navigation Between Tabs in Xamarin.Forms

1 Answers1