了解更多關於 [Xamarin.Android] 的使用方式

了解更多關於 [Xamarin.iOS] 的使用方式

了解更多關於 [Xamarin.Forms] 的使用方式

了解更多關於 [Hello, Android：快速入門] 的使用方式

了解更多關於 [Hello, iOS – 快速入門] 的使用方式

了解更多關於 [Xamarin.Forms 快速入門] 的使用方式

現在，我們可以來觀看我最推薦開發 Xamarin.Forms 應用程式的工具與開發框架，那就是使用 Prism Template Pack 這個 Visual Studio 擴充功能，透過其提供的專案樣板，協助我們可以建立出一個 Prism 可用的開發專案，關於 Prism 的更多資訊，可以參考 Prism on Github。

另外，通常我們在進行 Xamarin.Forms 專案開發的時候，會使用 MVVM 設計模式技巧，進行頁面與商業邏輯的設計，同樣的，我們會將頁面要出現的內容，使用 XAML 標記語言進行宣告，而每個頁面的商業處理邏輯程式碼，將會寫在 ViewModel 檢視模型中，在這裡，我們不會將這些商業邏輯使用 Code Behind 的方式寫在每個頁面的後置碼內，會有這樣的考量那是因為，我們不希望把頁面與商業邏輯緊密的綁定在起，這樣對於日後進行專案維護與測試上，會顯得非常不方便，我們要能夠建立頁面與檢視模型之間具有低鬆耦合特性；更多關 MVVM 的資訊，可以參考第 5 部分從資料繫結至 MVVM。想要完成這樣的需求，您一定需要精通資料綁定 Data Binding 這個技術，這樣在開發專案的時候，才能夠得心應手；想要更進一步了解資料綁定的相關內容，可以參考第 4 部分資料繫結的基本概念

建立一個 Xamarin Forms for Prism 專案

首先，我們打開 Visual Studio 2017 (任何一種版本 Visual Studio Community 2017 / Visual Studio Professional 2017 / Visual Studio Enterprise 2017皆可)
接著，請安裝 Prism Template Pack 這個擴充功能，
點選 Visual Studio 2017 功能表的 [工具] > [擴充功能和更新]
請在點選 [線上] 標籤頁次，接著在右上方搜尋文字輸入盒中，輸入 Prism
稍後一下，就會看到搜尋結果，請您將 [Prism Template Pack] 這個選項安裝到 Visua Studio 2017 中。

