Xamarin.Forms Pop-ups Tutorial

Artikel
Developer (Beginner)
6 minutes to complete

Before attempting this tutorial, you should have successfully completed the:

Build your first Xamarin.Forms app quickstart.
StackLayout tutorial.
Button tutorial.

In this tutorial, you learn how to:

Display an alert, to ask the user to make a choice.
Display an action sheet, to guide the user through a task.

You will use Visual Studio 2019, or Visual Studio for Mac, to create a simple application that demonstrates how to display popups in Xamarin.Forms. The following screenshots show the final application:

Display an alert

5 minutes remaining

Xamarin.Forms has a modal pop-up, known as an alert, to alert the user, or to ask simple questions of them. In this exercise, you will use the DisplayAlert method, from the Page class, to display an alert to the user, and to ask a simple question.

Visual Studio
Visual Studio for Mac

To complete this tutorial you should have Visual Studio 2019 (latest release), with the Mobile development with .NET workload installed. In addition, you will require a paired Mac to build the tutorial application on iOS. For information about installing the Xamarin platform, see Installing Xamarin. For information about connecting Visual Studio 2019 to a Mac build host, see Pair to Mac for Xamarin.iOS development.

Launch Visual Studio, and create a new blank Xamarin.Forms app named PopupsTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named PopupsTutorial. Using a different name will result in build errors when you copy code from this tutorial into the solution.

For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.

In Solution Explorer, in the PopupsTutorial project, double-click MainPage.xaml to open it. Then, in MainPage.xaml, remove all of the template code and replace it with the following code:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupsTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Display alert"
                Clicked="OnDisplayAlertButtonClicked" />
        <Button Text="Display alert question"
                Clicked="OnDisplayAlertQuestionButtonClicked" />
    </StackLayout>
</ContentPage>

This code declaratively defines the user interface for the page, which consists of two Button objects in a StackLayout. The Button.Text properties specify the text that appears in each Button, and the Clicked events are set to event handlers that will be created in the next step.

In Solution Explorer, in the PopupsTutorial project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it. Then, in MainPage.xaml.cs, add the OnDisplayAlertButtonClicked and OnDisplayAlertQuestionButtonClicked event handlers to the class:
```
async void OnDisplayAlertButtonClicked(object sender, EventArgs e)
{
    await DisplayAlert("Alert", "This is an alert.", "OK");
}

async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e)
{
    bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No");
    Console.WriteLine("Save data: " + response);
}
```
When a Button is tapped, the respective event handler method is executed. The OnDisplayAlertButtonClicked method calls the DisplayAlert method, to display a modal alert with a single cancel button. Once the alert is dismissed the user can continue interacting with the application.

The OnDisplayAlertQuestionButtonClicked method calls an overload of the DisplayAlert method, to display a modal alert with an accept button and a cancel button. After the user selects one of the buttons, the selection is returned as a boolean.

Important

The DisplayAlert method is asynchronous, and should always be awaited with the await keyword.
In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator. Then, tap the first Button:

After dismissing the alert, tap the second Button:

Observe that, after selecting a response to the question, the response is output to the Visual Studio Output window. If this window is not visible, it can be made visible by selecting the View > Output menu option.

In Visual Studio, stop the application.

For more information about displaying alerts, see Display an alert in the Display Pop-ups guide.

To complete this tutorial you should have Visual Studio for Mac (latest release), with iOS and Android platform support installed. In addition, you will also require Xcode (latest release). For more information about installing the Xamarin platform, see Installing Xamarin.

Launch Visual Studio for Mac, and create a new blank Xamarin.Forms app named PopupsTutorial.

Important

The C# and XAML snippets in this tutorial requires that the solution is named PopupsTutorial. Using a different name will result in build errors when you copy code from this tutorial into the solution.

For more information about the .NET Standard library that gets created, see Anatomy of a Xamarin.Forms application in the Xamarin.Forms Quickstart Deep Dive.

In Solution Pad, in the PopupsTutorial project, double-click MainPage.xaml to open it. Then, in MainPage.xaml, remove all of the template code and replace it with the following code:

<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="PopupsTutorial.MainPage">
    <StackLayout Margin="20,35,20,20">
        <Button Text="Display alert"
                Clicked="OnDisplayAlertButtonClicked" />
        <Button Text="Display alert question"
                Clicked="OnDisplayAlertQuestionButtonClicked" />
    </StackLayout>
</ContentPage>

