Search code examples
c#xamarinxamarin.formsbottombar

How to not display icon on nav bar with xamarin.forms?

I would like to have a bottom navbar on my app. But when I use tabbed page, the content that is displayed in the app must be one of tabs on the nav bar. 

<TabbedPage>

    <TabbedPage.Children>

        <!--<NavigationPage Title="test" IsVisible="False">
            <x:Arguments>
            <ContentPage>
                <Label Text="Not display this on nav bar but show its content page"/>
            </ContentPage>
            </x:Arguments>
        </NavigationPage>-->

        <NavigationPage Title="{x:Static Resource:AppResource.PaginaInicialTitulo}" Icon="homeBlack.png">
            <x:Arguments>
                <views2:ComoTeSentesPage/>
            </x:Arguments>
        </NavigationPage>

        <NavigationPage Title="{x:Static Resource:AppResource.CalendarioTitulo}" Icon="calendarBlack.png" BarBackgroundColor="White">
            <x:Arguments>
                <views:PaginaInicial/>
            </x:Arguments>
        </NavigationPage>

        <NavigationPage Title="{x:Static Resource:AppResource.ConviteTitulo}" Icon="phoneBlack.png">
            <x:Arguments>
                <views:PaginaInicial/>
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

I want to display a diferent content for the page instead of the content of one of the selected tabs. By doing this, the nav bar could be visible on every page of the app and the content show for each page to not be linked to tabs content.

EDIT: In this picture it's show my goal. There is bottom navigation bar but none of the tabs are selected and the content displayed is not related to any of the tabs in the navigation bar. enter image description here But in my project, the content displayed in the page is always related to one of the tabs in the navigation bar.Content displayed is related to one of the bas in the nav bar

Solution

  • I write a simple demo base on the navigation-inside-a-tab sample.

    1. I make the tabbar bottom by adding:

      xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
android:TabbedPage.IsSwipePagingEnabled="False"
android:TabbedPage.ToolbarPlacement="Bottom"

    2. I changed todayPage into a carousel-page.

    3. I also added a navigation behavior in the todayPage.

    I upload it to Github and you can download: tabbedPage-Naviagtation-CarousePage

    Here is the result:

    result