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

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