TabbedPage Class

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

Syntax

public class TabbedPage : MultiPage<Page>

Remarks

The user interface of a tabbed page consists of a list of items across the top of the screen, and a larger detail area below. 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 Xamarin.Forms.ItemsSource property and assign a Xamarin.Forms.DataTemplate to the MultiPage.ItemTemplate property to return pages for objects of the least derived type. Second, app developers can add a succession of Xamarin.Forms.Page objects to the MultiPage.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 Xamarin.Forms.DataTemplate to the MultiPage.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 Xamarin.Forms.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}
                }
            }
        });
    }
}

Requirements

Namespace: Xamarin.Forms
Assembly: Xamarin.Forms.Core (in Xamarin.Forms.Core.dll)
Assembly Versions: 1.0.0.0, 1.1.0.0, 1.2.0.0, 1.3.0.0