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.

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.

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

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

Step-1

Create a folder which is named MenuItems and Views.

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



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 =>

1. Home Page
2. Setting Page
3. Help Page
4. 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>
                                    <!-- Main design for our menu items -->
                                    <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!

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.