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

Syntax

[Xamarin.Forms.RenderWith(typeof(Xamarin.Forms.Platform._MasterDetailPageRenderer))]
public class MasterDetailPage : Page, IElementConfiguration<MasterDetailPage>, IMasterDetailPageController

Remarks

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 = 
                    {
                        header, 
                        listView
                    }
                }
            };

            // 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];

            
        }
    }
}
Note:

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.

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.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

override
LayoutChildren(Double, Double, Double, Double)
Lays out the master and detail pages.
override
OnAppearing()
Event that is raised when a detail appears.
override
OnBackButtonPressed() : Boolean
Event that is raised when the back button is pressed.
override
OnDisappearing()
Event that is raised when a detail disappears.
override
OnParentSet()
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