Drawer navigation and master-detail UI are two powerful patterns that guide users through content in applications with significant amounts of data or many pages. Xamarin.Forms provides the MasterDetailPage to help you implement both presentation styles.
MasterDetailPage does a lot of the work for you if you know how to specify a split view vs. a drawer. You also need to be aware of the situations where Xamarin.Forms will override your selection. Once you know how it works, MasterDetailPage is a great tool to help you create responsive applications that run on a wide selection of device types and operating systems.
The Xamarin.Forms MasterDetailPage can give you a classic side-by-side master-detail display or a sliding-drawer menu. The best option depends on your data and the properties of the runtime device.
Xamarin.Forms uses the term Split for a side-by-side view and Popover for a sliding-drawer, as shown below.
MasterDetailPage has a property called MasterBehavior that lets you specify your choice of split vs. popover. The value is an enumeration with the five options shown below.
Xamarin.Forms uses three factors to determine whether to use a split or popover display at runtime:
Xamarin.Forms always chooses popover behavior on a phone. Your setting for MasterBehavior and the screen orientation are not used in the calculation.
Xamarin.Forms uses your MasterBehavior setting and the device orientation to determine master behavior on non-phone devices:
Notice how you get popover behavior regardless of screen orientation in the Popover row in the table above.
The Split row is analogous. When you ask for Split behavior, that’s what you get, regardless of screen orientation (except on phones as discussed above).
The next two rows are more interesting because they consider screen orientation. If you choose SplitOnLandscape, you get the split view when the screen is wide and popover when the screen is narrow.
SplitOnPortrait gives you the opposite—split view when the screen is narrow and popover when it is wide.
Finally, notice that the Default behavior is the same as SplitOnLandscape.
Now that we’ve seen the options, let’s finish with some brief guidance on which you should use in your apps. Generally, you choose a setting for MasterBehavior based on the type of data you need to display:
Understanding how and when to use MasterDetailPage is essential for anyone building a responsive UI for a large-scale app. To learn more, check out the new Xamarin University course, Master-Detail and Drawer Navigation (XAM290).