Toast

Namespace: DIPS.Xamarin.UI.Controls.Toast

A Toast view appears over the active page. Commonly used to give feedback to users of certain activities. The user can also interact with the Toast.

Only one Toast will be displayed at a given time in the active page. If a toast is set to display while there is a previous toast on the active Page, the previous toast will be closed immediately allowing way to display the new toast.

The displaying Toast will hide when moving away from the active Page.

Samples can be found here

👉 To get started, make sure you have followed the getting started steps

Example usage

Import the Toast control with the following using statement:

using DIPS.Xamarin.UI.Controls.Toast;

Display the Toast

You can wrap the current page in a grid called ToastContainer to where the toast is added and removed. This addition will display the toast without reseting the current pages' scrolling position.

<ToastContainer>
   ---page content---
</ToastContainer>

The DisplayToast method displays the Toast in the current page. The method takes a string, which will be the toast text. ToastOptions is used to set the basic options for the toast and ToastLayout is used to define the layout of the toast.

var options = new ToastOptions();
var layout = new ToastLayout();

Toast.DisplayToast("Hello World!", options, layout);

in here, options and layout are optional parameters.

The toast can also be displayed via,

Toast.DisplayToast("Hello World!");

This will display the Toast with the given text in default settings.

You can also display the toast using another overload method,

Toast.DisplayToast("Hello World!", options => { }, layout => { });

This is a complete example of displaying the Toast,

var options = new ToastOptions {
    ToastAction = async () =>
    {
        // something
        await Toast.HideToast();
    },
    OnBeforeDisplayingToast = toast =>
    {
        toast.TranslationY -= 50;
        return toast.TranslateTo(0, toast.TranslationY + 50, 500, Easing.Linear);
    },
    OnBeforeHidingToast = toast => toast.TranslateTo(0, -(toast.TranslationY + 50), 500, Easing.Linear),
    Duration = 5000
};

var layout = new ToastLayout {
    BackgroundColor = Color.DodgerBlue,
    CornerRadius = 10,
    FontFamily = "Arial",
    FontSize = 12,
    HasShadow = true,
    HorizontalMargin = 25,
    LineBreakMode = LineBreakMode.TailTruncation,
    MaxLines = 2,
    Padding = new Thickness(20, 10),
    PositionY = 20,
    TextColor = Color.White
};

Toast.DisplayToast("Hello World!", options, layout);

Hide the Toast

The following method simply hides the Toast displaying on the active Page.

Toast.HideToast();

Look and feel

On iOS

On Android

Toast Properties

Property	Explanation	Remarks	Default value
Current	A static property holding an active Toast instance	This is a static property	new Toast()

ToastOptions Properties

Property	Explanation	Remarks	Default value
ToastAction	Performs action on tapping the toast	Will override closing the toast on tapping	Closing the toast action
OnBeforeDisplayingToast	Triggered just before displaying the Toast	Can use to define a displaying animation. Value in milliseconds	Fading-In in 250 ms
OnBeforeHidingToast	Triggered just before hiding the Toast	Can use to define a hiding animation. Value in milliseconds	Fading-Out in 250 ms
Duration	Hide the toast automatically after the given milliseconds	If value is negative (<0), the Toast won't hide automatically	3000

ToastLayout Properties

Property	Explanation	Remarks	Default value
BackgroundColor	Gets or sets the color which will fill the background of the Toast		Color.Black
CornerRadius	Gets or sets the corner radius of the Toast		8
FontFamily	Gets or sets the font family to which the font for the Toast belongs		Null
FontSize	Gets or sets the size of the font for the Toast		11
LineBreakMode	Gets or sets the LineBreakMode for the Toast		LineBreakMode.TailTruncation
HasShadow	Gets or sets a flag indicating if the Toast has a shadow displayed		False
HorizontalMargin	The left and right margins of the Toast control in device pixels		10
MaxLines	Maximum lines for the Toast view text		1
Padding	Gap between text and Toast view border		8
PositionY	The vertical positioning of the toast from the Navigation Bar in device pixels	Value in device pixels	10
TextColor	Gets or sets the Color for the text of this Toast		Color.White