XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2017/11/15

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

由於 Prism Template Pack 已經開始支援創建出使用 .NET Standard 的共用類別庫專案,在接下來的幾篇文章,我將會針對在開發 Xamarin.Forms 專案的時候,會使用到不同需求功能的 NuGet 套件,進行測試與說明。
首先,我先針對在進行 Xamarin.Forms 專案開發時候,必備擴充 NuGet 套件 Acr.UserDialogs 進行測試,當然,在使用任何套件之前,強烈建議一定要先觀看官方的使用說明文件,因為,大部分的 Xamarin.Forms 擴充套件,都須做些適度的初始化設定工作。

測試範例專案原始碼

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

安裝最新的 Prism Template Pack

首先,請先確認您有安裝或者更新到最新的 Prism Template Pack 這個 Visual Studio 擴充功能,您可以點選 Visual Studio 2017 功能表的 [工具] > [擴充功能與更新] 選項,看到底下 [擴充功能與更新] 對話視窗,確認有安裝這個擴充 Prism Template Pack 功能。
今天有更新到 2.0.7 版本,所以,我們將會使用今天更新的最新 Prism Template Pack 擴充功能套件。
Prism Template Pack 2.0.7

開始建立專案

請點選功能表 [檔案] > [新增] > [專案],此時,您會看到底下的 [新增專案] 對話視窗。
我們點選 Prism Template Pack 提供的 Xamarin.Forms 專用的專案樣板,請點選 [已安裝] > [Visual C#] > [Prism] > [Prism Blank App (Xamarin.Forms)]。
接著在名稱欄位輸入該專案名稱後,點選 [確定] 按鈕,以建立此練習專案。
.NET Standard Xamarin.Forms Project
然後,在 [PRISM PROJEC WIZAD] 對話窗中,選擇您要跨平台的作業系統,容器 (Container) 這裡,我個人喜歡與習慣使用 Prism,您可以選擇您自己要用的容器,最後,點選 [CREATE PROJECT] 按鈕。
.NET Standard Xamarin.Forms Project

安裝 Acr.UserDialogs NuGet 套件

在這裡,請使用滑鼠右建,點選剛剛建立好的方案節點,選擇 [管理方案的 NuGet 套件] 項目。
在 [瀏覽] 標籤頁次上,輸入 Acr.UserDialogs 這個關鍵字,搜尋出這個套件。
從下圖中,我們看到搜尋出兩個 Acr.UserDialogs 相關套件,我們點選第一個,並且在右方區域,勾選 [NETStdUserDialogs] 這個 .NET Standard 專案(您可以不用勾選原生專案)
.NET Standard Xamarin.Forms Project
我們可以查看到這個 Acr.UserDialogs 套件,已經有支援 .NET Standard,也就是說,原則上,您所使用的 NuGet 套件,最好是能夠有支援 .NET Sandard 平台,使用上較不會遇到一些問題,若該套件還是僅支援 PCL ,這裡還是建議您先建立一個測試專案,測試在 .NET Standard 環境下使用是否有遇到任何問題。
.NET Standard Xamarin.Forms Project
當我們點選 [安裝] 按鈕之後,會看到 Visual Studio 會提示您這樣會安裝那些相依性的套件。
.NET Standard Xamarin.Forms Project

修正 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 相關對話窗的好處就是,如同底下測試結果,您會看到的是,這些對話窗將會是全螢幕顯示的。
Acr.UserDialogs 執行結果 Acr.UserDialogs 執行結果

沒有留言:

張貼留言