Master Detail Page in Xamarin Forms

You can also learn Master Detail Page from video tutorial present at bottom of this article:

Master Detail Page
A page that manages two panes of information. Master Detail page contains two panes. Let’s discuss an example of it that you have a list of contacts and you click on a specific contact to see its details and all the details of it are shown on the same page on second pane. This is the Master detail page, where you have two panes

Master detail page has two panes. Master page & Detail page.

  • Master page

Master page is the menu of Master detail page. This menu is shown at left of page. You have menu items in master page.

  • Detail page

Detail page is the container which contains detail. You can add one or more detail pages.

 

How to?

You can separately make master and detail pages for Master detail page but xamarin forms has also template to make Master detail page by using this both of the pages are made  for your use.

 

By using this master detail page you can see 4 pages as shown in picture below.

 

 

You can explore the files to see how all thing are working within the master and detail pages.

MasterDetailPage:

MasterDetailPage is the main page. Which contains tags of Master and Detail. In this page you can declare master page and detail page.

MasterDetailPageDetail:

This is the default detail page created by template.

MasterDetailPageMaster:

This the the default master page created.

MasterDetailPageMenuItem:

This is the class which is used in menu item of master.

Let’s run application and see how our Master page is shown.

Output:

 

Video Related to this article: 

 

XamarinWeb Founder | MVP – C-SharpCorner | Xamarin Forms Developer

Leave a Reply

Your email address will not be published. Required fields are marked *