Xamarin.Forms 弹出窗口

Xamarin.Forms 提供了两种常用的模态弹出窗口：

• 警报（Alert）：用于向用户显示提示信息或提出问题
• 操作工作表（Action Sheet）：用于引导用户完成任务

---

1. 创建项目

启动 Visual Studio，新建一个空白的 Xamarin.Forms 应用，项目名称为：

PopupsTutorial

---

2. 创建基本界面

双击打开 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>Code language: HTML, XML (xml)

说明

• 界面由一个 StackLayout 和两个 Button​ 组成。
• Button.Text 属性指定按钮上显示的文本。
• 每个按钮的 Clicked 事件分别绑定到对应的事件处理程序。

---

3. 显示警报（Alert）

3.1 在后台代码中实现事件处理程序

展开 MainPage.xaml，双击 MainPage.xaml.cs 将其打开。

在 MainPage.xaml.cs 中，添加以下事件处理方法：

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);
}Code language: JavaScript (javascript)

说明

• OnDisplayAlertButtonClicked 方法
  • 调用 DisplayAlert 方法显示一个带有一个”确定”按钮的模态警报。
  • 警报关闭后，用户可继续与应用程序交互。
• OnDisplayAlertQuestionButtonClicked 方法
  • 调用 DisplayAlert 的重载版本，显示带有两个按钮（”接受”和”取消”）的模态警报。
  • 用户点击其中一个按钮后，所选结果以 bool 值返回：
    • 点击”接受”按钮 → 返回 true
    • 点击”取消”按钮 → 返回 false

注意：两个方法都使用 async 关键字修饰，因为 DisplayAlert 是异步方法，需要使用 await 等待用户响应。

---

4. 显示操作工作表（Action Sheet）

4.1 在 XAML 中添加按钮

在 MainPage.xaml 的 StackLayout 中，添加一个新的 Button 声明：

<Button Text="Display action sheet"
        Clicked="OnDisplayActionSheetButtonClicked" />Code language: HTML, XML (xml)

---

4.2 在后台代码中实现事件处理程序

在 MainPage.xaml.cs 中，添加以下事件处理方法：

async void OnDisplayActionSheetButtonClicked(object sender, EventArgs e)
{
    string action = await DisplayActionSheet(
        "Send to?",
        "Cancel",
        null,
        "Email",
        "Twitter",
        "Facebook");

    Console.WriteLine("Action: " + action);
}Code language: JavaScript (javascript)

说明

• DisplayActionSheet 方法用于显示一个模态操作工作表。
• 参数说明：
  • 第一个参数：操作工作表的标题
  • 第二个参数：取消按钮的文本
  • 第三个参数：破坏性按钮的文本（设为 null 表示不显示）
  • 后续参数：操作选项中显示的按钮文本
• 用户点击某个选项后，所选按钮的文本以 string 形式返回。
• 如果点击”取消”按钮，则返回取消按钮的文本。