Xamarin.Forms master detail page is a page, which manages two related pages of information – a master page that presents the items and a detail page that presents the details about the items on the master page.

After reading this article, you will learn how to use master detail page in Xamarin.Forms Application for Android and Universal Windows Platform with XAML and Visual C# in cross platform Application development with an example of Fruit Benefits app.

The following important tools are required to develop UWP.

  1. Windows 10 (Recommended).
  2. Visual Studio 2015 Community Edition (It is a free software available online).
  3. Using Visual Studio 2015 Installer, enable Xamarin (Cross Platform Mobile development and C#/.NET, while installing/modifying Visual Studio 2015.

Now, we can discuss step by step app development.

Step 1
Open Visual Studio 2015 -> Start -> New Project-> Select Cross-Platform (under Visual C#-> Blank app (Xamarin.Forms Portable)-> Give the suitable name for your app (XamFormMasDet) ->OK.

Step 2

Now, create project “XamFormMasDet_Droid”. Choose the Target and minimum platform version for your Universal Windows Project and create project “XamFormMasDet_UWP”.

Step 3

Afterwards, Visual Studio creates 6 projects and displays Getting Started.XamarinPage. Now, we have to update the Xamarin.Forms reference for Portable Project and XamFormMasDet_Droid project, using Manage NUGet Packages.

Step 4

Add 4 XAML Pages(MainPage, Apple,Orange, Grape) for master detail page demo. Right click XamFormMasDet (Portable) project. Select ADD-> NewItem.

Select ->CrossPlatform-> FormXamlPage-> Give the relevant name.

Step 5

In MainPage.xaml, change the content page as master detail page and add xmlns.local reference Add MasterDetailPage.Master and MasterDetailPage.Detail with Button and Label.

  1. <?xml version="1.0" encoding="utf-8" ?>
  2. <MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="XamFormMasterDetail.MainPage" xmlns:local="clr-namespace:XamFormMasterDetail;assembly=XamFormMasterDetail">
  3. <Label Text="{Binding MainText}" VerticalOptions="Center" HorizontalOptions="Center" />
  4. <MasterDetailPage.Master>
  5. <ContentPage Title="Fruits List">
  6. <StackLayout Orientation="Vertical">
  7. <Button Text="Apple" Clicked="OnAppleClicked" />
  8. <Button Text="Orange" Clicked="OnOrangeClicked" />
  9. <Button Text="Graphes" /> </StackLayout>
  10. </ContentPage>
  11. </MasterDetailPage.Master>
  12. <MasterDetailPage.Detail>
  13. <NavigationPage>
  14. <x:Arguments>
  15. <local:Apple/> </x:Arguments>
  16. </NavigationPage>
  17. </MasterDetailPage.Detail>
  18. </MasterDetailPage>

In Apple.xaml, add the code, mentioned below.

  1. <StackLayout>
  2. <Label Text="Apple" VerticalOptions="Center" HorizontalOptions="Center" />
  3. <Image x:Name="imgDisp" Source="Apple.jpg"></Image>
  4. </StackLayout>

In Orange.xaml, add the code, mentioned below.

  1. <StackLayout>
  2. <Label Text="Orange" VerticalOptions="Center" HorizontalOptions="Center" />
  3. <Image x:Name="imgDisp" Source="Orange.jpg"></Image>
  4. </StackLayout>

In Grapes.xaml Page, add the code, mentioned below.

  1. <StackLayout>
  2. <Label Text="Grapes" VerticalOptions="Center" HorizontalOptions="Center" />
  3. <Image x:Name="imgDisp" Source="Grapes.jpg"></Image>
  4. </StackLayout>

Step 6

Add the code, mentioned below in MainPage.Xaml.cs.
  1. public partial class MainPage: MasterDetailPage
  2. {
  3. public MainPage()
  4. {
  5. InitializeComponent();
  6. }
  7. private void OnAppleClicked(object sender, EventArgs e)
  8. {
  9. Detail = (new Apple());
  10. }
  11. private void OnOrangeClicked(object sender, EventArgs e)
  12. {
  13. Detail = (new Orange());
  14. }
  15. private void OnGrapesClicked(object sender, EventArgs e)
  16. {
  17. Detail = (new Grape());
  18. }
  19. }

Step 7

Open (double click) the file App.cs in the Solution Explorer-> XamFormMasDet (portable) and set the Root page.

Step 8
We will test Android and UWP. Thus, we can set the Multiple Startup Projects as XamFormMasDet.Droid and XamFormMasDet.UWP (Universal Windows).

Step 9

Change the Configuration Manager settings, Go to Build -> Configuration Manager.

Uncheck all the Build and deploy options to the iOS, Windows, WinPhone, check the Droid and UWP.

Step 10

Deploy your app in Local Machine and the output of the XamFormMasDet app is given below.
After clicking the Orange button, the screenshot is given below.

After Clicking the Grapes button, the screenshot is given below.

Summary

Now, you have successfully created and tested Fruit Benefits app, using master detail page in Xamarin.Forms Application for cross platform Application development, using Visual C# and Xamarin.