How to Navigate to a certain TabbedPage from TapGesture or Button press

Question

The Goal: While within a tabbed page I have a frame and a frame tap gesture, while selecting within the frame tap gesture I would like it to navigate to the proper tabbed page as if selecting the tabbed page.

I have tried various navigation methods however they will either have a top back button or not show the bottom tabs, or will not update the lower menu navigation, or will have me go to mainpage and have the first tab selected.

I have a MainPage with 5 tabbed pages.

Example of how my tabbed pages are setup: (using views: in xaml to select the page).

<NavigationPage Title="Offers">
            <NavigationPage.Icon>
                <OnPlatform x:TypeArguments="FileImageSource">
                    <On Platform="iOS" Value="tab_offers.png"/>
                    <On Platform="Android" Value="tab_offers.png"/>
                </OnPlatform>
            </NavigationPage.Icon>
            <x:Arguments>
                <views:OffersPage />
            </x:Arguments>
        </NavigationPage>

The code used to get the tap gesture within the frame.

<Frame BackgroundColor="Green" HeightRequest="32" WidthRequest="112" Padding="0" CornerRadius="8" HasShadow="False">

  <Frame.GestureRecognizers>
     <TapGestureRecognizer Tapped="TapGestureRecognizer_OfferPage" /
  </Frame.GestureRecognizers>

  <Label Text="Earn Now" TextColor="White" FontSize="14" HorizontalOptions="Center" VerticalOptions="Center" FontAttributes="Bold"/>
</Frame>

Currently the navigation method I am using is the following:

private async void TapGestureRecognizer_OfferPage(object sender, EventArgs e)
        {

            await Navigation.PushModalAsync(new NavigationPage(new MainPage()));            

        }

Essentially, I believe there should be a way to select the tabbed page index or the tabbed page from MainPage. However not sure how to implement it properly.

With the above code it will navigate me back to MainPage however to the first loaded tab. I need it to be on the 4th tab or OffersPage.

Any assistance would be appreciated.

Lucas Zhang Lucas Zhang · Accepted Answer · 2020-03-06T05:22:59

If you want to navigate between 5 tab pages , you could use MessagingCenter .

in TabbedPage

public MyTabbedPage()
{
   InitializeComponent();

   MessagingCenter.Subscribe<Object, int>(this, "click", ((arg, idx) => {

        // idx the index of pages in tabbed that you want to navigate

        CurrentPage = this.Children[idx];

   }));




}

And send the message when tap the frame

 MessagingCenter.Send<object, int>(this,"click",2);// if you want to navigation to the third page .

How to Navigate to a certain TabbedPage from TapGesture or Button press

2 Answers