Xamarin.Forms Guides | Samples

Xamarin.Forms.TabbedPage Class

MultiPage`1 that displays an array of tabs across the top of the screen, each of which loads content onto the screen.

See Also: TabbedPage


public class TabbedPage : MultiPage<Page>, IElementConfiguration<TabbedPage>


The user interface of a tabbed page consists of a list of tabs and a larger detail area. On iOS, the list of tabs appears at the bottom of the screen, and the detail area is above. On Android and Windows phones, the tabs appear across the top of the screen. The user can scroll the collection of tabs that are across the top of the screen if that collection is too large to fit on one screen.

App developers can create tabbed pages in either of two ways. First, application developers can assign a list of objects of a single class, or its subclasses, to the MultiPage.ItemsSource property and assign a DataTemplate to the MultiPage<T>.ItemTemplate property to return pages for objects of the least derived type. Second, app developers can add a succession of Page objects to the MultiPage<T>.Children property. Both methods are shown in the code examples below.

The following example code, adapted for brevity from the FormsGallery sample that can be found on the Sample Applications page, shows how to display data of a specific type by assigning a DataTemplate to the MultiPage<T>.ItemTemplate property. Note how NamedColorPage gets its color by binding its BoxView.ColorProperty field.

C# Example

using System;
using Xamarin.Forms;

namespace MinimalTabbed
    class TabbedPageDemoPage : TabbedPage
        public TabbedPageDemoPage ()
            this.Title = "TabbedPage";

            this.ItemsSource = new NamedColor[] {
                new NamedColor ("Red", Color.Red),
                new NamedColor ("Yellow", Color.Yellow),
                new NamedColor ("Green", Color.Green),
                new NamedColor ("Aqua", Color.Aqua),
                new NamedColor ("Blue", Color.Blue),
                new NamedColor ("Purple", Color.Purple)

            this.ItemTemplate = new DataTemplate (() => { 
                return new NamedColorPage (); 

    // Data type:
    class NamedColor
        public NamedColor (string name, Color color)
            this.Name = name;
            this.Color = color;

        public string Name { private set; get; }

        public Color Color { private set; get; }

        public override string ToString ()
            return Name;

    // Format page
    class NamedColorPage : ContentPage
        public NamedColorPage ()
            // This binding is necessary to label the tabs in
            // the TabbedPage.
            this.SetBinding (ContentPage.TitleProperty, "Name");
            // BoxView to show the color.
            BoxView boxView = new BoxView {
                WidthRequest = 100,
                HeightRequest = 100,
                HorizontalOptions = LayoutOptions.Center
            boxView.SetBinding (BoxView.ColorProperty, "Color");

            // Build the page
            this.Content = boxView;

The example below creates a tabbed view with two ContentPage instances.

C# Example

class TabbedPageDemoPage2 : TabbedPage
    public TabbedPageDemoPage2 ()
        this.Title = "TabbedPage";
        this.Children.Add (new ContentPage 
                Title = "Blue",
                Content = new BoxView
                    Color = Color.Blue,
                    HeightRequest = 100f,
                    VerticalOptions = LayoutOptions.Center
        this.Children.Add (new ContentPage {
            Title = "Blue and Red",
            Content = new StackLayout {
                Children = {
                    new BoxView { Color = Color.Blue },
                    new BoxView { Color = Color.Red}


Namespace: Xamarin.Forms
Assembly: Xamarin.Forms.Core (in Xamarin.Forms.Core.dll)
Assembly Versions:,,,,,,

The members of Xamarin.Forms.TabbedPage are listed below.

See Also: Inherited members from Xamarin.Forms.MultiPage<Xamarin.Forms.Page>

Public Constructors

Creates a new TabbedPage element with default values.

Public Fields

static readonly
BarBackgroundColorPropertyBindableProperty. Backing store for the TabbedPage.BarBackgroundColor property.
static readonly
BarTextColorPropertyBindableProperty. Backing store for the TabbedPage.BarTextColor property.

Public Properties

BarBackgroundColorColor. Gets or sets the background color of the bar.
BarTextColorColor. Gets or sets the color of text on the bar.

Public Methods

On<T>() : IPlatformElementConfiguration<T, TabbedPage>
Returns the platform-specific instance of this TabbedPage, on which a platform-specific method may be called.

Protected Methods

CreateDefault(Object) : Page
Creates a default page, suitable for display in thisTabbedPage page, for an object.
Called when the parent is set.