How can i use a Bottom Navigation Bar and a Toolbar

Hello, I want to use a Bottom Navigation Bar and a Toolbar in Xamarin with Cross Platform (iOS and Android). I know how to make a Toolbar or an Navigation Bar, but my App should be able to do both. Thank you in advance

Best Answers

  • LandLuLandLu Xamurai
    Accepted Answer

    You can use the TabbedPage:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page
    The tabbar on iOS is at the bottom side as default. However, you need to set the TabbedPage.ToolbarPlacement to make it aligns at the bottom on Android.
    If you want to display the top toolbar you also need to use a navigation page like:

    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 x:Class="App.CustomTabbedPage"
                 xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
                 android:TabbedPage.ToolbarPlacement="Bottom">
      <!--Pages can be added as references or inline-->
        <NavigationPage Title="Tab 1">
            <x:Arguments>
                <ContentPage Title="Page">
                    <ContentPage.ToolbarItems>
                        <ToolbarItem Text="Add"/>
                    </ContentPage.ToolbarItems>
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    
        <NavigationPage Title="Tab 2">
            <x:Arguments>
                <ContentPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage>
    

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai
    Accepted Answer

    You can use the TabbedPage:
    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page
    The tabbar on iOS is at the bottom side as default. However, you need to set the TabbedPage.ToolbarPlacement to make it aligns at the bottom on Android.
    If you want to display the top toolbar you also need to use a navigation page like:

    <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:d="http://xamarin.com/schemas/2014/forms/design"
                 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                 mc:Ignorable="d"
                 x:Class="App.CustomTabbedPage"
                 xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
                 android:TabbedPage.ToolbarPlacement="Bottom">
      <!--Pages can be added as references or inline-->
        <NavigationPage Title="Tab 1">
            <x:Arguments>
                <ContentPage Title="Page">
                    <ContentPage.ToolbarItems>
                        <ToolbarItem Text="Add"/>
                    </ContentPage.ToolbarItems>
                </ContentPage>
            </x:Arguments>
        </NavigationPage>
    
        <NavigationPage Title="Tab 2">
            <x:Arguments>
                <ContentPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage>
    
  • WorldOfBastiWorldOfBasti Member ✭✭

    thank you, you helped me a lot.

  • WorldOfBastiWorldOfBasti Member ✭✭

    But how can I split this in 2 c# files. One xaml and c# file for tab 1 and one for tab 2. This is in just one xaml and c# file, is it possible to split? And can I navigate to this files? Thank you in advance

  • WorldOfBastiWorldOfBasti Member ✭✭

    Ok thanks

Sign In or Register to comment.