MOPUP (Alternative to Rg.Plugin.Popup) in .NET MAUI

Introduction

.NET MAUI, a cross-platform framework, empowers developers to build native mobile and desktop applications using C# and XAML. It enables the creation of apps that seamlessly operate on Android, iOS, macOS, and Windows, all from a unified codebase. This open-source platform is an advancement of Xamarin Forms, expanding its reach to desktop scenarios while enhancing UI controls for improved performance and extensibility.

Mopups is a replacement for the "Rg.Plugins.Popups" plugin for Xamarin. Mopups intends to provide a similar experience to this plugin. However also cleans up the code base and provides forward-looking enhancements.

In this article, we will see how we can see the alternative to Rg.Plugin.Popup - MOPUP Page in .NET MAUI project.

Quick Links

• Project Setup
• Install Mopup Plugin
• Implementation
• Demo
• Full Code
• Download Code

Project Setup

• Launch Visual Studio 2022, and in the start window, click Create a new project to create a new project.

• In the Create a new project window, select MAUI in the All project types drop-down, select the .NET MAUI App template, and click the Next button:

• In the Configure your new project window, name your project, choose a suitable location for it, and click the Next button:

• In the Additional information window, click the Create button:

• Once the project is created, we can able to see the Android, iOS, Windows and other running options in the toolbar. Press the emulator or run button to build and run the app

Install Plugins

Open NuGet Package Manager. Search MOPUPS and click install to install the plugins in the projects.

Implementation of MOPUP

Initialize Mopups

In your MauiProgram.cs file, inside the CreateMauiAppBuilder method, include a call to.ConfigureMopups() on the host builder to set up the Mopups library:

using Mopups;
// ... 
public static MauiApp CreateMauiAppBuilder()
{
    var builder = MauiApp.CreateBuilder();
    // Other configurations
    builder.ConfigureMopups();
    builder.Services.AddSingleton<IPopupNavigation>(MopupService.Instance);
    builder.Services.AddTransient<MainPage>();
    return builder.Build();
}

Create a Custom PopupPage

Include a new ContentPage in your project and update the base class of the XAML file to PopupPage. Don't forget to add the required namespace declaration for the Mopups.Pages namespace:

<?xml version="1.0" encoding="utf-8" ?>
<mopup:PopupPage xmlns="http://xamarin.com/schemas/2014/forms"
                 xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                 xmlns:local="clr-namespace:YourNamespace"
                 xmlns:mopup="clr-namespace:Mopups.Pages;assembly=Mopups"
                 x:Class="YourNamespace.YourPopupPage">

    <!-- Your PopupPage content goes here -->

</mopup:PopupPage>

Create and Display the Popup

Open MainPage.xaml.cs add the event to open the popup like below.

public partial class MainPage : ContentPage
{
	IPopupNavigation popupNavigation;

	public MainPage(IPopupNavigation popupNavigation)
	{
		InitializeComponent();

		this.popupNavigation = popupNavigation;
	}

	private void OnCounterClicked(object sender, EventArgs e)
	{
		popupNavigation.PushAsync(new MyPopupPage());
	}
}

Add the following code to close the popup screen.

MopupService.Instance.PopAsync();

Full Code

using Mopups.Interfaces;

namespace MauiMopUp
{
    public partial class MainPage : ContentPage
    {
        IPopupNavigation popupNavigation;

        public MainPage(IPopupNavigation popupNavigation)
        {
            InitializeComponent();

            this.popupNavigation = popupNavigation;
        }

        private void OnCounterClicked(object sender, EventArgs e)
        {
            popupNavigation.PushAsync(new MyPopupPage());
        }
    }

}

using Microsoft.Extensions.Logging;
using Mopups.Hosting;
using Mopups.Interfaces;
using Mopups.Services;

namespace MauiMopUp
{
    public static class MauiProgram
    {
        public static MauiApp CreateMauiApp()
        {
            var builder = MauiApp.CreateBuilder();
            builder
                .UseMauiApp<App>()
                .ConfigureMopups()
                .ConfigureFonts(fonts =>
                {
                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
                });

#if DEBUG
    		builder.Logging.AddDebug();
#endif
            builder.Services.AddSingleton<IPopupNavigation>(MopupService.Instance);
            builder.Services.AddTransient<MainPage>();
            return builder.Build();
        }
    }
}

<?xml version="1.0" encoding="utf-8" ?>
<mopups:PopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:mopups="clr-namespace:Mopups.Pages;assembly=Mopups"
             xmlns:mopupsanim="clr-namespace:Mopups.Animations;assembly=Mopups"
             x:Class="MauiMopUp.MyPopupPage"             
             Title="MyPopupPage" 
                  BackgroundColor="#80000000" 
                  CloseWhenBackgroundIsClicked="False">
    <mopups:PopupPage.Animation>
        <mopupsanim:ScaleAnimation
            DurationIn="700"
            EasingIn="BounceOut"
            PositionIn="Bottom"
            PositionOut="Center"
            ScaleIn="1"
            ScaleOut="0.7" />
    </mopups:PopupPage.Animation>
    <ScrollView HorizontalOptions="Center" VerticalOptions="Center">
        <Border WidthRequest="300" HeightRequest="300"
                BackgroundColor="White"
                HorizontalOptions="Center">
            <Border.StrokeShape>
                <RoundRectangle CornerRadius="40,0,0,40"/>
            </Border.StrokeShape>
            <VerticalStackLayout Spacing="3">
                <Entry
                    x:Name="UsernameEntry"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    Placeholder="Username" />

                <Entry
                    x:Name="PasswordEntry"
                    HorizontalOptions="Center"
                    VerticalOptions="Center"
                    IsPassword="True"
                    Placeholder="Password" />

                <Button
                    x:Name="LoginButton"
                    Margin="10,5"
                    HorizontalOptions="Fill"
                    VerticalOptions="EndAndExpand"
                    Text="Login"
                    Clicked="LoginButton_Clicked">
                </Button>
            </VerticalStackLayout>
        </Border>

    </ScrollView>

</mopups:PopupPage>

using Mopups.Pages;
using Mopups.Services;

namespace MauiMopUp;

public partial class MyPopupPage: PopupPage
{
	public MyPopupPage()
	{
		InitializeComponent();
	}

    private void LoginButton_Clicked(object sender, EventArgs e)
    {
        MopupService.Instance.PopAsync();
    }
}

Demo

Download Code

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

References

• https://github.com/LuckyDucko/Mopups