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

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

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

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

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

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

在這篇新手教學文章中，我們將要來看看如何使用 Xamarin.Forms 的方式，來開發出一個跨平台 ( Cross-Platform )的行動應用程式，也就是說，當我們建立了一個 Xamarin.Forms 方案/專案，我們可以把應用程式會用到的所有頁面內容，使用 XAML 宣告標記語言來定義，接著把所有處理的商業邏輯，寫在 Code Behind 或者 ViewModel 中；是的，您沒有看錯，我們只需要設計一次頁面的 UI 與商業邏輯程式碼，最後，只需要把 Xamarin.Android / Xamarin.iOS 專案重新建置一次，這樣，我們就同時產生了可以在 Android / iOS 平台下執行的應用程式 App。也就是說，我們會再 SCL (.NET Standard Class Library 標準類別庫) 進行整個應用程式的頁面畫面與每個頁面需求的商業邏輯設計(在這裡將會使用 C# 程式語言與 XAML 宣告式標記語言來完成)，完成之後，我們僅需要分別建置 Android / iOS / UWP 專案各一次，就可以同步產生出三個跨平台的行動應用程式。

同樣的，在此之前，各位需要先行準備好您的 Visual Studio 2017 + Xamarin 開發環境；關於要如何準備您們的 Xamarin 開發環境，可以參考第一次安裝 Visual Studio 2017 到新的作業系統上或者可以參考 Xamarin / Xamarin.Forms 行動跨平台 Mobile Cross-Platform 開發學習指引問答集 FAQ；若您還有 Xamarin 相關的問題，可以到 Xamarin.Forms @ Taiwan 與 Xamarin 同好一同進行討論。

您也可以查看微軟官方的 Xamarin.Forms 介紹文章開始使用 Xamarin.Forms，來了解更多關於 Xamarin.Forms 專案的開發技術與技巧。另外，若您對於 XAML 有進一步的興趣或者想要研究，可以參考這篇微軟官方的 eXtensible Application Markup Language (XAML) 介紹文章。

建立一個 Xamarin Forms 專案

首先，我們打開 Visual Studio 2017 (任何一種版本 Visual Studio Community 2017 / Visual Studio Professional 2017 / Visual Studio Enterprise 2017皆可)
點選 Visual Studio 2017 功能表的 [檔案] > [新增] > [專案]
當出現 [新增專案] 對話窗，請依序選擇 [已安裝] > [Visual C#] > [Cross-Platform] > [Mobile App (Xamarin.Forms)]
請在最下方 [名稱] 文字輸入盒欄位，輸入您想要的專案名稱
最後，請點選 [確定] 按鈕

Visual Studio 2017 Xamarin Forms new project

現在，Visual Studio 2017 將會顯示 [New Cross Platform App - XFQStart] 這個對話窗，請在這個對話窗中點選 [Blank App] 圖示，接著在下方的 Platform 欄位中，選擇您想要跨平台的目標，在這裡，我們將會選擇 Android iOS Windows(UWP) 這三個所有的行動作業系統平台；而在 [Code Sharing Strategy] 程式碼共用策略欄位中，請您選擇 [.NET Standard]，說明我們將要使愈 SCL (.NET Standard Class Library) 類別庫的方式來時做出我們頁面與商業邏輯的共用程式碼 (在此之前，我們所使用的共用程式碼策略將會是 PCL Portable Class Library，也就是可攜式類別庫)。
當然，您也可以選擇使用 Shared Project 的 [Code Sharing Strategy] 共用程式碼策略，來完成在不同行動作業系統平台下的共同商業邏輯的程式碼共用設計方式，Shared Project 與 .NET Standard 兩者的作法不盡相同，前者使用類似專案捷徑的方式來設計，這些共用程式碼將會再編譯時期來進行與原生專案的一起編譯，而後者則是一個類別庫的架構，也就是說，您所設計的所有共用程式碼，都會建立在一個類別庫內，只要同時與猿聲專案一同佈署到手機裝置中，就可以執行了。
確認無誤之後，請點選 [OK] 按鈕。

此時，Visual Studio 2017 將會開始幫您建立起四個專案，分別是：
- Xamarin.Android 原生專案
- Xamarin.iOS 原生專案
- Windows UWP 原生專案
- .NET Standard Class Library SCL 共用類別庫專案
現在，我們可以從 Visual Studio 2017 的方案總管中，看到已經產生了四個專案，如下圖所示，其中，當我們使用 Xamarin.Forms 進行專案開發的時候，原則上大多只會在 SCL 專案上進行程式碼與 XAML 的設計，也就是 .NET Standard Class Library 類別庫內進行程式開發。

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

<?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:local="clr-namespace:XFQStart"
             x:Class="XFQStart.MainPage">

    <Label Text="Welcome to Xamarin.Forms!" 
           VerticalOptions="Center" 
           HorizontalOptions="Center" />

</ContentPage>

現在，請將這個 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:local="clr-namespace:XFQStart"
             x:Class="XFQStart.MainPage">

    <Button
        HorizontalOptions="Center" VerticalOptions="Center"
        x:Name="MyButton"
        Text="Button"
        />

</ContentPage>

找到 MainPage.xaml.cs 這個節點，使用滑鼠雙擊打開這個節點，您將會看到這個頁面的 Code Behind 程式碼，我們使用底下程式碼將其替換，使用具備如同我們前兩個 Android / iOS 練習專案所呈現的相同商業邏輯。
在這裡，因為我們在 XAML 中的按鈕控制項有設定 x:Name 延伸功能來設定這個控制項的名稱，因此，我們可以在控制項中來存取這個按鈕控制項，所以，我們透過 MyButton 這個變數(這個變數會自動產生，並且在 InitializeComponent 方法中進行宣告與進行初始化)，設定這個按鈕的 Clicked 事件與一個 Lambda 表示式綁定在一起，在這個表示式中，請將會依據使用者點選按鈕的次數，來設定這個按鈕的名稱。

public partial class MainPage : ContentPage
{
    public int count { get; set; }
    public MainPage()
    {
        InitializeComponent();

        MyButton.Clicked += (s, e) =>
        {
            MyButton.Text = string.Format("{0} clicks!", count++);
        };
    }
}