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

Syntax

[Xamarin.Forms.RenderWith(typeof(Xamarin.Forms.Platform._TabbedPageRenderer))]
public class TabbedPage : MultiPage<Page>, IElementConfiguration<TabbedPage>

Remarks

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}
                }
            }
        });
    }
}

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, 1.4.0.0, 1.5.0.0, 2.0.0.0

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

Public Properties

Public Methods

Protected Methods

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