Skip to content
Håvard Moås edited this page Aug 11, 2020 · 27 revisions

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.

Source Code can be found here

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

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

toast_ios_demo

On Android

toast_droid_demo

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 Margin 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
Clone this wiki locally