TabbedPage in .NET MAUI

Introduction

In this article, we will learn about TabbedPage in .NET MAUI. In case you are new to .NET MAUI, I will recommend you to go through the below articles of this series:

• How .Net MAUI work?
• Project Structure of .NET MAUI Application
• Working With NavigationPage In .NET MAUI
• Working with FlyoutPage in .NET MAUI

A TabbedPage in .NET MAUI application is a user interface that provides a tabbed navigation interface in Mobile as well as in Desktop Applications. It allows users to switch between different views of the application by just clicking the tabs. TabbedPage maintains a collection of children (of type Page) which is typically a ContentPage. In iOS devices, a list of tabs appears at the bottom of the screen whereas page content comes above the tab. On the other hand, In Android as well as in Windows, the list of tabs appears on the top of the screen and the page content comes below it.

Let’s quickly create a sample application to see TabbedPage in action. I have a created a new application in which I have added another page i.e., TabbedPageDemo.xaml.

Replace the ContentPage with the TabbedPage in the xaml file.

Also, inherit the TabbedPage instead of ContentPage in TabbedPageDemo.xaml.cs file.

Now, add three child page object, one for Home, News and Support ContentPage. Set the Title and IconImageSource property of the ContentPage as shown in the below code. I have already downloaded and moved the .svg icon images to the Resources/Image location. In each ContentPage, I have added a Label as well to show it on the ContentPage when a user switch between the tabs.

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageDemo.TabbedPageDemo"
             Title="TabbedPageDemo">
    <ContentPage Title="Home" IconImageSource="home.svg">
        <Label Text="Dummy text for Home Page"></Label>
    </ContentPage>
    <ContentPage Title="News" IconImageSource="news.svg">
        <Label Text="Dummy text for News Page"></Label>
    </ContentPage>
    <ContentPage Title="Support" IconImageSource="support.svg">
        <Label Text="Dummy text for Support Page"></Label>
    </ContentPage>
</TabbedPage>

Preview on Android device

Preview on Windows

In the above example, we added the ContentPage in the TabbedPageDemo.xaml file. Now let’s create each ContentPage separately and refer them directly in the TabbedPage. As you can see in the below image, I have added HomePage.xaml, News.xaml ad Support.xaml page. 

Below is the code added in each xaml file.

HomePage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageDemo.HomePage"
             Title="HomePage">
    <Label Text="Dummy text for Home Page"/>
</ContentPage>

News.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageDemo.News"
             Title="News">
    <Label Text="Dummy text for News Page"/>
</ContentPage>

Support.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageDemo.Support"
             Title="Support">
    <Label Text="Dummy text for Support Page"/>
</ContentPage>

Add xmlns:local in TabbedPage which is an XML namespace declaration. It defines an XML namespace prefix, in this case, "local," that is associated with a specific CLR (Common Language Runtime) namespace. This declaration is used to specify the mapping between XML elements in your XAML markup and the corresponding .NET namespaces and classes in your code. Thus, helps us to use the elements, classes i.e., ContentPage within the XAML Markup.

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageDemo.TabbedPageDemo"
             xmlns:local="clr-namespace:TabbedPageDemo"
             Title="TabbedPageDemo"
             BarBackgroundColor="#273c75"
             BarTextColor="White"
             SelectedTabColor="White"            
             UnselectedTabColor="Gray">
    <local:HomePage Title="Home" IconImageSource="home.svg">
    </local:HomePage>
    <local:News Title="News" IconImageSource="news.svg">
    </local:News>
    <local:Support Title="Support" IconImageSource="support.svg">
    </local:Support>
</TabbedPage>

Preview

We can also change the BarBackgroundColor(defines the background color of the tab bar), BarTextColor(represents the color of the text on the tab bar), SelectedTabColor(indicates the color of a tab when it's selected), UnselectedTabColor(represents the color of a tab when it's unselected) properties of the TabbedPage.

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TabbedPageDemo.TabbedPageDemo"
             xmlns:local="clr-namespace:TabbedPageDemo"
             Title="TabbedPageDemo"
             BarBackgroundColor="#273c75"
             BarTextColor="White"
             SelectedTabColor="White"            
             UnselectedTabColor="Gray">
    <local:HomePage Title="Home" IconImageSource="home.svg">
    </local:HomePage>
    <local:News Title="News" IconImageSource="news.svg">
    </local:News>
    <local:Support Title="Support" IconImageSource="support.svg">
    </local:Support>
</TabbedPage>