TabbedPage in .NET MAUI

TabbedPage in .NET MAUI

In .NET MAUI, a TabbedPage is a type of page that lets you organize multiple child pages into tabs, so users can quickly switch between different sections of your app.

📌 What is a TabbedPage?

• A container page that hosts multiple child pages.
• Each child page is represented by a tab (usually at the bottom on mobile, top on desktop).
• Provides a familiar navigation pattern used in many modern apps (social media, banking, shopping).

🎯 Why Use TabbedPage?

• To group related but distinct sections of your app.
• To give users quick access to multiple views without deep navigation.
• To provide a consistent tabbed UI across platforms.

✅ When to Use

• Apps with multiple main sections (e.g., Home, Search, Profile).
• When you want parallel navigation instead of hierarchical (no push/pop stacks).
• For apps where users frequently switch between views.

🚫 When Not to Use

• If your app has complex hierarchical navigation — use NavigationPage or Shell.
• For apps with many sections — a FlyoutPage or Shell may be better.
• Avoid nesting too many TabbedPages — it confuses users.

⚡ Best Practices

• Keep tabs limited: 3–5 tabs is ideal; too many overwhelms users.
• Use icons + titles: Helps users quickly identify tabs.
• Consistent design: Ensure tab styles are uniform across pages.
• Combine with Shell: Shell can host TabbedPages for more scalable navigation.
• Bind to ViewModels: Each tab’s ContentPage should have its own ViewModel for clarity.

🧩 Example: TabbedPage in MAUI

xml
<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:MyApp"
            x:Class="MyApp.MainTabbedPage">

    <ContentPage Title="Home" IconImageSource="home.png">
        <StackLayout Padding="20">
            <Label Text="Welcome to Home!" />
        </StackLayout>
    </ContentPage>

    <ContentPage Title="Search" IconImageSource="search.png">
        <StackLayout Padding="20">
            <Label Text="Search Page" />
        </StackLayout>
    </ContentPage>

    <ContentPage Title="Profile" IconImageSource="profile.png">
        <StackLayout Padding="20">
            <Label Text="Your Profile" />
        </StackLayout>
    </ContentPage>

</TabbedPage>
    

• Tabs: Home, Search, Profile.
• Each tab hosts its own ContentPage.
• Users can switch instantly between sections.

🏆 Summary

• TabbedPage = tabbed navigation container.
• Best for apps with multiple main sections.
• Keep tabs minimal and consistent.
• Works well standalone or inside Shell for larger apps.