- 🎨 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
Follow these steps to start using the library in your project:
dotnet add package UXDivers.Popups.MauiCall 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();
}
}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>Override these resource keys in your App.xaml to customize the popups:
| Resource Key | Description |
|---|---|
IconsFontFamily |
The name of the icons font family |
AppFontFamily |
The name of the main font family |
AppSemiBoldFamily |
The name of the semi-bold font family |
UXDPopupsCloseIconButton |
The glyph for close icons in popups |
UXDPopupsCheckCircleIconButton |
The glyph for circled check icons in popups |
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<uxd:DarkTheme />
<uxd:PopupStyles />
</ResourceDictionary.MergedDictionaries>
<!-- Font Customization -->
<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>
<!-- Icon Glyphs -->
<x:String x:Key="UXDPopupsCloseIconButton"></x:String>
<x:String x:Key="UXDPopupsCheckCircleIconButton"></x:String>
</ResourceDictionary>
</Application.Resources>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);
}| Popup | Description |
|---|---|
Toast |
Brief notification with icon and title |
SimpleTextPopup |
Informational popup with title and text |
SimpleActionPopup |
Confirmation dialog with two buttons |
IconTextPopup |
Prominent icon with title, text, and action |
FloaterPopup |
Floating alert with icon and message |
ActionModalPopup |
Modal with close button and action area |
ListActionPopup |
Scrollable list with action button |
OptionSheetPopup |
Bottom sheet with selectable options |
FormPopup |
User input form returning results |
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);
}
}For detailed documentation on advanced features, explore these resources:
| Topic | Description |
|---|---|
| Popup Class | Core popup classes, lifecycle, and customization |
| Custom Popups | Create your own popups with custom styling |
| Popup Controls | All 9 pre-built popup controls explained |
| Navigation | How to show, close, and pass data to popups |
| Dependency Injection | Register popups and ViewModels with DI |
| MVVM | ViewModel integration and patterns |
| Animations | Animation system and customization |
| API Reference | Complete reference for all public types and methods |
| Control | Docs Link |
|---|---|
| Toast | Toast |
| FloaterPopup | FloaterPopup |
| SimpleTextPopup | SimpleTextPopup |
| SimpleActionPopup | SimpleActionPopup |
| IconTextPopup | IconTextPopup |
| ActionModalPopup | ActionModalPopup |
| ListActionPopup | ListActionPopup |
| OptionSheetPopup | OptionSheetPopup |
| FormPopup | FormPopup |
- DemoApp - Working examples of all popup types, custom styles, and animations
This project is licensed under the Apache License 2.0 - see the LICENSE file for details.
Made with ❤️ by UXDivers