👁 Image
UXDivers.Popups.Maui 0.9.4

👁 UXDivers Popups

UXDivers Popups for .NET MAUI

👁 NuGet
👁 Downloads

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

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

License

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

Made with ❤️ by UXDivers