Summary of Chapter 25. Page varieties
So far you've seen two classes that derive from
NavigationPage. This chapter presents two others:
MasterDetailPagemanages two pages, a master and a detail
TabbedPagemanages multiple child pages accessed through tabs
These page types provide more sophisticated navigation options than the
NavagationPage discussed in Chapter 24. Page Navigation.
Master and Detail
MasterDetailPage defines two properties of type
Detail. Generally you set each of these properties to a
MasterDetailPage displays and switches between these two pages.
There are two fundamental ways to switch between these two pages:
- split where the master and detail are side by side
- popover where the detail page covers or partially covers the master page
There are several variations of the popover approach (slide, overlap, and swap), but these are generally platform dependent. You can set the
MasterDetailBehavior property of
MasterDetailPage to a member of the
However, this property has no effect on phones. Phones always have a popover behavior. Only tablets and desktop windows can have a split behavior.
Exploring the Behaviors
The MasterDetailBehaviors sample allows you to experiment with the default behavior on different devices. The program contains two separate
ContentPage derivatives for the master and detail (with a
Title property set on both), and another class that derives from
MasterDetailPage that combines them. The detail page is enclosed in a
NavigationPage because the UWP program wouldn't work without it.
The Windows 8.1 and Windows Phone 8.1 platforms require that a bitmap be set to the
Icon property of the master page.
Back to School
Detail properties are defined with visual trees in the SchoolAndDetailPage.xaml file, which derives from
MasterDetailPage. This arrangement allows data bindings to be set between the master and detail pages.
That XAML file also sets the
IsPresented property of
True. This causes the master page to be displayed at startup; by default the detail page is displayed. The SchoolAndDetailPage.xaml.cs file sets
false when an item is selected from the
ListView in the master page. The detail page is then displayed:
Your own user interface
Although Xamarin.Forms provides a user interface for switching between the master and detail views, you can supply your own. To do so:
- Set the
falseto disable swiping
- Override the
ShouldShowToolbarButtonmethod and return
falseto hide the toolbar buttons on Windows 8.1 and Windows Phone 8.1.
You must then provide a means to switch between the master and detail pages, such as demonstrated by the ColorsDetail sample.
The MasterDetailTaps sample demonstrates another approach using a
TapGestureRecognizer on the master and detail pages.
TabbedPage is a collection of pages that you can switch among using tabs. It derives from
MultiPage<Page> and defines no public properties or methods of its own.
MultiPage<T>, however, does define a property:
Childrenproperty of type
You fill this
Children collection with page objects.
Another approach allows you to define the
TabbedPage children much like a
ListView using these two properties that generate the tabbed pages automatically:
However, this approach does not work well on iOS when the collection contains more than a few items.
MultiPage<T> defines two more properties that let you keep track of which page is currently viewed:
T, referring to the page
Object, referring to the object in the
MultiPage<T> also defines two events:
CurrentPageChangedwhen the viewed page changes
Discrete tab pages
The DiscreteTabbedColors sample consists of three tabbed pages that display colors in three different ways. Each tab is a
ContentPage derivative, and then the
TabbedPage derivative DiscreteTabbedColorsPage.xaml combines the three pages.
For each page that appears in a
Title property is required to specify the text in the tab, and the Apple Store requires that an icon be used as well, so the
Icon property is set for iOS:
The StudentNotes sample has a home page that lists all the students. When a student is tapped, this navigates to a
StudentNotesDataPage, that incorporates three
ContentPage objects in its visual tree, one of which allows entering some notes for that student.
Using an ItemTemplate
The MultiTabbedColor sample uses the
NamedColor class in the Xamarin.FormsBook.Toolkit library. The MultiTabbedColorsPage.xaml file sets the
DataTemplate property of
TabbedPage to a visual tree beginning with
ContentPage that contains bindings to properties of
NamedColor (including a binding to the
However, this is problematic on iOS. Only a few of the items can be displayed, and there is no good way to give them icons.
We'd love to hear your thoughts. Choose the type you'd like to provide:
Our feedback system is built on GitHub Issues. Read more on our blog.