Rg Popup In Xamarin.Forms Using Fresh MVVM

Introduction

In my previous articles, we have learned how to use Fresh MVVM with Navigation Page, Master Detail Page, and Tabbed Page. If you are new to Fresh MVVM, kindly read my previous articles on Fresh MVVM to know the basics and rules of Fresh MVVM.

Coding Part

Steps

I have split this article part 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 Fresh MVVM Page & Page Models.

Step 1

Create a new project by selecting New >> Project >> 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. Again, click OK.

Step 2

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

Install-Package FreshMvvm -Version 2.2.3

Click "Install" to install this plugin against your PCL or .NET Standard project.
Then, download the Rg.Plugin.Popup by using the following NuGet package.

Install-Package Rg.Plugins.Popup -Version 1.1.5.188

Click "Install" to install this plugin against your PCL or .NET Standard project and all dependent platform projects.

Step 3

Create your XAML page (View) with name ending with “Page”.
Create PageModel by creating Class with a name ended with “PageModel” and inherited with “FreshBasePageModel”, as shown below.
I have created the Page and PageModel named as “MainPage” & “MainPageModel” respectively and set this page as Main Page/Root Page of the application, as shown in the following.

Set MainPage

We need to set the MainPageModel as MainPage using FreshNavigationConatiner. Open App.xaml.cs or App.cs and set MainPage.
1. // To set MainPage for the Application
2. var page = FreshPageModelResolver.ResolvePageModel<MainPageModel>();
3. var basicNavContainer = new FreshNavigationContainer(page);
4. MainPage = basicNavContainer;

Then, create a Popup Page using Rg.Plugins.Popup by adding “<popup:PopupPage />”. The following code snippet shows how to create a popup using Rg.Plugin. I have created a Xamarin.Forms page and named it as “MyPopupPage.xaml”.
1. <?xml version="1.0" encoding="utf-8" ?>
2. <popup:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
3. xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4. xmlns:popup="clr-namespace:Rg.Plugins.Popup.Pages;assembly=Rg.Plugins.Popup"
5. CloseWhenBackgroundIsClicked="True"
6. x:Class="Popup.MyPopupPage">
7. <popup:PopupPage.Content>
8. <StackLayout Padding="10"
9. BackgroundColor="White"
10. HorizontalOptions="Center"
11. VerticalOptions="Center">
12. <Label Text="Fresh MVVM Rg.Plugin.Popup"
13. VerticalOptions="CenterAndExpand"
14. HorizontalOptions="CenterAndExpand" />
15. <Button Command="{Binding ClosePopupCommand}"
16. Text="Close Popup"/>
17. </StackLayout>
18. </popup:PopupPage.Content>
19. </popup:PopupPage>

The code behind has “PopupPage” as parent page like shown in the following code part.
1. public partial class MyPopupPage : PopupPage
2. {
3. public MyPopupPage ()
4. {
5. InitializeComponent ();
6. }
7. }

Then, create a Page Model for the created Popup Page with Fresh MVVM rules. If you have not remembered the rules or are new to Fresh MVVM, kindly refer to my previous articles on Fresh MVVM.
1. public class MyPopupPageModel : FreshBasePageModel
2. {
3. }

Rg Popup Page has a separate Navigation Stack. So, open and close the popup, we need to have a separate Navigation Stack. To know more about Rg.Plugin.Popup, refer to the GitHub Link.

Rg.Plugin.Popup Link - https://github.com/rotorgames/Rg.Plugins.Popup

Then, include Fresh MVVM extension/Utility class to your Xamarin Shared Project. This extension file is created and open sourced by the author “Libin Joseph”. You can download this file from the following GitHub Link.

Fresh MVVM Extension Link - https://github.com/libin85/FreshMvvm.Popup/

The same can be found in my Fresh MVVM Sample for Rg.Plugins.

To open popup page like navigating to normal Fresh MVVM page, use the following code snippet.
1. return new Command(async () =>
2. {
3. await CoreMethods.PushPopupPageModel<MyPopupPageModel>();
4. });

To close the popup page like closing normal Fresh MVVM page, use the following code snippet.
1. return new Command(async () =>
2. {
3. await CoreMethods.PopPopupPageModel();
4. });

Demo

The below screenshots for your reference.

Main Page

Rg Popup Page

Reference

Fresh MVVM	https://github.com/rid00z/FreshMvvm
Rg.Plugin.Popup	https://github.com/rotorgames/Rg.Plugins.Popup
Fresh MVVM Popup Extension	https://github.com/libin85/FreshMvvm.Popup/

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 find it useful, do like, share the article, and star the repository on GitHub.