Notifying people when you have information that (might) be relevant is important. Leaving people clueless can lead be very confusing and frustrating. We provide different APIs or views that you can use to make sure people are happy.

System Message

A system message is a message that is displayed at the top of the screen.

Inspiration

Android Developer - Toast

Configuration

A system message can be configured when calling the function to display the system message, with the ISystemMessageConfigurator interface.

Usage

In the following example a system message with the text: "A system message" and a duration of 2 seconds is displayed.

SystemMessageService.Display(config =>
        {
            config.Text = "A system message";
            config.Duration = 2000;
        });

Dialogs

Dialogs presents critical information that users needs right away. There are three different dialogs:

• Regular. A dialog with a title, description and a single button.
• Confirmation. A dialog with a title, description, a cancel button and a confirmation button.
• Destructive. A dialog with a title, description, a cancel button and a destructive button.

Inspiration

Material Design 2 - Dialogs

iOS Developer - Alerts

Usage

In the following example a Regular dialog is presented with title, description and action title set. The function will return a DialogAction that either tells the system that the user cancelled the dialog or tapped the action button.

 var result = await DialogService.ShowMessage("Title", 
                "Description", 
                "OK");

API

Inspect the DialogService class to examine how it is used.

AlertView

Alerts can be used when you need to display information in line of your apps page to people. There are different types of styles:

• Information
• Warning
• Success
• Error

You need to provide a good title along with a description.

You can optionally display a left / right button that people can tap.

Usage

<dui:AlertView Title="Informing title"
            Description="This is a description that will provide you with information."
            Style="{dui:Styles Alert=Information}"
            LeftButtonText="{Binding ButtonText}"
            LeftButtonCommand="{Binding Command}"
            LeftButtonCommandParameter="Here's the info!"
            />

...
<dui:AlertView Title="Something went wrong"
            Description="Something terribly wrong happened."
            Style="{dui:Styles Alert=Error}" />


...
<dui:AlertView Title="We warn you"
            Description="Dont do it...okay do it. No, dont!"
            Style="{dui:Styles Alert=Warning}" />

...
<dui:AlertView Title="Yey"
            Description="Good job! You did it!"
            Style="{dui:Styles Alert=Success}" />

Button Alignment

The ButtonAlignment property allows you to determine how the buttons should align on the AlertView:

• Inline - The buttons will align to the top right of the view, wrapping the title and description.
• Underlying - The buttons will align underneath the title and description.
• Auto - The mode will be determined automatically. If the buttons can fit in-line without wrapping the title or description, Inline will be used. Otherwise, Underlying will be used.

The default value for ButtonAlignment is Auto.