Visual Studio Xamarin.Forms UWP

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

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

主題

Visual Studio中建立Xamarin.Forms with UWPApp

文章簡介

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

作者

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-PlatformXamarin.Froms專案

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


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



接著我們要將每專案的Xamarin.FromsNuget套件升級到2.0以上



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



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



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



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



選擇對應的UWP專案。



新增UWP專案完成。



調整UWP專案適用Xamarin.Forms


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



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



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



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



接著打開MainPage.xaml,變更XAML使用Xamarin.FormsXAML



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



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








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



接著按下F6建置整個方案,讓Xamarin.FromsPortable專案再次編譯。接著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