Xamarin.Forms 弹出项教程

开始演练本教程的前提条件为已成功完成以下教程：

生成第一个 Xamarin.Forms 应用快速入门。
StackLayout教程。
按钮教程。

在本教程中，你将了解如何执行以下操作：

显示警报，要求用户做出选择。
显示操作工作表，引导用户完成任务。

你将使用 Visual Studio 2019 或 Visual Studio for Mac 创建一个简单的应用程序，演示如何在 Xamarin.Forms 中显示弹出项。以下屏幕截图显示了最终的应用程序：

显示警报

剩余 5 分钟

Xamarin.Forms 有一个称作警报的模态弹出项，用于提醒用户或向用户询问简单的问题。本练习使用 Page 类的 DisplayAlert 方法，向用户展示警报和询问简单的问题。

Visual Studio
Visual Studio for Mac

若要完成本教程，应使用 Visual Studio 2019（最新版本），且安装了“使用 .NET 的移动开发”工作负载。此外，还需要一个匹配的 Mac，用于在 iOS 上生成教程应用程序。有关安装 Xamarin 平台的信息，请参阅安装 Xamarin。有关将 Visual Studio 2019 连接到 Mac 生成主机的信息，请参阅通过“与 Mac 配对”进行 Xamarin.iOS 开发。

启动 Visual Studio，新建名为 PopupsTutorial 的 Xamarin.Forms 空白应用。

重要

本教程中的 C# 和 XAML 片段要求将解决方案命名为 PopupsTutorial 。使用不同的名称会导致：将本教程中的代码复制到解决方案中时出现生成错误。

有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.Forms 快速入门的深入探讨中的 Xamarin.Forms 应用程序剖析。

在“解决方案资源管理器”的 PopupsTutorial 项目中，双击 MainPage.xaml 将其打开。然后在 MainPage.xaml 中，删除所有模板代码，替换为以下代码：

<?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>

此代码以声明方式定义页面的用户界面，该界面由 StackLayout 中的两个 Button 对象组成。 Button.Text 属性指定每个 Button 中显示的文本，Clicked 事件设置为将在下一步中创建的事件处理程序。

在“解决方案资源管理器”的 PopupsTutorial 项目中，展开“MainPage.xaml”，然后双击“MainPage.xaml.cs”将其打开。然后在 MainPage.xaml.cs 中，将 OnDisplayAlertButtonClicked 和 OnDisplayAlertQuestionButtonClicked 事件处理程序添加到类：
```
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);
}
```
相应的事件处理程序方法在点击 Button 时得到执行。 OnDisplayAlertButtonClicked 方法调用 DisplayAlert 方法，以显示带有一个“取消”按钮的模态警报。警报解除后，用户可以继续与应用程序交互。

OnDisplayAlertQuestionButtonClicked 方法调用 DisplayAlert 方法重载，以显示带有“接受”按钮和“取消”按钮的模态警报。用户选择其中一个按钮后，所选内容将作为 boolean 返回。

重要

DisplayAlert 方法为异步方法，应始终使用 await 关键字等待。
在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序。然后，点击第一个 Button：

警报解除后，点击第二个 Button：

注意，为问题选择一个回答之后，该回答输出到 Visual Studio 的“输出”窗口。如果此窗口不可见，则可以通过选择“视图”>“输出”菜单选项来显示此窗口。

在 Visual Studio 中停止应用程序。

若要详细了解如何显示警报，请参阅显示弹出窗口指南中的显示警报。

若要完成本教程，应使用 Visual Studio for Mac（最新版），且安装了 iOS 和 Android 平台支持。此外，还需要 Xcode（最新版）。有关安装 Xamarin 平台的详细信息，请参阅安装 Xamarin。

启动 Visual Studio for Mac，新建名为 PopupsTutorial 的 Xamarin.Forms 空白应用。

重要

本教程中的 C# 和 XAML 片段要求将解决方案命名为 PopupsTutorial 。使用不同的名称会导致：将本教程中的代码复制到解决方案中时出现生成错误。

有关创建的 .NET Standard 库的详细信息，请参阅 Xamarin.FormsXamarin.Forms 快速入门的深入探讨中的 Xamarin.Forms 应用程序剖析。

在 Solution Pad 的 PopupsTutorial 项目中，双击 MainPage.xaml 将其打开。然后在 MainPage.xaml 中，删除所有模板代码，替换为以下代码：

<?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>

此代码以声明方式定义页面的用户界面，该界面由 StackLayout 中的两个 Button 对象组成。 Button.Text 属性指定每个 Button 中显示的文本，Clicked 事件设置为将在下一步中创建的事件处理程序。

在 Solution Pad 的 PopupsTutorial 项目中，展开“MainPage.xaml”，然后双击“MainPage.xaml.cs”将其打开。然后在 MainPage.xaml.cs 中，将 OnDisplayAlertButtonClicked 和 OnDisplayAlertQuestionButtonClicked 事件处理程序添加到类：
```
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);
}
```
相应的事件处理程序方法在点击 Button 时得到执行。 OnDisplayAlertButtonClicked 方法调用 DisplayAlert 方法，以显示带有一个“取消”按钮的模态警报。警报解除后，用户可以继续与应用程序交互。

