Xamarin.Forms 對話窗與動作選項 頁面

目的

當在進行 Xamarin.Forms 專案開發的時候，除了 Xamarin.Forms 基本提供的 DisplayAlert 與DisplayActionSheet，而在 Prism 開發框架之下，也可以使用建構式注入 IPageDialogService 介面，透過其注入的執行個體，使用 DisplayAlertAsync 與 DisplayActionSheetAsync，來與使用者進行互動。很多時候，您也希望能夠告知應用程式操作的使用者，現在應用程式正在忙碌執行中，並且顯示出相關訊息，讓使用者知道現在處理請況；或者，需要能夠顯示一個客製的對話窗，讓使用者輸入或者填寫相關訊息，而不需要做頁面切換。

在這篇文章中，將會說明如何客製一個使用者對話窗，並且產生一個頁面遮罩，讓這個對話窗顯示在原來頁面之上。

學習重點

在這個練習專案中，將會讓您學會底下技能與方法的使用:

• 了解如何使用 Xamarin.Forms 核心提供的警告對話窗的用法
• 了解如何使用 Xamarin.Forms 核心提供的動作清單對話窗的用法
• 了解如何使用 Prism 核心提供的警告對話窗的用法
• 了解如何使用 Prism 核心提供的動作清單對話窗的用法

專案原始碼

https://github.com/vulcanlee/XF-Pages-Samples/tree/master/XFAlert

專案使用到的圖片

無

實作方法

建立專案

1. 在 Visual Studio 2015，點選功能表 檔案 > 新增 > 專案
2. 在 新增專案 對話窗內，點選 範本 > Visual C# > Prism > Prism Unity App (Forms)
3. 在底下名稱欄位中，輸入 XFAlert 最後，點選 確定 按鈕。
4. 當出現 Prism for Xamarin.Forms - Project Wizard 對話窗，請勾選 Android, iOS, UWP 這三個選項，表示您想要產生使用 Prism 框架的這三種原生 Xamarin.Forms 專案，最後點選 Create 按鈕。

當專案建立到一半，若您的開發環境還沒有建置與設定完成 Mac 電腦與 Xamarin Studio for Mac 系統，此時會看到 Xamarin Mac Agent Instructions 對話窗出現，這個對話窗是要提醒您進行與 Mac 電腦連線設定，這是因為，您無法在 Windows 作業系統進行 iOS 相關應用程式的建立與設計工作，而是需要透過 Mac 電腦安裝的 XCode 來協助您完成這些 iOS 應用程式的建立工作。不過，這不影響您繼續開發 Xamarin.Forms 的應用程式，只不過此時，您無法編譯與執行 iOS 的應用程式。

1. 接著會看到 新的通用Windows專案 對話視窗，此時，您只需要按下 確定 按鈕即可，此時，專案精靈會繼續完成相關平台的專案建立工作。
2. 最後，整個新的 Xamarin.Forms 專案就建立完成了。

若您無法看到 Prism 項目，用來建立 Prism 類型專案，那可能是您的 Visual Studio 2015 內沒有安裝Prism Template Pack 擴充功能，請參考 附件 : 使用 Visual Studio 2015 增加 Prism 專案樣版

1. 滑鼠右擊 XFAlert.Droid，選擇 設定為起始專案
2. 展開 XFAlert.Droid > Properties，滑鼠雙擊 Properties 這個節點
3. 在標籤頁次 Application，選擇項目 Minimum Android to target的下拉選單，選擇值為 Android 4.4 (API Level 19 - Kit Kat) 這個選項，接著按下 Ctrl + S 組合案件，儲存此次修改設定。
4. 滑鼠右擊 XFAlert.Droid，選擇 建置 進行專案編譯

開發前準備工作

建立資料夾

無

複製專案使用的圖片檔案

無

專案開發

建立 MainPage 檢視 (View)

