Xamarin.Forms Previewer - Xaml 預覽器 with Visual Studio 2015

昨天上班聽同事說 Visual Studio 有 Xaml 預覽器這種神奇的東西... (一直沒發現...)

手癢的我下班回家就想玩看看，想不到要求還滿多的...

要滿足以下三點才能招喚預覽器：

1. Android SDK API 25 以上
2. JAVA JDK 1.8 以上
3. 專案要先建置

這一篇文章就帶大家一步一步滿足他...

這幾天剛好 Xamarin 升級到 4.3 ~ 最大的改變就是新增專案後只剩下 Android 和 iOS，(Xamarin 終於看清沒有人在開發 WP 了?)

新增專案時也變得更簡潔，還多了 Master Detail 的樣板可選擇：

另外，更新完 Xamarin 4.3 後，第一次新增專案怪異的等超久... 





樣板會先建立一些資料夾和範例程式：

回到正題，讓我們來滿足預覽器...

1. 安裝 Android SDK API 25

在 VS 內開啟 Android SDK Manager：

打開後若發現 API 25 沒有綠色的 SDK Platform 可勾選，請先安裝更新 Android SDK Tools：

安裝完再重開 SDK Manager，即可獲得 7.1.1 的 SDK Platform，勾選並安裝：

安裝完後重開 VS，就能獲得以下錯誤碼：

別怕，讓我們來...

2. 安裝 JDK 1.8

請先至官網下載並安裝：
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

安裝完畢後回到 VS 更改設定：

工具 → 選項 →  Xamarin → Android Settings → Java 開發套件位置 → 變更

指向剛剛安裝 JDK1.8 的資料夾：

3. 建置專案

這不用我教了吧...

滿足以上三點就能開啟 Previewer，

Visual Studio → 檢視 → 其他視窗 → Forms Previewer：

選擇輸出的 Device 和 Platform：

iOS 請連結 Mac...

點擊 .xaml 檔，等 Previewer render 一下：

就會出現畫面了：

謎之聲：有時 render 還滿久的，但至少不用建置完發布到模擬器或手機才能看到畫面了!!!

最後附上 Xamarin 官方網址：

https://developer.xamarin.com/guides/xamarin-forms/xaml/xaml-previewer/