Skip to main content
Version: 9.0

Popups

Getting Started​

The Prism.Plugin.Popups package has been hugely popular, enabling developers to leverage popup dialogs in their applications. Following the introduction of the IDialogService, the Popup Plugin was updated to transition popup usage to dialogs. This change helps developers avoid strong dependencies on third-party libraries, as the IDialogService offers flexible implementation options should community packages become unmaintained.

For .NET MAUI developers, the Popup Plugin will no longer be publicly available on NuGet.org. Instead, it will be exclusively provided to those with a Commercial Plus license. This decision supports the project's long-term sustainability, as maintaining and enhancing the plugin demands significant resources. Restricting access to licensed users allows us to allocate these resources effectively, ensuring continued development and improved support for our customers.

Setup​

To integrate Prism.Plugin.Popups.Maui into your .NET MAUI project, follow these steps:

  1. Install the NuGet Package
    Add the Prism.Plugin.Popups.Maui package to your .NET MAUI project using NuGet Package Manager or by running:

    dotnet add package Prism.Plugin.Popups.Maui

  2. Register the Plugin
    In your MauiProgram.cs, configure Prism to use the plugin by adding the following code:

    builder.UseMauiApp<App>()
        .UsePrism(prism => prism.ConfigureMopupDialogs());

  3. Register Your Dialog Views
    Dialogs must be registered with Prism's dialog service (not navigated to like regular pages). For example:

    containerRegistry.RegisterDialog<MyDialog>();

    This registers a dialog view named MyDialog with the Prism container.

Creating a Dialog View​

A dialog view typically inherits from ContentView or a similar base class. You can use XAML to define the content and customize its behavior with attached properties from the PopupDialogLayout class.

Here's a basic template:

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="http://prismlibrary.com"
             x:Class="YourNamespace.YourDialog">
    <!-- Your popup content here -->
</ContentView>

Attached Properties​

The PopupDialogLayout class provides several attached properties to customize popup dialogs. Below is a list of these properties, their purposes, and examples:

HasSystemPadding​

  • Type: bool
  • Default: true
  • Description: Controls whether the popup respects system padding (e.g., status bar, navigation bar). Set to false for full-screen popups.
  • Example: 
    prism:PopupDialogLayout.HasSystemPadding="False"

SystemPadding​

  • Type: Thickness
  • Default: 0,0,0,0
  • Description: Specifies custom padding around the popup, overriding system padding if needed.
  • Example: 
    prism:PopupDialogLayout.SystemPadding="20,40,20,20"

Animation​

  • Type: IPopupAnimation
  • Default: ScaleAnimation
  • Description: Defines the animation for popup appearance/disappearance. Use Mopups library animations (e.g., MoveAnimation) or custom ones.
  • Example: 
    <prism:PopupDialogLayout.Animation>
        <animation:MoveAnimation PositionIn="Top" PositionOut="Bottom" />
    </prism:PopupDialogLayout.Animation>

IsAnimationEnabled​

  • Type: bool
  • Default: true
  • Description: Enables/disables animations. Set to false for instant popup display.
  • Example: 
    prism:PopupDialogLayout.IsAnimationEnabled="False"

SystemPaddingSides​

  • Type: PaddingSide
  • Default: PaddingSide.All
  • Description: Specifies which sides receive system padding (e.g., All, Top, Bottom, Left, Right).
  • Example: 
    prism:PopupDialogLayout.SystemPaddingSides="Top,Bottom"

BackgroundInputTransparent​

  • Type: bool
  • Default: false
  • Description: If true, taps pass through to the background UI; if false, the background captures taps.
  • Example: 
    prism:PopupDialogLayout.BackgroundInputTransparent="True"

HasKeyboardOffset​

  • Type: bool
  • Default: true
  • Description: Adjusts the popup position when the keyboard appears. Set to false if no adjustment is needed.
  • Example: 
    prism:PopupDialogLayout.HasKeyboardOffset="False"

KeyboardOffset​

  • Type: double
  • Default: 0
  • Description: Adds an extra offset (in pixels) when the keyboard appears.
  • Example: 
    prism:PopupDialogLayout.KeyboardOffset="10"

Example Dialog View​

Here's a complete example combining several attached properties:

<ContentView xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:prism="http://prismlibrary.com"
             xmlns:animation="clr-namespace:Mopups.Animations;assembly=Mopups"
             prism:PopupDialogLayout.HasSystemPadding="False"
             prism:PopupDialogLayout.IsAnimationEnabled="True"
             x:Class="MauiApp2.MyDialog">
    <prism:PopupDialogLayout.Animation>
        <animation:MoveAnimation PositionIn="Top" PositionOut="Bottom" />
    </prism:PopupDialogLayout.Animation>
    <VerticalStackLayout>
        <Label Text="Welcome to .NET MAUI!"
               VerticalOptions="Center"
               HorizontalOptions="Center" />
    </VerticalStackLayout>
</ContentView>

In this example:

  • HasSystemPadding="False" makes the popup full-screen.
  • IsAnimationEnabled="True" activates animations.
  • MoveAnimation slides the popup from the top in and out to the bottom.

Showing the Dialog​

Use Prism's IDialogService to display the dialog from a view model:

public class MyViewModel
{
    private readonly IDialogService _dialogService;

    public MyViewModel(IDialogService dialogService)
    {
        _dialogService = dialogService;
    }

    public async Task ShowDialogAsync()
    {
        await _dialogService.ShowDialogAsync("MyDialog");
    }
}
  • Inject IDialogService via constructor.
  • Call ShowDialogAsync with the registered dialog name.