Tabbed Page In Xamarin.Forms Application For Android And UWP

The TabbedPage consists of a list of tabs and a larger detail area with each tab loading content into the detail area.

After reading this article, you will learn how to use TabbedPage with a set of pages in Xamarin.Forms application for Android and Universal Windows Platform with XAML and Visual C# in cross platform application development.

The important tools given below are required to develop UWP.

1. Windows 10 (Recommended).
2. Visual Studio 2015 Community Edition (It is a free software available online).
3. Using Visual studio 2015 Installer, enable the Xamarin (Cross Platform Mobile development and C#/.NET while install/Modify Visual studio 2015.

Now, we will discuss step by step app development.

Step 1

Open Visual studio 2015 ->Start ->New Project->select Cross-Platform (under Visual C#->Blank app (Xamarin.Forms Portable)->Give a suitable name for your app (XamFormTabbed) ->OK.

Step 2

Now, create project "XamFormTabbed_Droid". Choose the Target and minimum platform version for your Universal Windows Project and creating project "XamFormTabbed_UWP".

Step 3

Afterwards, Visual Studio creates 6 projects and displays Getting Started.XamarinPage. Now, we have to update the Xamarin.forms reference for Portable Project and XamFormTabbed_Droid project, using Manage NUGet Packages.

Step 4

Add 4 XAML pages (TabFirst, TabSecond, TabThird, TabFourth) for Navigation Page Demo. Right click on XamFormTabbed (Portable) project, Select ADD->NewItem and Select ->CrossPlatform->FormXamlPage->Give the relevant name.

Step 5

In TabFirst.Xaml Page, add 2 Labels.

<StackLayout>
    <Label Text="Tabbed Page Xamarin Forms - UWP and Android Demo" FontSize="20" VerticalOptions="Center" HorizontalOptions="Center" />
    <Label Text="Welcome to First Tab" FontSize="20" VerticalOptions="Center" HorizontalOptions="Center" />
</StackLayout>

Similarly, add 2 labels in TabSecond.xaml, TabThird.xaml, TabFourth.xaml, TabFourth.xaml for TabbedPage Demo.

Step 6

Open (double click) the file App.cs in the Solution Explorer->XamFormTabbed (portable) and set the Root Page as TabbedPage with Children.

MainPage = new TabbedPage { Children = { new TabFirst(), new TabSecond(), new TabThird(), new TabFourth() } };

Step 7

We will test Android and UWP. Therefore, we can set the Multiple Startup Projects as XamFormTabbed.Droid and XamFormTabbed.UWP (Universal Windows).

Step 8

Change the Configuration Manager settings, go to Build ->Configuration Manager.

Uncheck all the build and deploy options to the iOS, Windows, WinPhone, check the Droid and UWP.

Step 9

Deploy your app in the local machine and the output of the XamFormTabbed App is given below.

After clicking the Second Page - Tab, the screenshot will be, as given blow.

After Clicking the fourth page - Tab, the screenshot will be, as shown below.

Summary

Now, you have successfully tested TabbedPage in Xamarin.Forms Application for Cross Platform application development, using Visual C# and Xamarin.