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

Toasts	Sheets	Floaters	Popups
			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.

dotnet add package Jc.PopupView.Avalonia

Then you must add the styles to your app styles:

<Application.Styles>
    <!-- Existing Themes -->
    <popup:JcPopupView />
</Application.Styles>

Add a DialogHost control to the root of your application:

<popup:DialogHost>
    <!-- Your content goes here -->
</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

Platform	Bottom Sheet
Android	✓
Desktop	☓
iOS	✓

Native Screenshots

	Android	iOS
Bottom Sheets

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:

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

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

<popup:DialogHost.Toasts>
    <popup:Toast>
        <!-- Toast content -->
    </popup:Toast>
</popup:DialogHost.Toasts>

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

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>
    <!-- Sheets -->
    <popup:Sheet>
        <!-- Sheet content -->
    </popup:Sheet>
</popup:DialogHost.Sheets>

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

Floaters

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

<popup:DialogHost.Floaters>
    <!-- Floaters -->
    <popup:Floater>
    <!-- Floter content -->
    </popup:Floater>
</poppDialogHost.Floaters>

Floaters can be configred 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 floater appears (Top or Bottom)
ShadowOffsetX	0	The drop shadow offset along the X axis
ShadowOffsetY	5	The drop shadow offset along the Y axis
ShadowColor	#3a000000	The drop shadow color
Padding	15 15 15 15	The space between the floater and the end of the screen