Tabs in .Net MAUI

Introduction

In this blog, we are going to learn about how to add tabs in .NET MAUI.

Prerequisites

Before starting to develop .NET MAUI apps, Visual Studio 2022 version 17.3 or greater needs to be installed with .NET Multi-platform App UI development workload with its default optional installation options.

For .NET iOS apps MAC machine is required along with XCode and Apple Id along with paid Apple Developer program.

Launch Visual Studio 2022 and "Create a new project" in the start window.

Implementation & Code

Add two New .NET MAUI Content Page (XAML) as DashboardTabPage and SecondTabPage inside the Views folder,

Now go to AppShell.xaml and add the code below,

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MauiSampleAppFirst.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiSampleAppFirst.Views"
    Shell.FlyoutBehavior="Disabled">

    <TabBar>
        <Tab Title="Dashboard">
            <ShellContent Icon="DashboardTabIcon.png"
                          ContentTemplate="{DataTemplate local:DashboardTabPage}"/>
        </Tab>
        <Tab Title="SecondTab">
            <ShellContent Icon="SecondTabIcon.png"
                          ContentTemplate="{DataTemplate local:SecondTabPage}"/>
        </Tab> 
    </TabBar>

</Shell>

Additional Properties

For the Tab bar Background Color,

Shell.TabBarBackgroundColor="Black" 

For the Tab bar UnSelected Color,

Shell.TabBarUnselectedColor="Red" 

For Tab bar Title Color:

Shell.TabBarTitleColor="White"

Output

Android

Windows

Github url: https://github.com/Virendra3112/MauiSampleAppFirst.App