UXDivers.Popups.Maui 0.9.4

UXDivers Popups for .NET MAUI

Introduction

• 🎨 9 Ready-to-Use Popups — Toast, Floater, ActionModal, SimpleText, SimpleAction, IconText, ListAction, OptionSheet, Form
• 🎬 14 Animation Types — Fade, Scale, Move, Rotate, and Storyboard Combinations
• 📱 Cross-Platform — iOS, Android, Windows, macOS
• 🎯 MVVM Ready — Full ViewModel and data binding support
• 💉 Dependency Injection — Seamless DI integration
• 🎭 Themeable — Dark theme included, fully customizable
• ⚡ Lightweight — Minimal footprint, maximum performance

🚀 Setup

Follow these steps to start using the library in your project:

1. Install the NuGet Package

dotnet add package UXDivers.Popups.Maui

2. Configure MauiProgram.cs

Call the UseUXDiversPopups extension method in your MauiProgram.cs:

using UXDivers.Popups.Maui.Controls;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .UseUXDiversPopups();  // 👈 Add this line

        return builder.Build();
    }
}

Android Back Button: By default, pressing the Android back button closes the topmost popup. To disable this behavior, pass closePopupOnBackAndroid: false to UseUXDiversPopups(). See Navigation - Android Back Button for details.

3. Add Theme Resources to App.xaml

Add the DarkTheme and PopupStyles resource dictionaries to your App.xaml:

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:uxd="clr-namespace:UXDivers.Popups.Maui.Controls;assembly=UXDivers.Popups.Maui"
             x:Class="YourApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.MergedDictionaries>
                <uxd:DarkTheme />
                <uxd:PopupStyles />
            </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

4. Optional: Customize Resources

Override these resource keys in your App.xaml to customize the popups:

<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <uxd:DarkTheme />
            <uxd:PopupStyles />
        </ResourceDictionary.MergedDictionaries>

        
        <x:String x:Key="IconsFontFamily">MaterialIcons</x:String>
        <x:String x:Key="AppFontFamily">OpenSans-Regular</x:String>
        <x:String x:Key="AppSemiBoldFamily">OpenSans-SemiBold</x:String>

        
        <x:String x:Key="UXDPopupsCloseIconButton">&#xE5CD;</x:String>
        <x:String x:Key="UXDPopupsCheckCircleIconButton">&#xE86C;</x:String>
    </ResourceDictionary>
</Application.Resources>

📲 Showing a Popup

Create an instance of a popup and show it using the IPopupService:

using UXDivers.Popups.Maui.Controls;

public async void OnShowPopupClicked()
{
    var popup = new Toast()
    {
        Title = "Update Success"
    };

    await IPopupService.Current.PushAsync(popup);
}

Available Popup Types

🎨 Custom Popup

Create your own popup by extending PopupPage:

<?xml version="1.0" encoding="utf-8" ?>
<uxd:PopupPage 
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:uxd="clr-namespace:UXDivers.Popups.Maui;assembly=UXDivers.Popups.Maui"
    x:Class="YourNamespace.MyCustomPopup"
    BackgroundColor="{DynamicResource PopupBackdropColor}"
    AppearingAnimation="{uxd:FadeInPopupAnimation Duration=300}"
    DisappearingAnimation="{uxd:FadeOutPopupAnimation Duration=300}"
    CloseWhenBackgroundIsClicked="True"
    >
    <Border 
        VerticalOptions="Center"
        HorizontalOptions="Center"
        BackgroundColor="{DynamicResource PopupBorderColor}"
        Stroke="{DynamicResource PopupBorderColor}"
        StrokeThickness="1">
        <Border.StrokeShape>
            <RoundRectangle CornerRadius="16" />
        </Border.StrokeShape>

        <VerticalStackLayout Padding="24" Spacing="16">
            <Label 
                Text="Welcome!"
                FontSize="24"
                HorizontalOptions="Center" 
                TextColor="{DynamicResource TextColor}"
                />

            <Label 
                Text="This is your custom popup!"
                HorizontalOptions="Center"
                TextColor="{DynamicResource TextColor}" />
        </VerticalStackLayout>
    </Border>
</uxd:PopupPage>

using UXDivers.Popups.Maui;

namespace YourApp.Popups;

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

    private async void OnCloseClicked(object sender, EventArgs e)
    {
        await IPopupService.Current.PopAsync(this);
    }
}

📚 Learn the Advanced

For detailed documentation on advanced features, explore these resources:

Documentation

Popup Controls Reference

Additional Resources

• DemoApp - Working examples of all popup types, custom styles, and animations

License

This project is licensed under the Apache License 2.0 - see the LICENSE file for details.

Made with ❤️ by UXDivers