Tabbed Page In Xamarin.Forms

The following topics are discussed in this article.

• What is a tabbed page?
• Uses of a tabbed page.
• Practical example of a tabbed page

Targeted Audience

Targeted audience is people with basic knowledge of XAML and C#.

What is a tabbed page?

In your mobile, you may use some application that contains different tabs and you can navigate from one tab to another with just a single click. Tabbed page is a page that contains different tabs and each tab has its own title and own content depending upon the type and logic of application.



You can also see it in the image, with different tabs. Let’s discuss some of its uses, and move towards its practical example.

Uses of a tabbed page

• Access multiple pages by a single page
• Navigation between pages becomes easier
• More amount of information is shown on a page.
• Easy to use
• One of the most used tabbed page applications is “Instagram”.

Creating a tabbed page

Here, I am using Visual Studio 2017 for Windows OS with Xamarin workload installed in it. Now, we are going to make a tabbed page application. Just follow the following steps.

First make a Xamarin.forms project. If you are new to Xamarin.forms, learn how to create your first cross-platform mobile application using Visual Studio 2017, here.

Now, right click on your portable project -> Add -> New item.



Then, go to Cross-Platform -> Forms Tabbed Page Xaml (rename it) -> click Add.



Now, you will see some code in your tabbed page.



A tab page is a parent page that contains multiple pages in it. You can add child pages in 2 ways.

• By adding content page tab in your parent tabbed page. You can code multiple content pages in your parent page.
• Use reference of other page as a child of tabbed page.

The default code generated by making a tabbed page is given below.

XAML

<?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="CsharpCorner.TabbedPageExample"
             xmlns:pages="clr-namespace:CsharpCorner;assembly=CsharpCorner"
             Title="TabbedPage">
  <!--Pages can be added as references or inline-->
  <pages:TabbedPageExampleTab1/>
  <ContentPage Title="Tab 2">
    <StackLayout>
      <Label Text="Green"  HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" />
      <BoxView Color="Green" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
  <ContentPage Title="Tab 3">
    <StackLayout>
      <Label Text="Blue" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5"  />
      <BoxView Color="Blue" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
</TabbedPage>

Explaining Code

<pages:TabbedPageExampleTab1/>

This line is used in the above code to add the reference of other page named “TabbedPageExampleTab1”. Now, this page will act as one of the tabs in your tabbed page application.

And, the next code is -

<ContentPage Title="Tab 2">
  <StackLayout>
    <Label Text="Green"  HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" />
    <BoxView Color="Green" VerticalOptions="FillAndExpand" />
  </StackLayout>
</ContentPage>

This code will add another content page in your application but this is not the reference of other page. This code will add another content page with a title of Tab 2.

Now, we are going to make some changes in both of the files - Main parent file and the TabbedPageExampleTab1 file. So, we can make a tabbed page according to our desire. Let’s add some content in it.

I have made three tabs named Profile, Home, and Notifications. Now, let's add content in it.

Code of Tab1 

<?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="CsharpCorner.TabbedPageExampleTab1"
             Title="Profile">
  <StackLayout>
    <Label Text="Hello. I am umair Hassan Member of C-sharp Corner" Margin="5" />
        <Image
            HeightRequest="80"
            WidthRequest="80"
            Source="http://csharpcorner.mindcrackerinc.netdna-cdn.com/UploadFile/AuthorImage/2e96ef20160701111857.jpg">
        </Image>

        <Label Text="You are on Tab one"></Label>

        <BoxView VerticalOptions="FillAndExpand" Color="Silver"></BoxView>
  </StackLayout>
</ContentPage>

Main Tabbed Page 

<?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="CsharpCorner.TabbedPageExample"
             xmlns:pages="clr-namespace:CsharpCorner;assembly=CsharpCorner"
             Title="TabbedPage">
  <!--Pages can be added as references or inline-->
  <pages:TabbedPageExampleTab1/>
  <ContentPage Title="Home">
    <StackLayout>
      <Label Text="You are on Tab 2"  HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5" />
      <BoxView Color="Silver" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
  <ContentPage Title="Notifications">
    <StackLayout>
      <Label Text="You are on Tab 3" HorizontalTextAlignment="Center" HorizontalOptions="FillAndExpand" Margin="5"  />
      <BoxView Color="Lime" VerticalOptions="FillAndExpand" />
    </StackLayout>
  </ContentPage>
</TabbedPage>

Output on Android and Windows desktop



So, this is the final output of our tabbed page application.