Xamarin Forms Pages Tabbedpage Complete Guide

Last Update:2025-06-23T00:00:00 .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION. 7 mins read Difficulty-Level: beginner

Understanding the Core Concepts of Xamarin Forms Pages TabbedPage

Understanding Xamarin.Forms Pages: TabbedPage

Introduction to TabbedPage

A TabbedPage consists of a set of tabs laid out at the bottom (or top, depending on the platform conventions) of the interface, where each tab can navigate to a separate page. This UI element is highly intuitive for users as it allows them to switch between different sections of a single-page interface seamlessly.

Creating a TabbedPage

To create a TabbedPage in your Xamarin.Forms project, follow these steps:

Add a new TabbedPage to your project:
- Right-click on your shared project within the Solution Explorer and navigate to Add > New Item.
- Select Xamarin.Forms > Content Page, and name your page (e.g., MainTabbedPage).
- Alternatively, you can extend the TabbedPage class directly.

Configure the TabbedPage:

In XAML, you define the TabbedPage with individual ContentPage elements for each tab.
In C#, you initialize the TabbedPage and add ContentPage instances to its Children property.

XAML Example:

<TabbedPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="YourNamespace.MainTabbedPage">
        <TabbedPage.Children>
            <ContentPage Title="Home">
                <StackLayout>
                    <Label Text="Welcome to the Home Tab" />
                </StackLayout>
            </ContentPage>
            <ContentPage Title="Settings">
                <StackLayout>
                    <Label Text="Welcome to the Settings Tab" />
                </StackLayout>
            </ContentPage>
            <ContentPage Title="Profile">
                <StackLayout>
                    <Label Text="Welcome to the Profile Tab" />
                </StackLayout>
            </ContentPage>
        </TabbedPage.Children>
</TabbedPage>

C# Example:

using Xamarin.Forms;

public class MainTabbedPage : TabbedPage
{
    public MainTabbedPage()
    {
        Children.Add(new HomeTab());
        Children.Add(new SettingsTab());
        Children.Add(new ProfileTab());
    }
}

public class HomeTab : ContentPage
{
    public HomeTab()
    {
        Title = "Home";
        Content = new StackLayout
        {
            Children = {
                new Label { Text = "Welcome to the Home Tab" }
            }
        };
    }
}

// Similarly define SettingsTab and ProfileTab classes

Customizing TabbedPage

Icon TabbedPage: On iOS, Android, and UWP, each tab can also have an icon alongside its title. Specify this by setting the Icon property on the child pages.

Example:

<ContentPage IconImageSource="home_icon.png" Title="Home">
    <StackLayout>
        <Label Text="Welcome to the Home Tab" />
    </StackLayout>
</ContentPage>

TabbedPage Appearance: Customize the appearance of tabs by overriding platform-specific renderers or using platform-specific properties.

Example - Android:

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedRenderer))]
namespace YourNamespace.Droid.Renderers
{
    public class CustomTabbedRenderer : TabbedRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            if (e.NewElement != null)
            {
                var bars = BarTint = Color.FromHex("#33B5E5");
            }
        }
    }
}

Performance Considerations

Lazy Loading: To improve performance, consider lazy loading the content of tabs that are not visible initially. This approach ensures that resources are only allocated when a tab is selected.
Optimize Resources: Use vector images for tab icons and ensure that they are optimized in terms of size to prevent unnecessary load times on mobile devices.

Best Practices

Consistent Navigation: Ensure that each tab provides a clear and consistent navigation experience. Avoid complex nested navigation within tabs that may confuse users.
Responsive Design: Make sure that your tabs and their content are responsive to different screen sizes and orientations.
Accessibility: Follow accessibility guidelines to ensure that your tabbed interface is usable by users with disabilities. Use appropriate labels, roles, and other accessibility features as needed.

Conclusion

