Master Details Page In Xamarin.Forms Using FreshMVVM

In this tutorial, we will learn how to create Master details Page in Xamarin.Forms using FreshMVVM.

Introduction

We already learned how to perform MVVM Databinding with Fresh MVVM in my previous tutorials. If you are new to FreshMVVM, you can read the article here.

Master Detail Page In Xamarin.Forms Using Fresh MVVM

FreshMVVM

FreshMVVM is designed to implement MVVM easily with Xamarin.Forms applications. It is created by Michael Ridland. It has certain rules to perform MVVM Databinding. You can find the plugin from GitHub and NuGet.

Kindly refer to my previous article on FreshMVVM to know the basics and rules of FreshMVVM.

Coding Part

Steps

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

  • Step 1: Creating new Xamarin.Forms project.
  • Step 2: Setting up the plugin for Xamarin.Forms application.
  • Step 3: Implementing FreshMVVM.

Step 1

Create a new project by selecting New >> Project >> Xamarin Cross-Platform App and click OK.

Master Detail Page In Xamarin.Forms Using FreshMVVM 

Select Android and iOS platforms, as shown below, with Code Sharing Strategy as PCL or .NET Standard and click OK.

Master Detail Page In Xamarin.Forms Using FreshMVVM 

Step 2

We will start coding for Fresh MVVM. Create a new Xamarin.Forms project. Open NuGet Package Manager against the solution and search for Fresh MVVM plugin or paste the following NuGet Installation.

Master Detail Page In Xamarin.Forms Using FreshMVVM
Install-Package FreshMvvm -Version 2.2.3

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

Step 3

Create your XAML page (View) with name “Page”. 

Master Detail Page In Xamarin.Forms Using FreshMVVM

Create PageModel by creating a class name ending with “PageModel” and inherited with “FreshBasePageModel” as shown in the below screenshot.

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

Master Detail Page In Xamarin.Forms Using FreshMVVM

Set MainPage

To create Fresh MVVM Master Detail Page as MainPage, we should use Fresh Master Details Navigation Container with the following code.

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

  1. var masterNavigation = new FreshMasterDetailNavigationContainer();  
  2. masterNavigation.Init("Menu");  
  3. masterNavigation.AddPage<Detail1PageModel>("First Page"null);  
  4. masterNavigation.AddPage<Detail2PageModel>("Second Page"null);  
  5. MainPage = masterNavigation;  

Then click Run. Your Master Details page will look like the below screenshot.

Master Detail Page In Xamarin.Forms Using FreshMVVM Master Detail Page In Xamarin.Forms Using FreshMVVM

Here, we will not talk about navigation between pages. If you want to know, you can see my previous article on Fresh MVVM.

Full code for App.xaml.cs

You can find the code for App.xaml.cs below.

  1. public partial class App: Application {  
  2.     public App() {  
  3.         try {  
  4.             InitializeComponent();  
  5.             var masterNavigation = new FreshMasterDetailNavigationContainer();  
  6.             masterNavigation.Init("Menu");  
  7.             masterNavigation.AddPage < Detail1PageModel > ("First Page"null);  
  8.             masterNavigation.AddPage < Detail2PageModel > ("Second Page"null);  
  9.             MainPage = masterNavigation;  
  10.         } catch (Exception ex) {}  
  11.     }  
  12.     protected override void OnStart() {  
  13.         // Handle when your app starts  
  14.     }  
  15.     protected override void OnSleep() {  
  16.         // Handle when your app sleeps  
  17.     }  
  18.     protected override void OnResume() {  
  19.         // Handle when your app resumes  
  20.     }  
  21. }  

Download Code

You can download the code from GitHub. If you have doubts, feel free to post a comment. If you like this article and found it useful, do like and share the article. Don't forget to star the repository on GitHub.