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.

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.

 

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

 

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.

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”. 

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”.

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.

var masterNavigation = new FreshMasterDetailNavigationContainer();
masterNavigation.Init("Menu");
masterNavigation.AddPage<Detail1PageModel>("First Page", null);
masterNavigation.AddPage<Detail2PageModel>("Second Page", null);
MainPage = masterNavigation;

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

 

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.

public partial class App: Application {
    public App() {
        try {
            InitializeComponent();
            var masterNavigation = new FreshMasterDetailNavigationContainer();
            masterNavigation.Init("Menu");
            masterNavigation.AddPage < Detail1PageModel > ("First Page", null);
            masterNavigation.AddPage < Detail2PageModel > ("Second Page", null);
            MainPage = masterNavigation;
        } catch (Exception ex) {}
    }
    protected override void OnStart() {
        // Handle when your app starts
    }
    protected override void OnSleep() {
        // Handle when your app sleeps
    }
    protected override void OnResume() {
        // Handle when your app resumes
    }
}

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.