Xamarin.Forms XAML LiveXAML Xamarin

使用 Xamairn.Forms 開發 App 時,在設計 XAML Code 的好用套件 LiveXAML…

James Tsai 2017/09/28 23:57:20
745

主題

使用 Xamairn.Forms 開發 App 時,在設計 XAML Code 的好用套件 LiveXAML

文章簡介

長久以來開發 Xamarin.Forms 的時候,編輯 XAML Code 都沒有方便能預覽 XAML Code 編輯的結果的工具,使得在編輯 XAML Code 時常常是事倍功半但最近終於發現一個套件 "LiveXAML",解決了這個棘手的問題,在編輯 XAML Code 時就能預覽編輯的狀況,讓我們事

作者:

James Tsai

版本/產出日期:

V1.0/2017.9.28



1. 前言


LiveXAML 的介紹


2. 環境準備


Visual Studio 2015/2017

Visual Studio for Mac



3. 本文


Xamarin.Forms 編輯 XAML Code 介紹


如果是在開發 Xamarin.Forms App,目前若要及時預覽 XAML Code 編輯的結果,使用 Xamarin.Forms Previewer 大概是目前官方提供的一個可行辦法。




但不得不說這個 Xamarin.Forms Previewer常常會秀逗秀逗的。而且遇到比較複雜的 XAML Code ,例如: 自訂 ResourcesCustomControl Xamarin.Forms Previewer 就會罷工了,還倒不如直接編譯執行來看還比較快。

直到最近發現了一個套件 LiveXAML 雖然不是免費的套件,但如果常常設計與使用Xamarin.Forms XAML Code 編輯,試用14天後覺得不錯、好用,那花點錢讓自己做事能更有效率,會是值得的。


LiveXAML 介紹


到網站點選下載! (在這邊展示 Visual Studio)




Visual Studio Marktplace 下載套件。




LiveXAML Visual Studio Extension 安裝檔。




安裝完成後,會在 Visual Studio "工具" 選單,看到 "LiveXAML settings" 選項。




試用期有14天。




如果有 License 直接在這邊填入你註冊的 email




點選 Load license




License 啟用成功。




開個 Xamarin.Forms 的專案,在這邊使用 PCL 作為展示。




開好 Xamarin.Forms 專案,稍微等一下 LiveXAML 會自動跳出來。




可選擇 Automatic 自動 Xamarin.Forms 專案中啟用 LiveXAML




啟用了就會變這樣。




或是選擇手動在專案中安裝 Nuget-Package




在套件管理器主控台做 Nuget-Package 安裝的時候要選對專案。若 Xamarin.Forms 是使用PCL專案方式,就只要安裝在PCL專案就好。

指令:
install-package LiveXAML





測試使用 LiveXAML


若是先直接把 Xamarin.Forms 專案編譯並啟動錯執行起來。




直接打開 Xaml 頁面編輯 XAML Code (不要停止),編輯好 XAML Code 後只要按下 Ctrl + s (存檔快捷鍵),就會看到 LiveXAML 編輯 XAML Code即時呈現在畫面上,Magic !




如果 LiveXAML 覺得好用,就給它訂閱下去啦~~~
http://www.livexaml.com





4. 參考來源


LiveXAML:
http://www.livexaml.com

James Tsai