Xamarin XAML語言教程使用Visual Studio建立XAML

Xamarin.Forms允許開發人員透過XAML語法對程式的所有使用者介面元素進行詳細的定製，如文字、按鈕、影像和列表框等。同時，開發者還可以藉助它對整個介面進行合理化的佈局。透過XAML來構建UI介面具有簡潔、視覺化等優點，非常適合MVVM的應用程式架構。本章將講解關於XAML語言基礎內容，其中包括XAML語言簡介、建立XAML檔案、XAML檔案構成、元素構成等內容。

XAML語言簡介

XAML是Extensible Application Markup Language的英文縮寫，相應的中文名稱為“可擴充套件應用程式標記語言”。它是微軟公司為構建應用程式使用者介面而建立的一種新的描述性語言。它基於Extensive Markup Language（XML）可擴充套件標記語言。XAML提供了一種便於擴充套件和定位的語法來定義和程式邏輯分離的使用者介面，而這種實現方式和ASP.NET中的“程式碼後置”模型非常類似。XAML是一種解釋性的語言，儘管它也可以被編譯。它的優點是簡化程式設計式上的使用者建立過程，應用時要新增程式碼和配置等等。

建立XAML檔案

在Xamarin.Forms中，XAML程式碼儲存在XAML檔案中。開發者在編寫XAML程式碼時，首先需要建立對應的XAML檔案。本節將講解使用兩種開發工具建立XAML檔案，第一種是使用Visual Studio建立XAML；第二種是使用Xamarin Studio建立XAML。

使用Visual Studio建立XAML

使用Visual Studio建立XAML檔案有兩種方式。第一種是建立專案後再建立XAML檔案，第二種是建立專案時建立XAML檔案。下面對這兩種方式詳細介紹。

1.建立專案後再建立XAML檔案

以下我們將以建立專案Hello為例，為開發者講解建立PCL型別的專案後，再建立XAML檔案的具體操作步驟：

（1）開啟Visual Studio，如圖1.1所示。

（2）單擊“新建專案…”按鈕，彈出“新建專案”介面，如圖1.2所示。

圖1.1  啟動VS

（3）選擇Cross-Plaform下的Blank App (Xamarin.Forms Portable) 模板，將名稱、位置進行修改，這裡我們將名稱改為了Hello，將位置改為了D:\Code\XAML。

圖1.2  “新建專案”介面

（4）單擊“確定”按鈕，此時就建立好了一個名稱Hello的專案。

（5）右擊Hello (可移植的) 專案，彈出快捷選單，如圖1.3所示。

圖1.3  選單

（6）在彈出的快捷選單中選擇“新增(D)”|“新建項(W)…”命令，彈出“新增新項 – Hello”介面，如圖1.4所示。

圖1.4  “新增新項 – Hello”介面

（7）選擇Cross-Platform下的Forms Xaml Page項，並將名稱改為XAMLPage.xaml。

注意：如果開發者不修改圖1.4中的名稱，預設為Page1.xaml。

（8）單擊“新增(A)”按鈕，此時一個XAML檔案就建立好了，此檔案的名稱為XAMLPage，如圖1.5所示。

圖1.5  XAMLPage.xaml檔案

注意：在此Xamarin版本中，還不支援基於Share型別專案建立XAML檔案。

2.建立專案時建立XAML檔案

在Visual Studio中，建立專案時建立XAML檔案是一種最常用的方式，並且是最為簡單的的方式。以下我們將以Hello為例，為開發者講解建立專案時建立XAML檔案的具體操作步驟：

（1）在計算機上找到Visual Studio，將其開啟示。

（2）選擇“新建專案…”按鈕，彈出“新建專案”介面，如圖1.6所示。

（3）選擇Cross-Plaform下的Blank Xaml App (Xamarin.Forms Portable) 模板，將名稱、位置進行修改，這裡我們將名稱改為了Hello，將位置改為了D:\Code\XAML。

圖1.6  “新建專案”介面

（4）單擊“確定”按鈕，此時就建立好了一個名稱Hello的專案。我們可以看到，在建立的專案中存在一個XAML檔案，此檔案的名稱MainPage.xaml，如圖1.7所示。

圖1.7  MainPage.xaml檔案

注意：如果開發者想要在此專案中再建立一個XAML檔案，需要按照1.2.1小節中的步驟5到步驟7的方式操作。