Jc.PopupView.Avalonia 0.3.200

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

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

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:

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: