Xamarin.Forms Guides | Samples

Xamarin.Forms.MasterDetailPage Class

A Page that manages two panes of information: A master page that presents data at a high level, and a detail page that displays low-level details about information in the master.

See Also: MasterDetailPage


public class MasterDetailPage : Page, IElementConfiguration<MasterDetailPage>, IMasterDetailPageController


The following example code, taken from the FormsGallery sample application, creates a MasterDetailPage that allows the user to view detailed information about a color that she chooses from a list. Note that the NamedColorPage class, defined in as a sublcass of ContentPage in another file in the sample application, simply displays RGB data, a BoxView with its background color set to the color that the user selected, and, finally, hue, saturation, and luminosity data.

The sample below illustrates three key concepts. First, the "Master" portion of the MasterDetailPage is represented by the MasterDetailPage.Master property, which is set to a ListView element in this example. This ListView element contains a label and a list of colors. Second, the "Detail" portion of the MasterDetailPage is represented by the MasterDetailPage.Detail property, which, in this example, is set to the NamedColorPage that was noted above. Third, and finally, the page that is represented by the MasterDetailPage.Detail property is displayed by setting the MasterDetailPage.IsPresented property to false; That is, the MasterDetailPage.IsPresented property controls whether or not the page that is represented by the MasterDetailPage.Master is presented to the user.

Note: The MasterDetailPage.Master page must have its Page.Title property set. Additionally, the MasterDetailPage.Detail page will only display a navigation bar if it is an instance of NavigationPage.

C# Example

using System;
using Xamarin.Forms;

namespace FormsGallery
    class MasterDetailPageDemoPage :  MasterDetailPage
        public MasterDetailPageDemoPage()
            Label header = new Label
                Text = "MasterDetailPage",
                FontSize = Device.GetNamedSize (NamedSize.Large, typeof(Label)),
                HorizontalOptions = LayoutOptions.Center

            // Assemble an array of NamedColor objects.
            NamedColor[] namedColors = 
                    new NamedColor("Aqua", Color.Aqua),
                    new NamedColor("Black", Color.Black),
                    new NamedColor("Blue", Color.Blue),
                    new NamedColor("Fuschia", Color.Fuschia),
                    new NamedColor("Gray", Color.Gray),
                    new NamedColor("Green", Color.Green),
                    new NamedColor("Lime", Color.Lime),
                    new NamedColor("Maroon", Color.Maroon),
                    new NamedColor("Navy", Color.Navy),
                    new NamedColor("Olive", Color.Olive),
                    new NamedColor("Purple", Color.Purple),
                    new NamedColor("Red", Color.Red),
                    new NamedColor("Silver", Color.Silver),
                    new NamedColor("Teal", Color.Teal),
                    new NamedColor("White", Color.White),
                    new NamedColor("Yellow", Color.Yellow)

            // Create ListView for the master page.
            ListView listView = new ListView
                ItemsSource = namedColors

            // Create the master page with the ListView.
            this.Master = new ContentPage
            	Title = header.Text,
                Content = new StackLayout
                    Children = 

            // Create the detail page using NamedColorPage and wrap it in a
            // navigation page to provide a NavigationBar and Toggle button
            this.Detail = new NavigationPage(new NamedColorPage(true));

            // For Windows Phone, provide a way to get back to the master page.
            if (Device.OS == TargetPlatform.WinPhone)
                (this.Detail as ContentPage).Content.GestureRecognizers.Add(
                    new TapGestureRecognizer((view) =>
                        this.IsPresented = true;

            // Define a selected handler for the ListView.
            listView.ItemSelected += (sender, args) =>
                    // Set the BindingContext of the detail page.
                    this.Detail.BindingContext = args.SelectedItem;

                    // Show the detail page.
                    this.IsPresented = false;

            // Initialize the ListView selection.
            listView.SelectedItem = namedColors[0];


The Windows Phone and Android platforms do not support sliding the detail screen in order to show or hide it. Application developers can use a TapGestureRecognizer to provide the user an additional way to show and hide the Detail screen on these platforms. On Windows Phone, developers could consider using a user interface class that provides an experience that is more consistent with that platform, such as CarouselPage.


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

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

See Also: Page

Public Constructors

Creates a new empty MasterDetailPage.

Public Fields

static readonly
IsGestureEnabledPropertyBindableProperty. Backing store for the IsGestureEnabled bindable property.
static readonly
IsPresentedPropertyBindableProperty. Backing store for the MasterDetailPage.IsPresented property.
static readonly
MasterBehaviorPropertyBindableProperty. Backing store for the MasterBehavior property.

Public Properties

DetailPage. Gets or sets the detail page that is used to display details about items on the master page.
IsGestureEnabledBoolean. Gets or sets a value that turns on or off the gesture to reveal the master page. This is a bindable property.
IsPresentedBoolean. Gets or sets a value that indicates whether or not the visual element that is represented by the MasterDetailPage.Master property is presented to the user.
MasterPage. Gets or sets the master page.
MasterBehaviorMasterBehavior. Gets or sets a value that indicates how detail content is displayed.

Public Methods

On<T>() : IPlatformElementConfiguration<T, MasterDetailPage>
ShouldShowToolbarButton() : Boolean
Returns a value that tells whether the list view should display a toolbar button.

Protected Methods

LayoutChildren(Double, Double, Double, Double)
Lays out the master and detail pages.
Event that is raised when a detail appears.
OnBackButtonPressed() : Boolean
Event that is raised when the back button is pressed.
Event that is raised when a detail disappears.
Method that is called when the Element.Parent property of this marin.Forms.MasterDetailPage is set.

Public Events

IsPresentedChangedEvent that is raised when the visual element that is represented by the MasterDetailPage.Master property is presented or hidden.

Explicitly Implemented Interface Members