Common UI Patterns in Xamarin Forms – Part 2 – Tabbed Pages

Tabbed Pages are a common pattern that regular mobile App users are familiar with. At it’s simplest it is just a collection of pages tied together by a toolbar menu at the top or bottom of the screen. I say top or bottom because iOS, Android and WP do things differently here, and Xamarin.Forms does it’s best to keep true to the platforms. On Android it uses a bar at the top, for iOS the tab bar at the bottom, and on Windows Phone it uses a Pivot control.

A TabbedPage is essentially a container object for other page types and provides a way of navigating between it’s child pages.   About the simplest possible implementation in code would be:

public class App : Application
{
    public App()
    {
        // tabbed page 
        var tabContainer = new TabbedPage();
        tabContainer.Children.Add(new ContentPage() { Title="Humans" });
        tabContainer.Children.Add(new ContentPage() { Title="Klingons" });
        tabContainer.Children.Add(new ContentPage() { Title = "Vulcans" });

        // The root page of your application
        MainPage = tabContainer;
    }
}

It is also possible to bind the ItemsSource property to create the list of pages, like this:

public class App : Application
{
    public App()
    {
        // tabbed page 
        var tabContainer = new TabbedPage();
        tabContainer.ItemsSource = new string[] {"Humans", "Klingons", "Vulcans"};

        // The root page of your application
        MainPage = tabContainer;
    }
}

To be honest honest I don’t see many situations where you would want to bind a set of Tabbed Pages. Normally the tabs would be a group of well known pages which are statically defined. Additionally you would not want to define the pages inline, but rather reference other pages in your application. So let’s see how we do that using Xaml

First we create some normal, run of the mill pages that we want to show in the tabs, for example:

<?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="TabbedPages.VulcanPage">
	<Label Text="RIP Leonard Nimoy" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>

Now we create our MainTabContainer.xaml page. We just do this by creating a normal XAML content page, but then change it from being a content page to being a TabbedPage (remember to change the type in the code behind .cs file too. Then we add the pages we want tabs for in the TabbedPage.Childrens collection – (Note we have added the mypages namespace at the top so we can reference the pages)

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:mypages="clr-namespace:TabbedPages;assembly=TabbedPages"
            x:Class="TabbedPages.MainTabContainer">
  <TabbedPage.Children>
    <mypages:HumanPage Title="Humans"/>
    <mypages:VulcanPage Title="Vulcans"/>
    <mypages:KlingonPage Title="Klingons"/>
  </TabbedPage.Children>
</TabbedPage>

Adding Icons

We can add Icons to the tab pages, but with the standard Xamarin.Forms implementation this only works for iOS.  This kind of makes sense, because WP does not have images on pivots, and neither does Android Tabs.  To add the icons it’s a simple matter of setting the icon property.  Remembering that the icons need to be included in the platform specific iOS project to work.  The icons need to have a transparent background with a white foreground.   Apple has guidelines for creating icons here.  To implement, just set the Icon property:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:mypages="clr-namespace:TabbedPages;assembly=TabbedPages"
            x:Class="TabbedPages.MainTabContainer">
  <TabbedPage.Children>
    <mypages:HumanPage Title="Humans" Icon="TabIcons/Human.png"/>
    <mypages:KlingonPage Title="Klingons" Icon="TabIcons/Klingon.png"/>
    <mypages:VulcanPage Title="Vulcans" Icon="TabIcons/Vulcan.png"/>
  </TabbedPage.Children>
</TabbedPage>

More than 5 Tabs

One of the design limitations decisions in iOS is when there are more than 5 tabs, it goes into an overflow mode with “more…” like this :

The user can navigate to any of the tabs from there, or click the Edit button at the top to reorganize the tabs on the page.  It’s a pretty cool feature, but there is not much control over it.[

](http://res.cloudinary.com/dlstb15av/image/upload/v1506381695/iOS-Simulator-Screen-Shot-1-Mar-2015-2.05.48-pm_esq99r.png)

Android and Windows Phone do not have this functionality. On Windows Phone it just adds more pivot pages which the user can scroll across, and on Android the tab bar at the top becomes scrollable (although it does not implement swipe across pages).

In summary the TabbedPage implemtation in Xamarin.Forms is basic yet totally sufficient for simple tabbed navigations.

You can find the source code from this post over on my github.

Next up, I’ll have a look a bit deeper into Tabbed pages and look at adding navigation pages inside the TabbedPage. Till then, take care.