OnDisplayAlertQuestionButtonClicked 方法调用 DisplayAlert 方法重载，以显示带有“接受”按钮和“取消”按钮的模态警报。用户选择其中一个按钮后，所选内容将作为 boolean 返回。

重要

DisplayAlert 方法为异步方法，应始终使用 await 关键字等待。
在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android Emulator 内的应用程序。然后，点击第一个 Button：

警报解除后，点击第二个 Button：

注意，为问题选择一个回答之后，该回答输出到 Visual Studio for Mac 的“输出”窗口。如果此窗口不可见，则可以通过选择“视图”>“其他窗口”>“应用程序输出”菜单选项来显示此窗口。

在 Visual Studio for Mac 中停止应用程序。

若要详细了解如何显示警报，请参阅显示弹出窗口指南中的显示警报。

显示操作工作表

剩余 2 分钟

Xamarin.Forms 有一个模式弹出项，称为操作工作表，可用于指导用户完成任务。在本练习中，你将使用 Page 类中的 DisplayActionSheet 方法来显示指导用户完成任务的操作工作表。

Visual Studio
Visual Studio for Mac

在 MainPage.xaml 中，添加一个新的 Button 声明，该声明将显示一个操作工作表：
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
Button.Text 属性指定在 Button 中显示的文本。此外，将 Clicked 事件设置为名为 OnDisplayActionSheetButtonClicked 的事件处理程序，将在下一步中创建该处理程序。
在“解决方案资源管理器”的 PopupsTutorial 项目中，展开“MainPage.xaml”，然后双击“MainPage.xaml.cs”将其打开。然后在 MainPage.xaml.cs 中，将 OnDisplayActionSheetButtonClicked 事件处理程序添加到类：
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
点击 Button 时，将执行 OnDisplayActionSheetButtonClicked 方法。此方法调用 DisplayActionSheet 方法，向用户显示有关如何继续完成任务的一组替代方案。用户选择其中一个替代方案后，所选内容将作为 string 返回。

重要

DisplayActionSheet 方法为异步方法，应始终使用 await 关键字等待。
在 Visual Studio 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选远程 iOS 模拟器或 Android Emulator 内的应用程序。然后点击添加到 ContentPage 的 Button：

注意，在操作表对话框中选择替代方案后，选择将输出到 Visual Studio“输出”窗口。如果此窗口不可见，则可以通过选择“视图”>“输出”菜单选项来显示此窗口。

在 Visual Studio 中停止应用程序。

若要详细了解如何显示操作工作表，请参阅显示弹出窗口指南中的引导用户完成任务。

在 MainPage.xaml 中，添加一个新的 Button 声明，该声明将显示一个操作工作表：
```
<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />
```
Button.Text 属性指定在 Button 中显示的文本。此外，将 Clicked 事件设置为名为 OnDisplayActionSheetButtonClicked 的事件处理程序，将在下一步中创建该处理程序。
在 Solution Pad 的 PopupsTutorial 项目中，展开“MainPage.xaml”，然后双击“MainPage.xaml.cs”将其打开。然后在 MainPage.xaml.cs 中，将 OnDisplayActionSheetButtonClicked 事件处理程序添加到类：
```
async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet("Send to?", "Cancel", null, "Email", "Twitter", "Facebook");
    Console.WriteLine("Action: " + action);
}
```
点击 Button 时，将执行 OnDisplayActionSheetButtonClicked 方法。此方法调用 DisplayActionSheet 方法，向用户显示有关如何继续完成任务的一组替代方案。用户选择其中一个替代方案后，所选内容将作为 string 返回。

重要

DisplayActionSheet 方法为异步方法，应始终使用 await 关键字等待。
在 Visual Studio for Mac 工具栏中，按“开始”按钮（类似“播放”按钮的三角形按钮），启动所选 iOS 模拟器或 Android Emulator 内的应用程序。然后点击添加到 ContentPage 的 Button：

注意，在操作表对话框中选择替代方案后，选择将输出到 Visual Studio for Mac“应用程序输出”窗口。如果此窗口不可见，则可以通过选择“视图”>“其他窗口”>“应用程序输出”菜单选项来显示此窗口。

在 Visual Studio for Mac 中停止应用程序。

若要详细了解如何显示操作工作表，请参阅显示弹出窗口指南中的引导用户完成任务。

恭喜！

100% 完成！

祝贺你完成了本教程的学习，在本教程中你学习了如何：

显示警报，要求用户做出选择。
显示操作工作表，引导用户完成任务。

后续步骤

若要深入了解使用 Xamarin.Forms 创建移动应用程序的基础知识，请继续学习“应用生命周期”教程。

应用生命周期教程

通过

显示警报

显示操作工作表

恭喜！

后续步骤

相关链接