Jc.PopupView.Avalonia 1.1.0

Jc.PopupView.Avalonia

Beautiful, animinated toasts, alerts, and other popups for Avalonia UI.

Table of Contents

• Screenshots
• Introduction
• Usage
  • Get Started
  • Native
    • Platform Support
    • Screenshots
  • Dialog Service
  • Common
  • Toasts
  • Sheets
  • Floaters
  • Popups

Screenshots

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.

dotnet add package Jc.PopupView.Avalonia

Then you must add the styles to your app styles:

<Application.Styles>
    
    <popup:JcPopupView />
</Application.Styles>

Add a DialogHost control to the root of your application:

<popup:DialogHost>
    
</popup:DialogHost>

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.

dotnet add package Jc.PopupView.Avalonia.Native

and the Jc.PopupView.Avalonia.Native.X package to your platform speciifc project(s).

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:

Native.Current.BottomSheetService.ShowBottomSheet(new TextBlock { Text = "Hello, from native bottom sheet!" });

Platform Support

Native Screenshots

Dialog Service

The dialog service implements the interface IDialogService:

public interface IDialogService
{
    void OpenSheet<TContent>(TContent content, Action<Sheet>? configure = null)
        where TContent : Control;
    void CloseSheet<TContent>(TContent content)
        where TContent : Control;
    void OpenToast<TContent>(TContent content, Action<Toast>? configure = null)
        where TContent : Control;
    void CloseToast<TContent>(TContent content)
        where TContent : Control;
    void OpenFloater<TContent>(TContent content, Action<Floater>? configure = null)
        where TContent : Control;
    void CloseFloater<TContent>(TContent content)
        where TContent : Control;
    void OpenPopup<TContent>(TContent content, Action<Popup>? configure = null)
        where TContent : Control;
    void ClosePopup<TContent>(TContent content)
        where TContent : Control;

    Task<IPopupHandle> ShowToastAsync<TContent>(
        TContent content,
        Action<Toast>? configure = null,
        CancellationToken cancellationToken = default)
        where TContent : Control;

    Task<IPopupHandle> ShowFloaterAsync<TContent>(
        TContent content,
        Action<Floater>? configure = null,
        CancellationToken cancellationToken = default)
        where TContent : Control;

    Task<IPopupHandle> ShowSheetAsync<TContent>(
        TContent content,
        Action<Sheet>? configure = null,
        CancellationToken cancellationToken = default)
        where TContent : Control;

    Task<IPopupHandle> ShowPopupAsync<TContent>(
        TContent content,
        Action<Popup>? configure = null,
        CancellationToken cancellationToken = default)
        where TContent : Control;

    Task<TResult?> ShowSheetForResultAsync<TResult, TContent>(
        TContent content,
        Action<Sheet>? configure = null,
        CancellationToken cancellationToken = default)
        where TContent : Control, IPopupResultSource;

    Task<TResult?> ShowToastForResultAsync<TResult, TContent>(
        TContent content,
        Action<Toast>? configure = null,
        CancellationToken cancellationToken = default)
        where TContent : Control, IPopupResultSource;

    Task<TResult?> ShowFloaterForResultAsync<TResult, TContent>(
        TContent content,
        Action<Floater>? configure = null,
        CancellationToken cancellationToken = default)
        where TContent : Control, IPopupResultSource;

    Task<TResult?> ShowPopupForResultAsync<TResult, TContent>(
        TContent content,
        Action<Popup>? configure = null,
        CancellationToken cancellationToken = default)
        where TContent : Control, IPopupResultSource;

    Task<bool> DismissTopMostAsync(CancellationToken cancellationToken = default);
    Task<int> DismissAllAsync(CancellationToken cancellationToken = default);
}

Open*/Close* methods remain available for direct control-based usage. The new async Show*Async APIs provide transient-style handles, options, and top-most dismissal.

DismissTopMostAsync dismisses whichever dialog is currently top-most in the active DialogHost, including dialogs opened declaratively, via Open*, or via Show*Async.

DismissAllAsync dismisses every currently open dialog in the active DialogHost and returns the number dismissed.

IPopupHandle can be used to dismiss a specific popup instance:

var handle = await dialogService.ShowToastAsync(
    new ToastContent(),
    toast =>
    {
        toast.Location = ToastLocation.Bottom;
        toast.ClickOutsideToDismiss = true;
    });

await handle.DismissAsync();

For result-based popups, implement IPopupResultSource on your content and use the corresponding Show*ForResultAsync method.

Configuration for Show*Async and Show*ForResultAsync is done by passing the same popup-specific configure actions used by Open* methods (Action<Sheet>, Action<Toast>, Action<Floater>, Action<Popup>).

Common

Common popup properties to be configured:

Toasts

Toasts are simple, edge-bound popups normally used to indicate information to the user in a non-obtrusive way.

<popup:DialogHost.Toasts>
    <popup:Toast>
        
    </popup:Toast>
</popup:DialogHost.Toasts>

Toasts can be configured as:

Sheets

Sheets arise from the bottom of the screen, behaving in a stackable way. They provide a means of laying content over the top of previous content that can be dismissed via drags.

<popup:DialogHost.Sheets>
    
    <popup:Sheet>
        
    </popup:Sheet>
</popup:DialogHost.Sheets>

Sheets can be configured as:

Floaters

Floaters are similar to toasts but are not fixed to the edges of the display and so appear to "float".

<popup:DialogHost.Floaters>
    
    <popup:Floater>
    
    </popup:Floater>
</poppDialogHost.Floaters>

Floaters can be configred as:

Popups

Popups are modal overlays intended for focused actions and confirmations.

<popup:DialogHost.Popups>
    <popup:Popup Position="Center">
        
    </popup:Popup>
</popup:DialogHost.Popups>

Popups can be configured as:

Popup behavior notes:

• Popups are modal overlays and are not drag-to-dismiss.
• Dismiss popup content with DialogService.ClosePopup(content) or by tapping the backdrop when ClickOutsideToDismiss is enabled.
• Set ContentMargin to 0 on bottom popups to attach content flush to the bottom edge.

When animation overrides are not specified:

• Center popups default to scale-in/scale-out.
• Bottom popups default to slide-in/slide-out.