See Also: MasterDetailPage Members
The following example code, taken from the FormsGallery sample application, creates a Xamarin.Forms.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 Xamarin.Forms.ContentPage in another file in the sample application, simply displays RGB data, a Xamarin.Forms.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 Xamarin.Forms.ListView element in this example. This Xamarin.Forms.ListView element contains a label and a list of colors. Second, the "Detail" portion of the Xamarin.Forms.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.
C# Example
using System;
using Xamarin.Forms;
namespace FormsGallery
{
class MasterDetailPageDemoPage : MasterDetailPage
{
public MasterDetailPageDemoPage()
{
Label header = new Label
{
Text = "MasterDetailPage",
Font = Font.BoldSystemFontOfSize(30),
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];
}
}
}
The Windows Phone and Android platforms do not support sliding the detail screen in order to show or hide it. Use a Xamarin.Forms.TapGestureRecognizer to allow the user to show and hide the Detail screen on these platforms. On Windows Phone, consider using a user interface class that provides an experience that is more consistent with that platform, such as Xamarin.Forms.CarouselPage.