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

This content has 10 months. Some of the information in this post may be out of date or no longer work. Please, read this page keeping its age in your mind.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.