Visual Studio Xamarin.Forms UWP

在Visual Studio中建立Xamarin.Forms with UWP的App

James Tsai 2016/01/04 09:23:47
1542

主題:

在Visual Studio中建立Xamarin.Forms with UWP的App

文章簡介:

透過此篇文章的解說,你將能清楚的知道如何在Visual Studio當中使用Xamarin.Forms的App時,也可以建立Windows 10的UWP的版本。

作者:

James Tsai

版本/產出日期:

V1.0/2015.12.30



1. 前言


• 在Xamarin.Forms開發App時,過去只能建立iOS、Android、Windows Phone的App,自從Xamarin.Forms 2.0以後,就可以一併建立Windows 10的UWP的App了。雖然目前還是Preview階段,但卻真的可以讓人可以Write Once, Run Every Platforms。


2. 環境準備


• Windows 8/8.1/10

• Visual Studio 2012/2013/2015 (建議VS2015)


3. 本文


在Visual Studio當中建立Cross-Platform的Xamarin.Froms專案。

• 首先我們在Visual Studio選擇Blank App (Xamarin.Forms Portable)的專案。


• 由於我們要直接建立Windows 10的UWP App(不管Windows Phone 8/8.1的意思)。所以把在方案總管中的WinPhone專案給刪除(若要保留也可)。



• 接著我們要將每個專案的Xamarin.Froms的Nuget套件升級到2.0以上。



• 在Nuget的設定畫面當中,找到更新分頁,將Xamarin.Forms的版本更新到最新版。



• 在預覽變更這邊直接按確定。



• 注意,三個專案都要更新Xamarin.Froms的Nuget套件到最新版。最後可能會遇到無法移除舊版的套件,提醒你重新啟動Visuals Studio。就按下Restart。



• 重新啟動後,我們在方案上右鍵選單點選加入->新增專案。



• 選擇對應的UWP專案。



• 新增UWP專案完成。



調整UWP專案適用Xamarin.Forms


• 目前的UWP專案還無法直接的跟Xamarin.Forms整合在一起,還需要經過一些手動的調整。首先就先將剛剛新增的UWP專案,加入Xamarin.Forms的Nuget套件吧!!!



• 在Nuget套件的瀏覽分頁當中,搜尋Xamarin.Forms後安裝。



• 在預覽變更這邊直接按確定。



• 接著打開UWP專案底下的App.xaml.cs,加入程式碼。



• 接著打開MainPage.xaml,變更XAML使用Xamarin.Forms的XAML。



• 接著打開MainPage.xaml.cs,調整當中的程式碼。



• 接著在UWP專案當中,加入App1(可攜式)專案的參考。








• 打開在建置選單當中,打開組態管理員。將App1.WinUniversal專案的建置與部屬打勾後,點選關閉。



• 接著按下F6建置整個方案,讓Xamarin.Froms的Portable專案再次編譯。接著將App1.WinUniversal設定為起始專案後,按下F5編譯執行。結果如下


4. 參考來源


• Adding a Universal Windows Platform (UWP) App

https://developer.xamarin.com/guides/xamarin-forms/windows/getting-started/universal/


• Getting Started with Xamarin.Forms 2.0’s Windows 10 Preview

https://blog.xamarin.com/getting-started-with-xamarin-forms-windows-10-preview/


James Tsai