Pop-Ups In Xamarin.Forms

Targeted Audience

People with a basic knowledge of XAML and C#. 

Let’s start our discussion with the uses of pop-ups.

Pop-ups are used to

• Gain user attention
• Display alerts
• To get some feedback

And also, they are used in many ways depending on your application.

Here, we are going to discuss two types of Pop-ups - Display Alert and Action Sheet.

Display Alert

To display alert in Xamarin.Forms, you have to use DisplayAlert Method on any page. Here, we are going to use a single button in XAML and on clicked event of button, we can simply show alert.

The required code and output are given below.

XAML

<Button xName="alert" Text="Alert" Clicked="alert_Clicked"></Button>

Code 

private void alert_Clicked(object sender, EventArgs e)
{
    DisplayAlert("Alert", "Message", "ok");

}

Output on Android and Windows desktop

You can also use two buttons on alert. One is for accepting and the other one is Cancel. Just add the Cancel button in previous code. Keep in mind that all values in Display alert method are always in string.

XAML

<Button xName="alert" Text="Alert" Clicked="alert_Clicked"></Button>

Code 

private void alert_Clicked(object sender, EventArgs e)
{
    DisplayAlert("Alert", "Message", "ok","cancel");

}

Output on Android and Windows desktop

And if you want to save user response or utilize user response that is given by alert method, then you can do this by using await. Result given by display alert method is a Boolean value. When user clicks on first button response, the result is true and when user selects second button, it gives false. Let’s move towards a practical example.

XAML

<Button xName="alert" Text="Alert" Clicked="alert_Clicked"></Button>

Code 

private async void alert_Clicked(object sender, EventArgs e)
       {
         var response = await DisplayAlert("Alert", "Message", "ok","cancel");

           if (response)
           {
               //user click ok
              await DisplayAlert("response","ok","Exit");
           }

           else
           {
               //user click cancel
               await DisplayAlert("response", "cancel", "Exit");

           }
       }

Output on Android and Windows desktop

Both of the conditions are shown in output image. In Android device, user selects OK, so response is generated from if condition. And in Windows desktop application, user selects Cancel, so the response is generated from else section.

Here, we are done with the display alert. Now, let's move toward Action Sheet.

Action Sheet

Action sheet is used when you give user multiple options to select from.

Action Sheet is also a method that contains string values. First value is title, second value is cancel, third one is destruction, and after this, you can put multiple actions.

XAML

<Button xName="alert" Text="Action Sheet" Clicked="alert_Clicked"></Button>

Code 

private void alert_Clicked(object sender, EventArgs e)
{
    DisplayActionSheet("Action Sheet","Cacnel","Delete","Option A", "Option B","Option C", "Option D");
}

Output on Android and Windows desktop

You can also utilize action sheet response and do some work on it. Response generated by action sheet is a string value. You may utilize it by if conditions. But for now, I just simply show a display alert that contains its response. The code is given below.

 XAML

<Button xName="alert" Text="Action Sheet" Clicked="alert_Clicked"></Button>

Code 

private async void alert_Clicked(object sender, EventArgs e)
{
 var response = await DisplayActionSheet("Action Sheet","Cancel","Delete","Option A", "Option B","Option C", "Option D");
   await DisplayAlert("Response", response,"ok");
}

Output on Android and Windows desktop

This is how we can capture user response in action sheet.