2017/2/25

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/


2 則留言:

  1. The previewer requires a 64-bit version of Oracle Java JDK 8 (1.8) or higher. Please install it and then set the Java Development Kit Location in the Tools->Options->Xamarin->Android Settings menu. Note that installing a 64-bit JDK requires 64-bit Windows (see also https://support.microsoft.com/help/827218).
    還有一件事,32位元的電腦是不行的,它會跳出上面的錯誤。

    回覆刪除
    回覆
    1. 我會比較推薦用 LivePlayer 來做即時看畫面這件事情...
      看起來官方也是將開發資源投入在 LivePlayer 上

      刪除