一旦您安裝完成 Prism Template Pack，現在可以
點選 Visual Studio 2017 功能表的 [檔案] > [新增] > [專案]
當出現 [新增專案] 對話窗，請依序選擇 [已安裝] > [Visual C#] > [Prism] > [Prism Blank App (Xamarin.Forms)]
請在最下方 [名稱] 文字輸入盒欄位，輸入您想要的專案名稱
最後，請點選 [確定] 按鈕

Visual Studio 2017 Xamarin Forms Prism new project

現在，Visual Studio 2017 將會顯示 [PRISM PROJECT WIZARD] 這個對話窗，您可以在這個對話窗中，選擇需要跨平台的目標，在這裡，您將會有三種選擇： ANDROID, iOS, UWP，請依照您的需求，勾選需要建立的專案類型。接著，請在下方 [Container] 下拉選單中，選擇 Unity 這個選項；最後，請點選 [CREATE PROJECT] 這個按鈕，請 Prism Template Pack 所提供的樣板精靈，幫助我們產生出可用於 Prism 框架的 Xamarin.Forms 方案與專案。

此時，Visual Studio 2017 的 Prism Template Pack 將會開始幫您建立起四個專案(假設我們在上個步驟，勾選的所有平台目標)，分別是：
- Xamarin.Android 原生專案
- Xamarin.iOS 原生專案
- Windows UWP 原生專案
- .NET Standard Class Library SCL 共用類別庫專案
現在，我們可以從 Visual Studio 2017 的方案總管中，看到已經產生了四個專案，如下圖所示，其中，當我們使用 Xamarin.Forms 進行專案開發的時候，原則上大多只會在 SCL 專案上進行程式碼與 XAML 的設計，也就是 .NET Standard Class Library 類別庫內進行程式開發。在 SCL 專案中，我們看到建立了兩個資料夾 [ViewModels] & [Views]，我們日後將會在這兩個資料夾來建立頁面的 XAML 標記宣告 (在 Views 資料夾)與每個頁面的商業邏輯(在 ViewModels 資料夾)。

現在，請在方案總管中的 SCL 共用類別庫專案內，展開 Views 資料夾，找到 MainPage.xaml 這個節點，使用滑鼠雙擊打開這個檔案；您將會看到這個應用程式頁面的 XAML 標記宣告內容，在這個頁面中，我們僅有宣告顯示一個文字在螢幕上，他將會顯示出 Welcome to Xamarin Forms and Prism! 這個文字。

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

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
    </StackLayout>

</ContentPage>

現在，請將這個 MainPage.xaml 內容，修改成為如底下所呈現內容。
在這個頁面 XAML 宣告中，我們並沒有使用 x:Name 這個 XAML 延伸標記功能，因為，我們在這個新手練習中，不會使用 Code Behind 來設計相關商業邏輯，我們將會使用資料綁定 Data Binding 的方法，將頁面檢視 (View) 中的 XAML 與檢視模型 (ViewModel) 進行串接再一起，在底下的 XAML 標記宣告中，我們將會綁訂一個 Text 屬性到 ViewModel 中的一個 C# 字串屬性，另外，我們也需要透過資料綁訂 (Data Binding) 來綁定一個 Command 屬性到 ViewModel 中的一個有實作 ICommand 介面 (Interface) 的 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"
             x:Class="XFPQStart.Views.MainPage"
             Title="{Binding Title}">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Button
            HorizontalOptions="Center" VerticalOptions="Center"
            Text="{Binding ButtonText}"
            Command="{Binding ButtonCommand}"/>
    </StackLayout>

</ContentPage>

另外，請展開 ViewModels 資料夾，您將會找到 MainPageViewModel.cs 這個節點，使用滑鼠雙擊打開這個節點，在這個檔案內將會有個 MainPageViewModel 類別，也就是我們採用 MVVM 開發模式中的 ViewModel 檢視模型部分，我們會在這裡設計該頁面會用到的各種商業邏輯程式碼。所以，我們使用底下程式碼將其替換，使用具備如同我們前兩個 Android / iOS 練習專案所呈現的相同商業邏輯。
在這裡，我們建立一個 ButtonText C# Property 屬性，這個屬性需要實作 .NET 提供的 INotifyPropertyChanged INPC 介面，如此，資料綁定的機制才能夠成功運作起來，而我們將會透過 Prism 所提供的 ViewModelBase 這個繼承類別內提供的 SetProperty 方法來做到這樣需求；因此，只要我們在 ViewModel 中變更這個屬性值，頁面中的按鈕標示的文字也會變更。另外，我們也建立一個型別為 DelegateCommand 的 ButtonCommand 的物件，搭配按鈕控制項的 Command 屬性，作為使用者點選這個按鈕之後，所要執行的商業邏輯程式碼。

public class MainPageViewModel : ViewModelBase
{
    private string _ButtonText = "Button";
    public string ButtonText
    {
        get { return _ButtonText; }
        set { SetProperty(ref _ButtonText, value); }
    }
    public int count { get; set; }
    public DelegateCommand ButtonCommand { get; set; }
    public MainPageViewModel(INavigationService navigationService) 
        : base (navigationService)
    {
        Title = "Main Page";

        ButtonCommand = new DelegateCommand(() =>
        {
            ButtonText = string.Format("{0} clicks!", count++);
        });
    }
}

準備進行 Xamarin.Forms for Prism 之 Android 專案的建置、執行、與除錯

請設定 Android 專案為預設起始專案
確認選擇適當的 Android 模擬器
按下 F5 開始執行

準備進行 Xamarin.Forms for Prism 之 iOS 專案的建置、執行、與除錯

請設定 iOS 專案為預設起始專案
確認選擇適當的 iOS 模擬器與SDK版本
按下 F5 開始執行

其他參考文章

很多人認為使用 MVVM 開發造成 Xamarin.Forms 開發上的困難度，這就像您喜歡 ASP.NET Web Forms 的開發方式，不喜歡 ASP.NET MVC 開發方式，您就可以直接使用 Web Forms 的方式來開發專案；您喜歡 MVC 的架構來開發您的網站，您就專心研究出如何寫出好的 MVC 架構專案，所謂，青菜蘿蔔各有所好。您可以參考這篇文章 Xamarin.Forms 用 MVVM 開發的好處? Prism 和 cross-platform 開發（優劣）差異? （我發現寫在 ViewModel 內程式碼要多好多） , Xamarin.Forms MVVM 123 , 我要使用 Code Behind or MVVM ? 會有更多的說明。

另外，在這篇文章中提到使用 Prism 設計框架來幫助我們快速開發出 Xamarin.Forms 應用程式專案，難道沒有其他更好的選擇嗎？我還是那句話，青菜蘿蔔各有所好，挑選您喜歡的 Framework，坐下來，開始進行 Xamarin.Forms 專案開發，才是對的，嘴砲沒有甚麼實質幫助。關於更多其他 MVVM Framework，可以參考 Xamarin Forms and MVVM frameworks part 1: Xamarin Forms’s specific frameworks 與 Xamarin Forms and MVVM frameworks part 2: something else? 和 Should I Use A Xamarin.Forms MVVM Framework? 討論文章吧