Xamarin.Forms 初體驗

接連兩天都在安裝程式實在有點無聊,今天就來玩點別的吧。

Prism MVVM

阿源哥哥是個 Framework 的重度愛好者,有現成的就套著用,以先前從事多年程式設計的經驗一定會有許多善心人士為 Xamarin.Forms 開發合用的搭檔套件。而一般 XAML 為基礎的使用者介面設計模式最有名的就是 MVVM Pattern 了,所以趕快來問 Google 一下,是否有 MVVM Library for Xamarin.Forms 果然有:

雖然有許多 MVVM Library 可供選用,但是阿源哥哥向來比較喜歡用原廠的,所以就選用屬於 .NET FoundationPrim Library 了。除了有比較完整的範例程式之外,還有對阿源哥哥這種比較懶的人很有吸引力的:專案範本、項目範本,以及程式碼片段可供套用,可以減少打許多字的 Prism Template Pack 可以與 Visual Studio 2017 整合使用。那就趕快來下載安裝:

註:
阿源哥哥選用套件的另一個原則是,該套件是否有持續在開發,是否還繼續有人在維護

第一個 Xamarin.Forms 專案

既然 Prism Template Pack 已經安裝,接著就使用專案範本來建立第一個 Xamarin.Forms 專案吧:

註:
阿源哥哥是一個非常懶得打字的人,所以在往後的文章裡有關使用 IDE 開發工具的操作步驟會以幾張圖和一句話就帶過,但是也不用緊張,所有圖片都會標示操作順序,而圖面上所選用的滑鼠圖標也有代表意義的,上面這張圖的操作步驟可以解讀成:

  1. 在主選單上使用滑鼠左鍵按一下【檔案(F)】
  2. 將滑鼠移到【新增(N)】上方
  3. 在出現的選單中用滑鼠左鍵按一下【專案(P)...】
  4. 在已安裝的範本中以滑鼠左鍵 Visual C#  → Prism → Xamarim.Forms 開啟 Xamarim.Forms 專案範本選單
  5. 按一下滑鼠左鍵選擇 【Prism Unity App(Xamarin.Forms)】
  6. 給專案取一個名稱(在本例是取名:MyFirstXamarinForm)
  7. 以滑鼠左鍵按下【確定】

按下【確定】之後,接著選擇專案所要支援的作業平台,還記得我們先前的志願是寫一個可以同時支援 Android、iOS、UWP(Windows 10)等三種作業平台的商業應用程式,所以三個都給他選下去,然後按下【CREATE PROJECT】

一陣等待(大約半分鐘吧),最後選擇通用 Windows 專案的目標版本和最低版本,然後按下【確定】,一個可在三種平台執行的專案空殼子就已經產生完畢,等著我們為它加入應用程式的功能。

Xamarin.Forms 專案架構

首先,先來看看 Prism Xamarin.Forms 專案範本為我們產生了什麼專案內容。如圖的方案總管所示,專案範本為我們產生了四個專案,其中的 MyFirstXamarinForm(可攜式)專案是程式設計主要要寫 Code 的地方,而另外分別為:

  • MyFirstXamarinForm.Droid  ← Android 專案
  • MyFirstXamarinForm.iOS ← iOS 專案
  • MyFirstXamarinForm.UWP ← 通用 Windows 專案

這三個專案分別參考 MyFirstXamarinForm(可攜式)專案,真正部署到行動裝置(或上架到市集)的正是各別的三個專案編譯後的執行檔。這也就是 Xamarin.Forms Framework 能夠寫一次就能分別在三種不同作業平台上執行的密秘。

註:
雖然 Prism Xamarin.Forms 有四個專案範本,其實四個專案範本所產生的內容幾乎都是一樣的,差別只是在於使用哪一套控制反轉(Inversion of Control,縮寫為IoC套件實做依賴注入(Dependency Injection,簡稱DI而已,如果有自己喜好的套件就選用該套,如果沒有就選用 Unity 好了。

試著偵錯執行

使用 Prism Xamarin.Forms 專案範本所建立的三個分別作業平台的專案,雖然還沒有任何的應用程式執行功能,但是確實可以部署到手機(虛擬手機)上執行,所以接下來就分別來部署到 Android 和 Windows 虛擬手機上執行看看。

註:
雖然使用安裝在 Windows 10 作業系統上的 Visual Studio Community 2017 開發工具可以開發 iOS(iPhone、iPad)應用程式,但是編譯、部署,甚至在 iPhone 模擬器上執行都需要有一台 Mac 電腦,實際的作法,等明天再討論

首先,先將方案建置一次:

Android 模擬器

然後將要用來測試應用程式的 Android 模擬器開機:

將 Android 專案設定為啟始專案:

選擇與剛才開機相對應型號的 Android 模擬器:

部署並執行,沒有什麼好期待的,專案範本只是產生一個顯示一串文字的頁面,其他什麼功能都沒有,但是我們己經確認一個可以部署到 Android 行動裝置的應用程式空殼子等著我們追加功能:

Windows 模擬器

試完了 Android 模擬器之後,接下來就來試試在 Windows 模擬器上執行的效果吧!但是很不幸的出現錯誤無法正常執行!

看來是哪裡發生了問題,有事就問 Google 吧!果然不出所料,是 Prism Template Pack 沒有將 UWP 專案做好,但是事情不解決不行,雖然目前使用 Windows 手機的人還算少數(Windows 平板卻有增多的趨勢),但是就算沒有什麼人用,因為我們要開發的是幫助中小企業管理用的商業應用程式,使用者包含全公司的所有員工,只要公司內有一個人(這個怪咖如果特別是老闆或財務長)拿 Windows 手機,客戶一定會死纏活賴也會要求我們將執行在Windows 手機上的 UWP 應用程式開發出來。

好吧!今天時間也晚了,明天一早再來想辦法解決吧,上工準備工作 ~~~~~