Dynamic Master Detail Page In Xamarin.Forms

Introduction

This article demonstrates how to create and use a Dynamic Master Detail Page in Xamarin.Forms, XAML, and C#. This article starts with the introduction of the Master Detail Page tag in XAML.

Xamarin

Today I am going to tell you about master detail page. I have faced so many problems while creating it.

After a long struggle, I came up with some easy steps to create master detail page. Before moving towards implementation let's have some short details about the terms.

The master detail page is a page in which we are creating menus to navigate through the application such as Home, Setting, About, Help, Logout, etc.

Master detail menus are generally used in most mobile applications and it also looks attractive.

We can customize the master-detail page in our own way, and make it attractive.

Let's begin.

Definition

Master Detail Page: A page that displays the information in two parts, higher level and lower level.

In A Simple Way

Master detail page contains two things, one is a master page and another is the detail page.

A master page contains the menu list and the detail page that displays the details and provides the link to go back to the master page.

The detail page is a content holder that can hold another page which is linked to the master page’s menus.

Implementation

Open Visual Studio and select a New Project.

Xamarin

Now, select Cross-Platform App, give the project a name and set the project path. Then click OK.

Xamarin

Select the template as "Blank App" and code sharing as "PCL".

Xamarin

Step-1

Create a folder which is named MenuItems and Views.

Right-click on MenuItems folder and select Add >> New Item or Add >> Class.

Xamarin

Step-2

We create a class MasterPageItem.cs and write the following C# code.

MasterPageItem.cs

public class MasterPageItem {
public string Title {
get;
set;
}
public string Icon {
get;
set;
}
public Type TargetType {
get;
set;
}
}

Step 3

In Views folder, you can create three pages to navigate through the detail page. (Ctr+Sht+A is short cut key for adding New Items) .

Like this =>

Home Page
Setting Page
Help Page
Logout Page

Step 4

Now, we will set up the Main Page for the master-detail page and set the list view on the master detail page.

<MasterDetailPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:XFMasterDetailPageNavigation" x:Class="NavigationMasterDetail.MainPage">
<MasterDetailPage.Master>
<ContentPage Title="Menu">
<Grid BackgroundColor="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="200" />
<RowDefinition Height="*" /> </Grid.RowDefinitions>
<Grid>
<Image Source="bg.png" Aspect="AspectFill" />
<StackLayout Padding="0,20,0,0" HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
<Image BorderColor="White" Source="profile.png" Aspect="AspectFill" WidthRequest="85" HeightRequest="85" />
<Label Text="Adam Pedley" TextColor="White" FontSize="Large" /> </StackLayout>
</Grid>
<StackLayout Margin="20,20,20,0" Grid.Row="1" Spacing="15">
<ListView x:Name="navigationDrawerList" RowHeight="60" SeparatorVisibility="None" BackgroundColor="#e8e8e8" ItemSelected="OnMenuItemSelected">
<ListView.ItemTemplate>
<DataTemplate>
<ViewCell>
<StackLayout VerticalOptions="FillAndExpand" Orientation="Horizontal" Padding="20,10,0,10" Spacing="20">
<Image Source="{Binding Icon}" WidthRequest="40" HeightRequest="40" VerticalOptions="Center" />
<Label Text="{Binding Title}" FontSize="Medium" VerticalOptions="Center" TextColor="Black" /> </StackLayout>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</StackLayout>
</Grid>
</ContentPage>
</MasterDetailPage.Master>
<MasterDetailPage.Detail>
<NavigationPage> </NavigationPage>
</MasterDetailPage.Detail>
</MasterDetailPage>

Please make sure of the menu title name.

Step 5

Now, write some code in the master page.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
namespace XFMasterDetailPageNavigation {
public partial class MainPage: MasterDetailPage {
public List < MasterPageItem > menuList {
get;
set;
}
public MainPage() {
InitializeComponent();
menuList = new List < MasterPageItem > ();
// Adding menu items to menuList and you can define title ,page and icon
menuList.Add(new MasterPageItem() {
Title = "Home", Icon = "homeicon.png", TargetType = typeof(TestPage1)
});
menuList.Add(new MasterPageItem() {
Title = "Contact", Icon = "contacticon.png", TargetType = typeof(TestPage2)
});
menuList.Add(new MasterPageItem() {
Title = "About", Icon = "abouticon.png", TargetType = typeof(TestPage3)
});
menuList.Add(new MasterPageItem() {
Title = "Main", Icon = "icon.png", TargetType = typeof(TestPage1)
});
// Setting our list to be ItemSource for ListView in MainPage.xaml
navigationDrawerList.ItemsSource = menuList;
// Initial navigation, this can be used for our home page
Detail = new NavigationPage((Page) Activator.CreateInstance(typeof(TestPage1)));
}
// Event for Menu Item selection, here we are going to handle navigation based
// on user selection in menu ListView
private void OnMenuItemSelected(object sender, SelectedItemChangedEventArgs e) {
var item = (MasterPageItem) e.SelectedItem;
Type page = item.TargetType;
Detail = new NavigationPage((Page) Activator.CreateInstance(page));
IsPresented = false;
}
}
}

TA-DA!

Xamarin

I hope that you will like this type of navigation drawer (master-detail page) in your Xamarin.Forms App.

If you want the full source code Click Here.

4 Comments

Join the conversation! Your thoughts help the community grow.

a naqvi6y ago
Exactly the type of article I was looking for. Thank Sumit.
Esteban Chornet7y ago
Is it possible to have the master on full width?
Sanket Gupta7y ago
Sir how can i link login page with master detail page navigation.
- Sumit Singh Sisodia7y ago
  You can use ItemSelected and then you can navigate by checking the title name. Like this Var item = (MasterPageItem)e.SelectedItem; if (item.Title == "Logout") { await PopupNavigation.PushAsync(new LoginPage()); }