TabbedPage Layout in .NET MAUI

The TabbedPage is a layout control in .NET MAUI that allows you to present content in a tabbed interface. Each tab displays a different content page, and users can switch between them by tapping on the tab headers.

Key Concepts

TabbedPage: The container control that manages multiple content pages.
ContentPage: Each tab in a TabbedPage is typically a ContentPage.
Tab Header: The visible title and optional icon for each tab.
Icon: An image displayed on the tab header to visually represent the content.
Title: The text displayed on the tab header.

Creating a TabbedPage

You can create a TabbedPage programmatically in C# or define it in XAML.

XAML Example

Here's how you can define a TabbedPage with two content pages in XAML:

<?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"
            xmlns:local="clr-namespace:YourApp.Pages"
            x:Class="YourApp.MainPage">

    <local:HomePage Title="Home" IconImageSource="home.png" />
    <local:SettingsPage Title="Settings" IconImageSource="settings.png" />
    <local:ProfilePage Title="Profile" IconImageSource="profile.png" />

</TabbedPage>

In this example:

<TabbedPage> is the root element.
xmlns:local="..." defines a namespace alias for your custom page classes.
Each child element (e.g., <local:HomePage />) represents a tab.
Title and IconImageSource are properties to customize the tab header.

C# Example

You can achieve the same result programmatically:

using Microsoft.Maui.Controls;

namespace YourApp
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            InitializeComponent();

            Children.Add(new HomePage
            {
                Title = "Home",
                IconImageSource = "home.png"
            });

            Children.Add(new SettingsPage
            {
                Title = "Settings",
                IconImageSource = "settings.png"
            });

            Children.Add(new ProfilePage
            {
                Title = "Profile",
                IconImageSource = "profile.png"
            });
        }
    }
}

Customizing Tab Headers

You can customize the appearance of tab headers using the following properties:

Title: Sets the text displayed on the tab.
IconImageSource: Sets the image displayed on the tab. Ensure the image file is added to your project and set to "Build Action: MauiImage" or "Content" depending on your needs.
BarBackground (Android/iOS): Sets the background color of the tab bar.
BarTextColor (Android/iOS): Sets the color of the text on the tab bar.
SelectedTabColor (Android/iOS): Sets the color of the currently selected tab.
UnselectedTabColor (Android/iOS): Sets the color of unselected tabs.

Icons

Using icons can greatly improve the usability of your TabbedPage. Make sure your icon files are correctly placed in your project's resources.

Icon Examples

Home

Settings

Profile

Notifications

TabbedPage in Action

Here's a visual representation of how a TabbedPage might look and function: