.NET MAUI : Creating Customized Popups with Mopups

Popups are a powerful UI element to engage users with important information, actions, or requests. While the .NET MAUI CommunityToolkit offers simple popup functionality, sometimes you may need more customization and control over your popups. In this tutorial, we will explore how to implement custom popups using the Mopups library in .NET MAUI.

Prerequisites:

• A basic understanding of XAML and C#.

Install NuGet Package

Open your .NET MAUI project and install the “Mopups” NuGet package by LuckyDucko.

Initialize Mopups

In your MauiProgram.cs file, within the CreateMauiAppBuilder method, call .ConfigureMopups() on the host builder to initialize the Mopups library:

using Mopups;
// ...

public static MauiApp CreateMauiAppBuilder()
{
    var builder = MauiApp.CreateBuilder();
    // Other configurations
    builder.ConfigureMopups();
    return builder.Build();
}

Create a Custom PopupPage

Add a new ContentPage to your project and modify the base class of the XAML file to PopupPage. Add the necessary namespace declaration for the Mopups.Pages namespace:

<?xml version="1.0" encoding="utf-8" ?>
<pages:PopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:pages="clr-namespace:Mopups.Pages;assembly=Mopups"
                  x:Class="YourNamespace.CustomPopupPage">
    <!-- Your custom popup content here -->
</pages:PopupPage>

Create and Display the Popup

In your code-behind or ViewModel, you can use the MopupService to create and display your custom popup:

using Mopups.Services;
// ...

private async Task ShowCustomPopupAsync()
{
    await MopupService.Instance.PushAsync(new CustomPopupPage());
}

Tip: Adding Background Overlay

To create a partially opaque background that covers the content underneath the popup, you can set the BackgroundColor property of your PopupPage to a HEX color with transparency, like “#99272727”:

<pages:PopupPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
                  xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                  xmlns:pages="clr-namespace:Mopups.Pages;assembly=Mopups"
                  x:Class="YourNamespace.CustomPopupPage"
                  BackgroundColor="#99272727">
    <!-- Your custom popup content here -->
</pages:PopupPage>

Conclusion

The Mopups library offers a robust solution for creating customized popups in .NET MAUI applications. With the ability to fully customize the layout and presentation of your popups, Mopups provides the flexibility needed to create engaging user experiences. By following this tutorial, you can easily integrate Mopups into your .NET MAUI projects and leverage its features to create unique and interactive popups for your users.