Tabbed Navigation pattern

Another navigation is the tabbed navigation, when you want to jump from any point in your application to any other point in your application this is an effective pattern, however the number of visible tabs is limited and thus this is really only appropriate if you use four tabs for mobile devices.

to get started let's create four pages in a views folder in our solution.

With our four page created lets load up some arrows for our android project

Put them in the resources\drawable folder of our android project

with that done, let's configure our four tab pages in our views folder. just open up each one and make the following changes to the xaml.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="pav.TabbedNavigation.Views.LeftPage"

             Title="Left" Icon="arrowLeft.png">

    <ContentPage.Content>

        <StackLayout>

            <Label Text="Looking left"

                VerticalOptions="CenterAndExpand"

                HorizontalOptions="CenterAndExpand" />

        </StackLayout>

    </ContentPage.Content>

</ContentPage>

For each page give them a descriptive title and and icon, if you want you can change the content as well just to be a little more descriptive on each page

to initialize the tabbed navigation pattern you have to open up your MainPage.xaml and change it's root from content page to tabbed page like so,

<?xml version="1.0" encoding="utf-8" ?>

<TabbedPage  xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="pav.TabbedNavigation.MainPage" />

then open up the code behind and change it's inheritance type to TabbedPage, also add each of our created pages from our view model to the children collection.

using Xamarin.Forms;

using pav.TabbedNavigation.Views;

namespace pav.TabbedNavigation

{

    public partial class MainPage : TabbedPage

    {

        public MainPage()

        {

            InitializeComponent();

            this.Children.Add(new LeftPage());

            this.Children.Add(new UpPage());

            this.Children.Add(new DownPage());

            this.Children.Add(new RightPage());

        }

    }

}

now with that done run your application and you should see something like the following.

Android:

Windows:

now if you prefer you can add all of your pages in the Xaml instead of the codebehind, but modifying the Children collection at that point can prove to be rather challenging (if possible).

<?xml version="1.0" encoding="utf-8" ?>

<TabbedPage  xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="pav.TabbedNavigation.MainPage"

             xmlns:views="clr-namespace:pav.TabbedNavigation.Views"

             BackgroundColor="LightSalmon"

             BarBackgroundColor="Maroon"

             BarTextColor="White">

    <TabbedPage.Children>

        <views:LeftPage Title="Left" Icon="arrowLeft.png"/>

        <views:UpPage Title="Up" Icon="arrowUp.png"/>

        <views:DownPage Title="Down" Icon="arrowDown.png"/>

        <views:RightPage Title="Right" Icon="arrowRight.png"/>

    </TabbedPage.Children>

</TabbedPage>

You may have noticed that we also styled our navigation bar, now if for android you wanted to glue your tab menu to the bottom of the screen instead of the top you'd have to load the android namespace which would expose the ToolbarPlacement field.

<?xml version="1.0" encoding="utf-8" ?>

<TabbedPage  xmlns="http://xamarin.com/schemas/2014/forms"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             x:Class="pav.TabbedNavigation.MainPage"

             xmlns:views="clr-namespace:pav.TabbedNavigation.Views"

             BackgroundColor="LightSalmon"

             BarBackgroundColor="Maroon"

xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"

             android:TabbedPage.ToolbarPlacement="Bottom"

             BarTextColor="White">

    <TabbedPage.Children>

        <views:LeftPage Title="Left" Icon="arrowLeft.png"/>

        <views:UpPage Title="Up" Icon="arrowUp.png"/>

        <views:DownPage Title="Down" Icon="arrowDown.png"/>

        <views:RightPage Title="Right" Icon="arrowRight.png"/>

    </TabbedPage.Children>

</TabbedPage>

One caveat is that when using the Tabbed navigation pattern out of the box the back button is not supported in app, meaning that if you hit the back button you will simply get the native action of moving back in the app stack, minimizing your application