Xamarin.Forms 警告與動作表對話窗

這份筆將將會整理出 警告 Alert 對話窗與 動作表 Action Sheet 對話窗的使用；由於 Xamarin.Forms 提供了這兩種方法的使用 ( DisplayAlert / DisplayActionSheet )，不過，這兩種方法卻是定義在 Page 類別中，因此，這兩個方法僅能夠在程式碼後置 (code-behind) 的地方使用。

若您是採用了 Prism 的框架來進行開發 Xamarin.Forms 應用程式，根據 MVVM 的規範，您應該要在 檢視模型(ViewModel) 內來使用兩個方法，而在檢視模型內，因為 MVVM 的規範，是無法存取到 檢視 內的物件(當然，也是有辦法的，不過，有點違反 MVVM 設計模式了)，因此，Prism 提供了 IPageDialogService 介面，您可以在建構式內注入這個介面，並取得其執行個體(Instance)，就可以透過這個執行個體進行這兩個對話窗的操作了。

這份筆記的範例專案可以底下網址取得

https://github.com/vulcanlee/xamarin-forms-develop-notes-example/tree/master/XFAlert

傳統的 Xamarin.Forms 的用法

1. 在範例專案中的 檢視(View)，定義了這個應用程式所有的使用者介面，其 XAML 宣告如下，而這個範例的執行畫面也如下圖。
   
   
   
   
2. 這個頁面中，定義了四個按鈕與四個標籤(Label)，前兩個按鈕的按下事件將會定義在 code-behind 程式碼內，後兩個按鈕的按下事件，將會透過 ICommand 資料繫結到 檢視模型內的 DelegateCommand 物件。

<?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. MainPage.xaml 的 code-behind 定義如下：
2. btnAlert.Clicked 事件展示了 DisplayAlert 的用法
3. btnActionSheet.Clicked 事件展示了 DisplayActionSheet 的用法

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 = 選擇結果;
              };
        }

    }
}

Prism 提供的功能

1. 底下為 MainPage 的檢視模型程式碼
2. Prism 提供了 IPageDialogService 頁面，讓您可以使用者兩個對話窗功能，因此，您需要透過建構式注入的方法，取得這個介面的執行個體。
3. 您也需要定義兩個 DelegateCommand 屬性，用於資料繫結到 XAML 上的 Button.Command 屬性上。
4. 另外，也定義了兩個 string 的屬性，並且要實作出 INotifyPropertyChanged 介面的功能，在這裡使用的是 SetProperty
5. 不論是使用 Xamarin.Forms 提供的方法或者 Prism 提供的方法，都需要使用非同步的方式來呼叫。

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)
        {
        }
    }
}