In Solution Pad, in the PopupsTutorial project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it. Then, in MainPage.xaml.cs, add the OnDisplayAlertButtonClicked and OnDisplayAlertQuestionButtonClicked event handlers to the class:
```
async void OnDisplayAlertButtonClicked(object sender, EventArgs e)
{
    await DisplayAlert("Alert", "This is an alert.", "OK");
}

async void OnDisplayAlertQuestionButtonClicked(object sender, EventArgs e)
{
    bool response = await DisplayAlert("Save?", "Would you like to save your data?", "Yes", "No");
    Console.WriteLine("Save data: " + response);
}
```
When a Button is tapped, the respective event handler method is executed. The OnDisplayAlertButtonClicked method calls the DisplayAlert method, to display a modal alert with a single cancel button. Once the alert is dismissed the user can continue interacting with the application.

The OnDisplayAlertQuestionButtonClicked method calls an overload of the DisplayAlert method, to display a modal alert with an accept button and a cancel button. After the user selects one of the buttons, the selection is returned as a boolean.

Important

The DisplayAlert method is asynchronous, and should always be awaited with the await keyword.
In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator. Then, tap the first Button:

After dismissing the alert, tap the second Button:

Observe that, after selecting a response to the question, the response is output to the Visual Studio for Mac Application Output window. If this window is not visible, it can be made visible by selecting the View > Other Windows > Application Output menu option.

In Visual Studio for Mac, stop the application.

For more information about displaying alerts, see Display an alert in the Display Pop-ups guide.

Display an action sheet

2 minutes remaining

Xamarin.Forms has a modal pop-up, known as an action sheet, that can be used to guide users through a task. In this exercise, you will use the DisplayActionSheet method, from the Page class, to display an action sheet that guides users through a task.

Visual Studio
Visual Studio for Mac

In MainPage.xaml, add a new Button declaration that will display an action sheet:
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
The Button.Text property specifies the text that appears in the Button. In addition, the Clicked event is set to an event handler named OnDisplayActionSheetButtonClicked, that will be created in the next step.
In Solution Explorer, in the PopupsTutorial project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it. Then, in MainPage.xaml.cs, add the OnDisplayActionSheetButtonClicked event handler to the class:
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
When the Button is tapped, the OnDisplayActionSheetButtonClicked method executes. This method calls the DisplayActionSheet method, to present the user with a set of alternatives for how to proceed through a task. After the user selects one of the alternatives, the selection is returned as a string.

Important

The DisplayActionSheet method is asynchronous, and should always be awaited with the await keyword.
In the Visual Studio toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen remote iOS simulator or Android emulator. Then, tap the Button that you added to the ContentPage:

Observe that, after selecting an alternative in the action sheet dialog, the selection is output to the Visual Studio Output window. If this window is not visible, it can be made visible by selecting the View > Output menu option.

In Visual Studio, stop the application.

For more information about displaying action sheets, see Guide users through tasks in the Display Pop-ups guide.

In MainPage.xaml, add a new Button declaration that will display an action sheet:
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
The Button.Text property specifies the text that appears in the Button. In addition, the Clicked event is set to an event handler named OnDisplayActionSheetButtonClicked, that will be created in the next step.
In Solution Pad, in the PopupsTutorial project, expand MainPage.xaml and double-click MainPage.xaml.cs to open it. Then, in MainPage.xaml.cs, add the OnDisplayActionSheetButtonClicked event handler to the class:
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
When the Button is tapped, the OnDisplayActionSheetButtonClicked method executes. This method calls the DisplayActionSheet method, to present the user with a set of alternatives for how to proceed through a task. After the user selects one of the alternatives, the selection is returned as a string.

Important

The DisplayActionSheet method is asynchronous, and should always be awaited with the await keyword.
In the Visual Studio for Mac toolbar, press the Start button (the triangular button that resembles a Play button) to launch the application inside your chosen iOS simulator or Android emulator. Then, tap the Button that you added to the ContentPage:

Observe that, after selecting an alternative in the action sheet dialog, the selection is output to the Visual Studio for Mac Application Output window. If this window is not visible, it can be made visible by selecting the View > Other Windows > Application Output menu option.

In Visual Studio for Mac, stop the application.

For more information about displaying action sheets, see Guide users through tasks in the Display Pop-ups guide.

Xamarin.Forms Pop-ups Tutorial

Display an alert

Display an action sheet

Congratulations!

Next steps

Maklum balas

Xamarin.Forms Pop-ups Tutorial

Display an alert

Display an action sheet

Congratulations!

Next steps

Related links

Maklum balas