1. 在核心PCL專案的 Views 資料夾，滑鼠雙擊 MainPage.xaml
2. 將底下 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"
             xmlns:prism="clr-namespace:Prism.Mvvm;assembly=Prism.Forms"
             prism:ViewModelLocator.AutowireViewModel="True"
             x:Class="XFAlert.Views.MainPage"
             Title="MainPage">
  <StackLayout
    HorizontalOptions="Center" VerticalOptions="Center">
    <Button
      x:Name="btnAlert"
      Text="顯示 Xamarin.Forms 警告視窗"
      />
    <Label
      x:Name="lblXF選擇結果"
      Text="Xamarin.Forms 選擇結果"
      />
    <Button
      x:Name="btnActionSheet"
      Text="顯示 Xamarin.Forms 動作表單"
      />
     <Label
      x:Name="lblXF動作表單選擇結果"
      Text="Xamarin.Forms 動作表單 選擇結果"
      />
    <Button
      Text="顯示 Prism 警告視窗"
      Command="{Binding PrismAlertCommand}"
      />
    <Label
      Text="{Binding PrismAlert輸出結果}"
      />
    <Button
      Text="顯示 Prism 動作表單"
      Command="{Binding PrismActionSheetCommand}"
      />
    <Label
      Text="{Binding PrismActionSheet輸出結果}"
      />
 </StackLayout>
</ContentPage>

1. 在核心PCL專案的 Views 資料夾，滑鼠雙擊 MainPage.xaml.cs
2. 將底下 C# 複製到剛剛開啟的檔案內

MainPage.xaml.cs

using Xamarin.Forms;

namespace XFAlert.Views
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();

            btnAlert.Clicked += async (s, e) =>
              {
                  await DisplayAlert("警告", "您確定要繼續執行嗎?", "確定");
                  bool 選擇結果 = await DisplayAlert("通知", "您要開始下載這個檔案嗎?", "是", "否");
                  lblXF選擇結果.Text = 選擇結果.ToString();
              };
            btnActionSheet.Clicked += async (s, e) =>
              {
                  var 選擇結果 = await DisplayActionSheet("請選擇您要分享的目的應用程式?", "取消", "Google+", "Email", "Twitter", "Facebook");
                  lblXF動作表單選擇結果.Text = 選擇結果;
              };
        }

    }
}

建立 MainPageViewModel 檢視模型 (ViewModel)

1. 在核心PCL專案的 Views 資料夾，滑鼠雙擊 MainPageViewModel.cs
2. 將底下 C# 複製到剛剛開啟的檔案內

MainPageViewModel.cs

using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using Prism.Services;
using System;
using System.Collections.Generic;
using System.Linq;

namespace XFAlert.ViewModels
{
    public class MainPageViewModel : BindableBase, INavigationAware
    {
        public IPageDialogService _dialogService { get; set; }
        public DelegateCommand PrismAlertCommand { get; set; }
        public DelegateCommand PrismActionSheetCommand { get; set; }

        #region PrismAlert輸出結果
        private string _PrismAlert輸出結果;
        public string PrismAlert輸出結果
        {
            get { return _PrismAlert輸出結果; }
            set { SetProperty(ref _PrismAlert輸出結果, value); }
        }
        #endregion

        #region PrismActionSheet輸出結果
        private string _PrismActionSheet輸出結果;
        public string PrismActionSheet輸出結果
        {
            get { return _PrismActionSheet輸出結果; }
            set { SetProperty(ref _PrismActionSheet輸出結果, value); }
        }
        #endregion

        public MainPageViewModel(IPageDialogService dialogService)
        {
            _dialogService = dialogService;

            PrismAlertCommand = new DelegateCommand(PrismAlert);
            PrismActionSheetCommand = new DelegateCommand(PrismActionSheet);

            PrismAlert輸出結果 = "Prism 選擇結果";
            PrismActionSheet輸出結果 = "Prism 動作表單 選擇結果";
        }

        private async void PrismAlert()
        {
            await _dialogService.DisplayAlertAsync("警告", "您確定要繼續執行嗎?", "確定");
            bool 選擇結果 =await _dialogService.DisplayAlertAsync("通知", "您要開始下載這個檔案嗎?", "是", "否");
            PrismAlert輸出結果 = 選擇結果.ToString();
        }

        private async void PrismActionSheet()
        {
            var 選擇結果 = await _dialogService.DisplayActionSheetAsync("請選擇您要分享的目的應用程式?", "取消", "Google+", "Email", "Twitter", "Facebook");
            PrismActionSheet輸出結果 = 選擇結果;
        }

        public void OnNavigatedFrom(NavigationParameters parameters)
        {

        }

        public void OnNavigatedTo(NavigationParameters parameters)
        {
        }
    }
}