Custom Master Detail Page in Xamarin.Forms using Fresh MVVM

Introduction:

In this tutorial, we will learn how to use master detail page using Fresh MVVM with FreshNavigationContainer. It has some work around for creating master detail page more than creating master detail page using FreshMasterContainer. In my previous tutorials, we have learned the method to create master detail page using Fresh Master Container. To know more, visit my previous article.

Kindly refer my previous article on Fresh MVVM to know the basics & rules of Fresh MVVM.

Coding Part:

Steps:

I have split this part into 3 steps as in the following.

1. Creating new Xamarin.Forms Projects.
2. Setting up the plugin for Xamarin.Forms Application.
3. Implementing Fresh MVVM.

Step 1: Creating new Xamarin.Forms Projects

Create New Project by Selecting New -> Project -> Select Xamarin Cross Platform App and Click OK.

Then Select Android and iOS Platforms as shown below with Code Sharing Strategy as PCL or .Net Standard and Click OK.

Step 2: Setting up the plugin for Xamarin.Forms Application

We will start coding for Fresh MVVM. Create New Xamarin Forms Project. Open Nuget Package Manager against the solution and do search for Fresh MVVM Plugin or Paste the following Nuget Installation.

Install-Package FreshMvvm -Version 2.2.3

Click Install to install this Plugin against your PCL Project or .NET standard Project.

Step 3: Implementing Fresh MVVM.

1. Create your XAML page (view) with name ended up with “Page”.
   
2. Create PageModel by create Class name ended with “PageModel” and inherited with “FreshBasePageModel” as shown below screenshot.
   

In the same way, I have created pages “MyMasterDetailPage”, “MasterPage”, “Detail1Page” and “Detail2Page” with two respective models “MyMasterDetailPageModel”, “MasterPageModel”, “Detail1PageModel” and “Detail2PageModel”.

Here,

MyMasterDetailPage	container to have both Master & Detail page
MasterPage	Master or Menu Page
Detail1Page, Detail2Page	Detail pages of the Master detail page

Set MainPage:

We need to set the MainPageModel as MainPage using FreshNavigationConatiner.

1. Open App.xaml.cs or App.cs and set MainPage.

   // To set MainPage for the Application
   var page = FreshPageModelResolver.ResolvePageModel();
   var basicNavContainer = new FreshNavigationContainer(page);
   MainPage = basicNavContainer;

2. Then add button with command for opening the MasterDetailPage from MainPage.

   public Command GotoSecondPageCommand
   {
       get
       {
           return new Command(async () =>
           {
               await CoreMethods.PushPageModel();
           });
       }
   }

3. Open MyMasterDetailPage and add Master, Detail page to the constructor of the page like below.

   public MyMasterDetailPage()
   {
       InitializeComponent();
   
       NavigationPage.SetHasNavigationBar(this, false);
   
       Master = FreshPageModelResolver.ResolvePageModel();
       Detail = new NavigationPage(FreshPageModelResolver.ResolvePageModel());
   }

4. Then click “Run” to see your Custom Master Detail Page using FreshMVVM with FreshNavigationContainer.

By this way, we can have Navigation Service & Stack for all type of Pages. Kindly find the screenshot for your reference.

MainPage	Master Page(Detail)	Master Page(Master)

Download Code

You can download the code from GitHub. If you have doubt, feel free to post comment. If you like this article and is useful to you, do like, share the article & star the repository on GitHub.