TabbedPage is a fundamental component in Xamarin.Forms for creating tab-based user interfaces. By understanding how to create, customize, and optimize TabbedPage, you can build robust and intuitive mobile applications across multiple platforms. Implementing best practices and addressing performance considerations helps in delivering an engaging user experience.

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Xamarin Forms Pages TabbedPage

Step 1: Create a New Xamarin.Forms Project

Open Visual Studio.
Go to File > New > Project.
Select "Mobile App (Xamarin.Forms)" and click Next.
Name your project, for example, XamarinFormsTabbedPageExample.
Choose the platform (Android, iOS, and UWP). UWP is optional and won't run on Windows 10 without additional configuration.
Select a project template. Choose Blank for a default template.
Click Create.

Step 2: Add Multiple ContentPages

We'll create three simple ContentPage classes that will serve as different tabs in our TabbedPage.

Right-click on your project (not the platform-specific projects, the .NET Standard project) and select Add > New Item.
Select Content Page, name it Page1.xaml, and click Add.
Repeat the previous step to add Page2.xaml and Page3.xaml.

Each page will have some simple content. For example:

Page1.xaml:

<?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="XamarinFormsTabbedPageExample.Page1"
             Title="First Page">
    <StackLayout Padding="20">
        <Label Text="Welcome to the First Page" 
               HorizontalOptions="Center" 
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Page2.xaml:

<?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="XamarinFormsTabbedPageExample.Page2"
             Title="Second Page">
    <StackLayout Padding="20">
        <Label Text="Welcome to the Second Page" 
               HorizontalOptions="Center" 
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Page3.xaml:

<?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="XamarinFormsTabbedPageExample.Page3"
             Title="Third Page">
    <StackLayout Padding="20">
        <Label Text="Welcome to the Third Page" 
               HorizontalOptions="Center" 
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Step 3: Create and Configure the TabbedPage

Now, we'll create a TabbedPage and add the ContentPages as tabs.

Open App.xaml.
Remove the existing ContentPage <local:MainPage /> and add a <TabbedPage> with child <TabbedPage.Children>.

App.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XamarinFormsTabbedPageExample.App">
    <Application.MainPage>
        <TabbedPage>
            <TabbedPage.Children>
                <local:Page1 />
                <local:Page2 />
                <local:Page3 />
            </TabbedPage.Children>
        </TabbedPage>
    </Application.MainPage>
</Application>

Step 4: Set the Title for Each Page

Make sure each page has a Title set so that it appears in the tab bar.

You can set the title in the XAML as shown in the previous examples, or you can set it in the constructor of the code-behind file:

Page1.xaml.cs:

public partial class Page1 : ContentPage
{
    public Page1()
    {
        InitializeComponent();
        Title = "First Page";
    }
}

Page2.xaml.cs:

public partial class Page2 : ContentPage
{
    public Page2()
    {
        InitializeComponent();
        Title = "Second Page";
    }
}

Page3.xaml.cs:

public partial class Page3 : ContentPage
{
    public Page3()
    {
        InitializeComponent();
        Title = "Third Page";
    }
}

Step 5: Run Your Application

Set the build configuration to Debug, and the platform (iOS or Android).
Set the target device (Android Emulator, iOS Simulator, or a physical device).
Press F5 or click the Run button to build and deploy your application.

Final Code Example

App.xaml:

<?xml version="1.0" encoding="utf-8" ?>
<Application xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinFormsTabbedPageExample"
             x:Class="XamarinFormsTabbedPageExample.App">
    <Application.MainPage>
        <TabbedPage>
            <TabbedPage.Children>
                <local:Page1 />
                <local:Page2 />
                <local:Page3 />
            </TabbedPage.Children>
        </TabbedPage>
    </Application.MainPage>
</Application>

Page1.xaml:

<?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="XamarinFormsTabbedPageExample.Page1"
             Title="First Page">
    <StackLayout Padding="20">
        <Label Text="Welcome to the First Page" 
               HorizontalOptions="Center" 
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Page2.xaml:

