https://github.com/jcsawyer/jc.popupview.avalonia
Beautiful, animinated toasts, alerts, and other popups for Avalonia UI.
https://github.com/jcsawyer/jc.popupview.avalonia
avaloniaui dotnet popup toast ui-components xaml
Last synced: 3 months ago
JSON representation
Beautiful, animinated toasts, alerts, and other popups for Avalonia UI.
- Host: GitHub
- URL: https://github.com/jcsawyer/jc.popupview.avalonia
- Owner: jcsawyer
- License: mit
- Created: 2025-08-03T13:13:04.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-08-11T06:14:51.000Z (3 months ago)
- Last Synced: 2025-08-11T08:26:09.255Z (3 months ago)
- Topics: avaloniaui, dotnet, popup, toast, ui-components, xaml
- Language: C#
- Homepage: https://jcsawyer.com
- Size: 34 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Jc.PopupView.Avalonia
Beautiful, animinated toasts, alerts, and other popups for Avalonia UI.
---
## Table of Contents
- [Screenshots](#screenshots)
- [Introduction](#introduction)
- [Usage](#usage)
- [Get Started](#get-started)
- [Native](#native)
- [Platform Support](#platform-support)
- [Dialog Service](#dialog-service)
- [Common](#common)
- [Toasts](#toasts)
- [Sheets](#sheets)
## Screenshots
| Toasts | Sheets | Floaters | Popups |
| --- | --- | --- | --- |
| 
| 
| Coming soon | Cooming soon |
## Introduction
Jc.PopupView.Avalonia is a library to bring beautiful, animated toasts, alerts, and other popups for Avalonia UI.
This includes toast popups, iOS "sheet" likes, "floaters" and regular popups designed specifically for use with Android and iOS to make your apps beautiful with ease and interactive.
## Usage
### Get Started
To use Jc.PopupView.Avalonia you must add the `Jc.PopupView.Avalonia` package to your project.
```bash
dotnet add package Jc.PopupView.Avalonia
```
Then you must add the styles to your app styles:
```xml
```
Add a `DialogHost` control to the root of your application:
```xml
```
### Native
> **Note:** The native API is in still in preview and subject to change.
To use native dialogs you must add the `Jc.PopupView.Avalonia.Native` package to your project.
```bash
dotnet add package Jc.PopupView.Avalonia.Native
```
and the `Jc.PopupView.Avalonia.Native.X` package to your platform speciifc project(s).
```bash
dotnet add package Jc.PopupView.Avalonia.Native.Android
dotnet add package Jc.PopupView.Avalonia.Native.iOS
```
Then call `UseNativePopups()` on your `AppBuilder`, passing `this` context in for Android.
You can then use `Native.BottomSheetService.Current` to open a native dialog:
```csharp
Native.Current.BottomSheetService.ShowBottomSheet(new TextBlock { Text = "Hello, from native bottom sheet!" });
```
#### Platform Support
| Platform | Bottom Sheet |
| ---|---|
| Android | ✓ |
| Desktop | ☓ |
| iOS | ✓ |
### Dialog Service
The dialog service implements the interface `IDialogService`:
```csharp
public interface IDialogService
{
void OpenSheet(TContent content, Action? configure = null)
where TContent : Control;
void CloseSheet(TContent content)
where TContent : Control;
void OpenToast(TContent content, Action? configure = null)
where TContent : Control;
void CloseToast(TContent content)
where TContent : Control;
}
```
Each open method allows you to configure the relevant control directly before opening. To close a popup, you must pass in a reference to the control the popup is displaying (the same reference passed into the open method).
### Common
Common popup properties to be configured:
| Property | Default | Description |
| --- | --- | --- |
| IsOpen | false | Whether the popup is open - setting this value triggers animations |
| AnimationDuration | 0:0:0.2 | Popup animation duration |
| Easing | CubicEaseOut | Animation easing function |
| ClickOnOutsideToDismiss | false | Clicking outside the popup closes the popup |
| ClickToDismiss | false | Clicking the popup itself closes the popup |
| ShowBackgroundMask | true | Shows the popup background mask |
| MaskColor | | The color of the background mask |
### Toasts
```xml
```
Toasts can be configured as:
| Property | Default | Description |
| --- | --- | --- |
| ClickToDismiss | true | Clicking the popup itself closes the popup |
| ShowBackgroundMask | false | Shows the popup background mask |
| Location | Top | The location the toast appears (Top or Bottom) |
### Sheets
```xml
```
Sheets can be configured as:
| Property | Default | Description |
| --- | --- | --- |
| AnimationDuration | 0:0:0.5 | Popup animation duration |
| ClickToDismiss | false | Attempting to set this on a sheet results in an invalid operation exception |
| PillLocation | Internal | Location of the drag indicator pill (Internal or External) |
| PillColor | | The color of the drag indicator pill |