Xamarin.Forms / .NET Standard 體驗之旅 2 : 使用 Acr.UserDialogs 元件

由於 Prism Template Pack 已經開始支援創建出使用 .NET Standard 的共用類別庫專案，在接下來的幾篇文章，我將會針對在開發 Xamarin.Forms 專案的時候，會使用到不同需求功能的 NuGet 套件，進行測試與說明。

若您尚未用過 Prism Template Pack 2.0 以上的擴充功能，可以參考這篇文章 Xamarin.Forms / .NET Standard 體驗之旅 1 : 使用 Prism Template Pack 2.0 與 .NET Stardard 標準類別庫之建立 Xamarin.Forms App 搶先體驗

首先，我先針對在進行 Xamarin.Forms 專案開發時候，必備擴充 NuGet 套件 Acr.UserDialogs 進行測試，當然，在使用任何套件之前，強烈建議一定要先觀看官方的使用說明文件，因為，大部分的 Xamarin.Forms 擴充套件，都須做些適度的初始化設定工作。

測試範例專案原始碼

這篇文章中的測試範例專案原始碼，您可以從這裡取得

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

安裝最新的 Prism Template Pack

首先，請先確認您有安裝或者更新到最新的 Prism Template Pack 這個 Visual Studio 擴充功能，您可以點選 Visual Studio 2017 功能表的 [工具] > [擴充功能與更新] 選項，看到底下 [擴充功能與更新] 對話視窗，確認有安裝這個擴充 Prism Template Pack 功能。

今天有更新到 2.0.7 版本，所以，我們將會使用今天更新的最新 Prism Template Pack 擴充功能套件。

開始建立專案

請點選功能表 [檔案] > [新增] > [專案]，此時，您會看到底下的 [新增專案] 對話視窗。

我們點選 Prism Template Pack 提供的 Xamarin.Forms 專用的專案樣板，請點選 [已安裝] > [Visual C#] > [Prism] > [Prism Blank App (Xamarin.Forms)]。

接著在名稱欄位輸入該專案名稱後，點選 [確定] 按鈕，以建立此練習專案。

然後，在 [PRISM PROJEC WIZAD] 對話窗中，選擇您要跨平台的作業系統，容器 (Container) 這裡，我個人喜歡與習慣使用 Prism，您可以選擇您自己要用的容器，最後，點選 [CREATE PROJECT] 按鈕。

安裝 Acr.UserDialogs NuGet 套件

在這裡，請使用滑鼠右建，點選剛剛建立好的方案節點，選擇 [管理方案的 NuGet 套件] 項目。

在 [瀏覽] 標籤頁次上，輸入 Acr.UserDialogs 這個關鍵字，搜尋出這個套件。

從下圖中，我們看到搜尋出兩個 Acr.UserDialogs 相關套件，我們點選第一個，並且在右方區域，勾選 [NETStdUserDialogs] 這個 .NET Standard 專案(您可以不用勾選原生專案)

我們可以查看到這個 Acr.UserDialogs 套件，已經有支援 .NET Standard，也就是說，原則上，您所使用的 NuGet 套件，最好是能夠有支援 .NET Sandard 平台，使用上較不會遇到一些問題，若該套件還是僅支援 PCL ，這裡還是建議您先建立一個測試專案，測試在 .NET Standard 環境下使用是否有遇到任何問題。

當我們點選 [安裝] 按鈕之後，會看到 Visual Studio 會提示您這樣會安裝那些相依性的套件。

修正 View / ViewModel 開始使用 Acr.UserDialogs

安裝好套件之後，讓我們打開 MainPage.xaml 檔案，修改XAML內容。

這裡，我們僅在 StackLayout 版片配置內，加入一個按鈕項目，並且設定 Command 屬性，要綁定 ViewModel 內類型為 DelegateCommand 的物件 LoadCommand

<?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="NETStdUserDialogs.Views.MainPage"
             Title="{Binding Title}">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Button Text="Load" Command="{Binding LoadCommand}"/>
    </StackLayout>

</ContentPage>

接著我們打開 MainPageViewModel.cs 檔案，修正 ViewModel 的商業邏輯程式碼。

我們透過了 UserDialogs.Instance 這個物件，取得現在可用的 UserDialogs 物件，並且要顯示出 Loading 這個對話窗，我們會暫停兩秒鐘之後，這個對話窗便會消失掉。

namespace NETStdUserDialogs.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        public DelegateCommand LoadCommand { get; set; }
        public MainPageViewModel(INavigationService navigationService) 
            : base (navigationService)
        {
            Title = "Main Page";
            LoadCommand = new DelegateCommand(async () =>
            {
                using (var dlg = UserDialogs.Instance.Loading("Test Progress"))
                {
                    await Task.Delay(2000);
                }
            });
        }
    }
}

修正 Android 專案，進行 UserDialogs 的初始化

如同前面強調的，使用 Xamarin.Forms 第三方套件的時候，務必要觀看使用說明，所以在 Acr.UserDialogs網頁中，有提到，我們需要在 Android 專案內進行初始化設定。

在 Android 專案內，找到 MainActivity.cs 檔案，打開這個檔案。

請在 [OnCreate] 方法內，加入這行 UserDialogs.Init(this); 敘述

protected override void OnCreate(Bundle bundle)
{
    TabLayoutResource = Resource.Layout.Tabbar;
    ToolbarResource = Resource.Layout.Toolbar;

    base.OnCreate(bundle);

    UserDialogs.Init(this);

    global::Xamarin.Forms.Forms.Init(this, bundle);
    LoadApplication(new App(new AndroidInitializer()));
}

進行測試

最後，設定預設起始專案為 Android 專案，並且選擇適當的模擬器或者實體手機，開始進行測試。

使用 Acr.UserDialogs 相關對話窗的好處就是，如同底下測試結果，您會看到的是，這些對話窗將會是全螢幕顯示的。