<?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="XamarinFormsTabbedPageExample.Page2"
             Title="Second Page">
    <StackLayout Padding="20">
        <Label Text="Welcome to the Second Page" 
               HorizontalOptions="Center" 
               VerticalOptions="CenterAndExpand" />
    </StackLayout>
</ContentPage>

Page3.xaml:

Top 10 Interview Questions & Answers on Xamarin Forms Pages TabbedPage

Top 10 Questions and Answers on Xamarin.Forms Pages: TabbedPage

1. What is TabbedPage in Xamarin.Forms?

2. How do you add a TabbedPage in Xamarin.Forms?

Answer: To add a TabbedPage, you instantiate the TabbedPage class and then add Page objects to its Children collection. The Title and IconImageSource properties on each Page are used to populate the tabs. Example:

public class MyTabbedPage : TabbedPage
{
    public MyTabbedPage()
    {
        Children.Add(new HomePage { Title = "Home", IconImageSource = "home.png" });
        Children.Add(new SettingsPage { Title = "Settings", IconImageSource = "settings.png" });
    }
}

3. What are different ways to navigate to a TabbedPage in Xamarin.Forms?

Answer: You can navigate to a TabbedPage in several ways:

Direct Navigation: Set the MainPage of the Application to the new TabbedPage.
```
App.Current.MainPage = new MyTabbedPage();
```
Push Navigation: Use Navigation.PushAsync if you want to push the TabbedPage onto the navigation stack.
```
await Navigation.PushAsync(new MyTabbedPage());
```
Modal Navigation: Use Navigation.PushModalAsync if you want to present the TabbedPage modally.
```
await Navigation.PushModalAsync(new MyTabbedPage());
```

4. How can you handle taps on the tabs in a TabbedPage?

Answer: Xamarin.Forms does not provide direct events for tab selection. Instead, you can override the OnCurrentPageChanged method in your TabbedPage subclass:

protected override void OnCurrentPageChanged()
{
    base.OnCurrentPageChanged();
    var title = CurrentPage?.Title;
    Console.WriteLine($"Selected Tab: {title}");
}

5. Can you customize the appearance of tabs in a TabbedPage?

Answer: Yes, you can customize the appearance of tabs using platform-specific custom renderers. For iOS, you customize UITabBarController; for Android, you modify TabLayout and Toolbar. However, Xamarin.Forms also provides some properties to set IconImageSource, Title, and UnselectedIconImageSource.

6. How can I add dynamic tabs to a TabbedPage?

Answer: Adding dynamic tabs involves creating Page instances based on data and adding them to the Children collection. Example:

var tabs = someData.Select(item => new ContentPage { Title = item.Name }).ToList();
tabs.ForEach(tab => Children.Add(tab));

7. What is the difference between TabbedPage and CarouselPage in Xamarin.Forms?

Answer: Both TabbedPage and CarouselPage are used for navigating among a collection of pages, but they differ in how the collection is presented:

TabbedPage: Displays a tab bar with a horizontal tab strip. Users can navigate by tapping tabs.
CarouselPage: Provides a carousel-like experience where pages can be swiped to navigate.

8. Are there any performance considerations when using a TabbedPage with many tabs?

Answer: Using a TabbedPage with many tabs can affect performance, as each tab's content is instantiated when added to the Children collection. To mitigate this:

Lazy Loading: Delay the instantiation of pages until they are needed.
Optimize Content: Ensure each page's content is optimized for performance.

9. Can you use a custom layout as a tab icon in a TabbedPage?

Answer: Xamarin.Forms does not natively support complex custom layouts as tab icons. However, you can use platform-specific custom renderers to achieve advanced designs for tabs.

10. How do I programmatically select a specific tab in a TabbedPage?

Answer: To programmatically select a specific tab, set the CurrentPage property to the desired Page instance. For example: