How to display TabbedPage in all the screens in Xamarin forms?

Question

I am showing bottom tabs in Xamarin forms using TabbedPage. For that I have added the child pages (Page1,Page2,Page3) programatically to the TabbedPage. First I have login screen, onclick of Login button it will redirect to tabbed page and will show all the three tabs at the bottom.

There are other pages(Page4,Page5) that we are not showing as child pages in tabbed page. But as per the requirement when user opens page4 or page5 the bottom tab bar should show.

Overall what I mean is the bottom tab bar should show to all the screens in the application even though some of the screens are not the children of the TabbedPage.

Could anyone please tell me how to achieve this task. Thanks in advance.

that's not how it works. If you want the tab bar to show, the page needs to be contained within the tabbed page — Jason
yes Jason you are right..but as per my requirement we need to show the bottom tab bar to each and every screen even though that screen is not the part of the tab. In order to achieve this can you tell any alternative solution for this. Thank you. — user1448108
yes, tell whoever is writing the requirements that they need to obey standard UX conventions — Jason
Thank you for confirming me Jason. I will inform to the requirements team. — user1448108

Mateus Henrique Mateus Henrique · Accepted Answer · 2021-03-15T19:06:24

You can wrap TabbedPage's children within NavigationPages, so that when you navigate to another page from one of those tabs they will still appear:

<?xml version="1.0" encoding="UTF-8" ?>
<TabbedPage
    x:Class="SampleTabbedPage.Views.MainPage"
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:views="clr-namespace:SampleTabbedPage.Views;assembly=SampleTabbedPage"
    NavigationPage.HasNavigationBar="False">

    <!-- Page 1 -->
    <NavigationPage IconImageSource="ic_home">
        <x:Arguments>
            <views:HomePage />
        </x:Arguments>
    </NavigationPage>

    <!-- Page 2 -->
    <NavigationPage IconImageSource="ic_profile">
        <x:Arguments>
            <views:ProfilePage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

In code behind:

var tabbedPage = new TabbedPage();
tabbedPage.Children.Add(new NavigationPage(new Page1()));
tabbedPage.Children.Add(new NavigationPage(new Page2()));
tabbedPage.Children.Add(new NavigationPage(new Page3()));

Then you can just call from one of the child pages:

await Navigation.PushAsync(new YourNewPage());

How to display TabbedPage in all the screens in Xamarin forms?

1 Answers