Xamarin.Forms 快顯教學課程

發行項
Developer (初級)
完成時間 6 分鐘

在嘗試此教學課程之前，您應該已成功完成：

建置您的第一個 Xamarin.Forms 應用程式快速入門。
StackLayout 教學課程。
按鈕教學課程。

在本教學課程中，您會了解如何：

顯示警示，以要求使用者做出選擇。
顯示動作表，以引導使用者完成工作。

您將使用 Visual Studio 2019 或 Visual Studio for Mac 來建立簡單的應用程式，示範如何在中 Xamarin.Forms顯示快顯。下列螢幕擷取畫面顯示的是最終的應用程式：

顯示警示

剩餘 5 分鐘

Xamarin.Forms 具有稱為警示的強制回應彈出視窗，可警示使用者，或詢問其簡單的問題。在本練習中，您會使用 DisplayAlert 方法 (來自 Page 類別) 向使用者顯示警示，以及詢問簡易問題。

Visual Studio
Visual Studio for Mac

若要完成此教學課程，您應該有 Visual Studio 2019 (最新版本)，並已安裝 [使用 .NET 進行行動開發] 工作負載。此外，您還需要配對的 Mac 才能在 iOS 上建置教學課程應用程式。如需安裝 Xamarin 平台的相關資訊，請參閱安裝 Xamarin。如需有關將 Visual Studio 2019 連線至 Mac 建置主機的相關資訊，請參閱為 Xamarin.iOS 開發與 Mac 配對。

啟動 Visual Studio，並建立名為 PopupsTutorial 的新空白Xamarin.Forms應用程式。

重要

本教學課程中的 C# 和 XAML 程式碼片段，要求將解決方案命名為 PopupsTutorial。當您從本教學課程將程式碼複製到解決方案時，使用不同的名稱會導致建置錯誤。

如需有關建立之 .NET Standard 連結庫的詳細資訊，請參閱快速入門深入探討中的Xamarin.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 模擬器內的應用程式。然後，點選第一個 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.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>

在 [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 模擬器內的應用程式。然後，點選第一個 Button：

關閉警示之後，請點選第二個 Button：

請觀察一下，在選取問題的回應之後，回應便會輸出到 Visual Studio for Mac 的 [應用程式輸出] 視窗。如果看不到此視窗，則可以選取 [檢視 > 其他 Windows > 應用程式輸出 ] 選單選項來顯示。

在 Visual Studio for Mac 中，停止應用程式。

如需如何顯示警示的詳細資訊，請參閱顯示快顯視窗指南中的顯示警示。

顯示動作表

剩餘 2 分鐘

Xamarin.Forms 具有稱為動作表的強制回應彈出視窗，可用來引導使用者完成工作。在本練習中，您會使用 DisplayActionSheet 方法 (來自 Page 類別) 顯示可引導使用者執行工作的動作表。

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);
}
```
OnDisplayActionSheetButtonClicked方法會在點選 Button 時執行。這個方法會呼叫 DisplayActionSheet 方法，向使用者呈現如何繼續執行工作的一組替代項目。使用者選取其中一個替代項目後，系統便會以 string 傳回選取項目。

重要

DisplayActionSheet 是非同步的方法，因此請一律使用 await 關鍵字來等候。
在 Visual Studio 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選遠端 iOS 模擬器或 Android 模擬器內的應用程式。然後，點選您新增至 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);
}
```
OnDisplayActionSheetButtonClicked方法會在點選 Button 時執行。這個方法會呼叫 DisplayActionSheet 方法，向使用者呈現如何繼續執行工作的一組替代項目。使用者選取其中一個替代項目後，系統便會以 string 傳回選取項目。

重要

DisplayActionSheet 是非同步的方法，因此請一律使用 await 關鍵字來等候。
在 Visual Studio for Mac 工具列中，按下 [啟動] 按鈕 (類似於 [播放] 按鈕的三角形按鈕)，以啟動所選 iOS 模擬器或 Android 模擬器內的應用程式。然後，點選您新增至 ContentPage 的 Button：

請觀察一下，在選取動作表對話方塊中的替代項目之後，選取項目便會輸出到 Visual Studio for Mac 的 [輸出] 視窗。如果看不到此視窗，則可以選取 [檢視 > 其他 Windows > 應用程式輸出 ] 選單選項來顯示。

在 Visual Studio for Mac 中，停止應用程式。

如需如何顯示動作表的詳細資訊，請參閱顯示快顯視窗指南中的引導使用者執行工作。

共用方式為

Xamarin.Forms 快顯教學課程

顯示警示

顯示動作表

恭喜！

下一步

共用方式為

Xamarin.Forms 快顯教學課程

顯示警示

顯示動作表

恭喜！

下一步

相關連結