XAML in Xamarin.Forms 基礎篇 電子書

XAML in Xamarin.Forms 基礎篇 電子書
XAML in Xamarin.Forms 基礎篇 電子書

Xamarin.Forms 快速入門 電子書

Xamarin.Forms 快速入門 電子書
Xamarin.Forms 快速入門 電子書

2018/02/19

Xamarin / Xamarin.Forms 行動跨平台 Mobile Cross-Platform 開發學習指引問答集 FAQ

了解更多關於 [Xamarin.Android] 的使用方式
了解更多關於 [Xamarin.iOS] 的使用方式
了解更多關於 [Xamarin.Forms] 的使用方式
了解更多關於 [Hello, Android:快速入門] 的使用方式
了解更多關於 [Hello, iOS – 快速入門] 的使用方式
了解更多關於 [Xamarin.Forms 快速入門] 的使用方式


為什麼會有這篇 Xamarin 介紹說明文章


許多人想要開發具有跨平台的行動應用程式,因此,發現到Xamarin 可以做到這個需求,可是,當要進入到Xamarin 開發環境的時候,會遭遇到許多問題與挫折,例如:如何進行Visual Stuido 2017 / Xamarin 開發環境的安裝與設定、遇到相關安裝問題,該如何處理、有甚麼網路文章、教學說明或電子書、書籍,可以讓我來學習Xamarin 開發技術,因此,我就把大家對於Xamarin 經常詢問與關注的相關問題,整理成這份文章。

為什麼我要使用Xamarin 來開發行動應用程式App?


若您是一位.NET C# 的開發人員,想要進入到跨平台行動應用開發領域,那麼,選擇Xamarin 開發工具,是您唯一的選擇。因為,Xamarin 可以幫助您開發出Android / iOS / UWP 平台的行動應用程式,最重要的是,從頭到尾,您都只需要使用.NET / C# 來進行程式設計,開發過程就如同您平常開發其他架構的.NET 程式一樣,完全沒有陌生感覺,無須再度學習其他各種程式語言;另外,我們可以充分善用.NET 架構下的類別庫能力,將每個平台都會用到的類別、方法、功能,全部都放到類別庫內,這樣,我們可以在大幅減少程式碼的開發時間。

若您對於Xamarin開發工具還有不太清楚的地方,可以參考了解Xamarin的行動應用程式開發這篇文章。

我是否要使用Xamarin.Forms 來開發呢?


在Xamarin 開發環境中,您有兩種開發方式可以選擇。

第一個就是使用Xamarin 原生專案的開發方式

在這個方式下,所有的商業邏輯都是使用C# 來進行設計,而每個頁面的UI 設計,則是使用每個行動平台SDK 所提供的工具來進行開發,因此,只要您在原生SDK 可以做到的事情,在Xamarin 原生專案的開發方式,都可以做到,因此,具有相當大的彈性與可以發揮的空間。

第二個就是使用Xamarin.Forms 的開發方式

在這樣的開發方式下,不同行動平來的每個頁面,將會使用XAML 標記宣告語言來設計,而且,我們並不需要針對不同行動平來,都使用XAML 來設計一個頁面,在Xamarin.Forms開發方式下,我們所有的頁面都只需要設計一次,當在執行的時候,就會在不同行動平台下,使用原生UI 控制項來呈現給使用者看到。所以,若採用Xamarin.Forms 方式來開發,您的商業邏輯、頁面UI,完全只需要設計一次,根據我之前開發專案的經驗,使用Xamarin.Forms 開發出可以在Android / iOS 下執行的應用程式,可以達到93% 左右的共用程式碼績效,因而,大幅減少了專案開發時間與效能和品質。

什麼是XAML ?

在進行Xamarin.Forms專案開發下,每個應用程式要呈現的頁面內容,我們都會使用XAML語言來進行設計。而, XAML是e Xtensible Application Markup Language的縮寫,在XAML語言內,我們僅能夠宣告與定義頁面要呈現甚麼樣貌,而不能在這裡設計任何程式處理邏輯功能。因此,我們在進行Xamarin.Forms專案開發的時候,需要精通與孰悉XAML的用法與功能,並且善用各種頁面、版面配置、控制項的設計方法
當我們在開發Web 專案的時候,都會使用HTML 與JavaScript 來進行專案開發與設計,XAML 與C# 在Xamarin.Forms 中的角色,就如同剛剛所提到的Web 專案開發上的關係。
這裡有介紹與讓您了解XAML觀念、使用方式的教學文章:Xamarin.Forms XAML Basics,這系列文章共分成五個部分,當您觀看完這五篇文章之後,您就可以開始進行XAML的頁面UI設計了。

Xamarin 使用什麼語言來開發跨平台應用程式?

不論是Xamarin 或者是Xamarin.Forms,在應用程式中的所有商業邏輯需求,真的不要懷疑,我們都可以只用C# 程式語言來完成所有的商業邏輯需求程式碼設計,甚至,我們可以使用C# 來呼叫Android / iOS 作業系統上的原生SDK API,也就是說,使用Xamarin.Forms 來開發您的跨平台行動專案,您無需要知道任何關於Java / Objective-C / Swift 的程式語言相關知識。

Xamarin.Forms 真的可以輕鬆開發出企業使用的跨平台行動應用程式?

Xamarin.Forms 特別適合於LOB 的各種企業行動應用軟體的開發,因為,只要是身為.NET / C# 的開發者,所有的開發技術與方法,都可以完全在Xamarin.Forms 上來使用,甚至藉由.NET Standard 的幫助,我們可以把您在.NET Framework 上設計的類別,直接在Xamarin.Forms 中來使用。
這裡有兩個使用Xamarin.Forms開發出來並應用於企業內部使用的應用程式,有興趣的人,可以安裝起來使用看看。我們也針對如何開發與設計出這兩種類型的跨平台行動應用程式,分別設計出一天的課程,有興趣的人,可以參考有 Xamarin.Forms 的實體教育訓練課程嗎?小節說明內容。
在這個應用程式中,將會使用已開發好的ASP.NET Web API,進行Xamarin.Forms 跨平台行動應用程式的開發。實作出一個工作日誌回報的表單App,可以新增、查詢、更新、刪除(CRUD) 工作記錄、申請請假的表單功能、主管「審核請假」頁面以進行部屬請假紀錄的核准,另外,也會說明如何取得顯示公司緊急連絡方式清單,並且直接進行撥打電話功能。
在這個應用程式中,將會透過Web API 取得公司指派的工作內容,使用者必須依照工作內容,進行打卡作業(可以使用QR Cdoe 或者GPS 座標)、接著會填寫該工作需要您回報的內容、最後,您需要使用手機裝置,進行拍照圖片並回傳到後端Web API 主機上,以便完成工作回報。
網路上有很多人都在詢問,是否有Xamarin.Forms 成功開發出來的App 應用程式,其實,透過上面所提供的兩個應用程式(派工與回報/ 企業表單App),您會發現到想要開發出企業內部可以使用於Android / iOS / UWP 作業系統平台的行動應用程式,真的是非常簡單與容易:您僅需要具備C# 程式語言之開發專案的經驗,接著,學習XAML 宣告標記語言(就像您要開發Web 應用程式專案,您需要學習HTML一樣),您就可以透過Xamarin.Forms 開發工具,使用同一套視覺設計UI、同一個商業邏輯運作程式,就可以快速產生出三個行動裝置作業系統Android / iOS / UWP 的App。

我要如何學習Xamarin.Forms 專案開發?

最有效率的方式,那就是直接到Xamarin官方網站來觀看相關技術介紹學習文件,這裡擁有相當大量的資訊來協助有興趣從事Xamarin.Foms的開發工作上需要知道與了解的知識;而且這裡有兩本內容相剛豐富與專案的免費電子書,提供給大家免費下載來觀看。
Xamarin實驗室部落格上,也提供了超過350篇以上各種開發Xamarin.Forms專案上遇到的各種問題以及解決方案和教學內容,讓您可以快速在這裡找到您要的解答,進而跟著文章來練習。
關於Xamarin與Xamarin.Forms的優點、缺點、和如何選擇的判定,各位也可以從Xamarin官方網站找到解答。

有Xamarin.Forms 的實體教育訓練課程嗎?

若您對於Xamarin.Forms開發的實體教育訓練課程有興趣的話,可以隨時關注酷奇資訊有限公司上的開課資訊,若您有相關需求,可以與酷奇資訊有限公司來聯繫。
這裡列出之前已經開過的Xamarin.Forms 教育訓練課程,每個課程大綱與可以學到的知識,請參考底下說明網頁。

我要如何開始進行Xamarin.Forms 專案開發?

由於 Visual Studio 2017 的安裝過程有持續更新,因此,若想要知道最新的 Visual Studio 2017 for Xamarin 的安裝過程,可以參考 2018 Q2 最新文章 Visual Studio 2017 for Xamarin 開發環境之安裝與設定說明 (2018 Q2 版本)

想要開始進行Xamarin.Forms專案開發,首要工作當然是要把開發軟體安裝到您的電腦上,然而,大多數想要使用Xamarin.Forms來開發的人,在第一個階段,就會遇到無法成功的建立一個Hello World的Xamarin.Forms專案,與在不同的行動裝置平台上順利進行執行這個專案,此時,您可以先參考這篇文章第一次安裝Visual Studio 2017到新的作業系統上,準備好您的開發環境;至於相關Visual Studio 2017的安裝與設定上的疑問與問題排除技巧,可以參考這篇文章Visual Studio 2017 / Xamarin企業級行動化開發平台環境建置問題排除指引
您要如何確認您的電腦開發環境,已經可以成功進行Xamarin專案開發、建置、除錯與執行,您可以參考這篇文章驗證您的Xamarin環境
在進行Xamarin.Forms 跨平台專案的開發過程中,您可以使用原生SDK 所提供的模擬器(Emulator / Simulator) 來進行應用程式的執行與測試,當然,您最好也要準備好實體裝置,例如,Android 手機、iPhone 手機,實際在真實的裝置上也跑一次您開發出來的應用程式,確認您的應用程式可以正常無誤的運行。
另外,您若想要將您開發出來的應用程式上架到Googl Play (Android 類型的App) / Apple Store (iOS 類型的App) / Microsoft 市集(UWP 類型App),此時,您需要額外去申請各個行動作業平台的開發者帳號。

我這裡也整理出許多Xamarin開發上的疑問、問題等技術開發上的問答集FAQ,有興趣的人,可以參考看看。

我可以使用Code-Behind 模式來開發Xamarin.Forms嗎?

對於之前從事於Windows Forms 與Web Forms 的開發人員,最常使用的開發模式就是Code-Behind,所以,當要進入到Xamarin.Forms 的開發環境中,也就想要使用Code-Behind 的方式來進行開發,這是絕對沒有問題的,而且全球許多Xamarin.Forms 開發者,也都有使用這樣的開發模式來進行Xamarin.Forms 的專案開發。

我一定要使用MVVM 設計模式來開發Xamarin.Forms 嗎?

Xamarin.Forms 本身就已經內建了MVVM 設計模式能力,然而,青菜蘿蔔各有所好,您不一定要使用MVVM 設計模式來進行專案開發,不過,若您採用了MVVM 設計模式,您可以享受到頁面UI與商業邏輯之關注點分離的好處,讓您可以分別專注於頁面UI的設計與相關商業邏輯的開發,彼此之間不會受到互相干擾。
請不要被心魔所束縛,在MVVM 設計模式下,並沒有說不能夠使用Code-Behind 方式來混合開發,因此,不論是黑貓、白貓,會抓老鼠的就是好貓。

什麼是Prism?

Prism是一個開發框架( Framework ),可以讓我們可以建立鬆耦合、方便維護程式碼、可以開發出可測試的XAML為基礎的應用程式,它廣泛被使用於WPF / Windows 10 UWP / Xamarin.Forms。
在Prism for Xamarin.Forms 內,支援了六大可以加速開發與提升軟體開發品質的特色:檢視模型(​​ViewModel)自動定位、功能強大且實用的頁面導航服務、跨平台頁面對話窗服務、讓程式可以充分發揮原生SDK特性的相依性注入服務、自動將XAML 事件與XAML 命令進行繫結的事件/命令行為、提供非同步事件需求的事件聚合器。
通常我們使用Prism開發框架來進行Xamarin.Forms專案開發的時候,我們都會在Visual Studio 2017中,安裝Prism Template Pack這個Visual Studio擴充功能,透過Prism Template Pack所提供的專案與新增項目的樣板,我們便可以快速的開發出Xamarin.Forms跨平台行動應用程式(Cross-Platform Mobile Application)。

我一定要使用Prism 嗎?

不需要,還是那句話,青菜蘿蔔各有所好,選擇適合您情境的開發環境、工具、方法,無須拘泥任何束縛,就可以開始進行Xamarin.Forms 的專案開發。

我可以使用那個Visual Studio 2017 版本來開發專案

Visual Studio 2017 for Windows 下的任何版本,都可以進行Xamarin.Forms 的跨平台專案開發。
想要取得Visual Studio 2017開發工具(不論是Visual Studio Community 2017或者是Visual Studio Professional 2017甚至是Visual Studio Enterprise 2017 ,都可以進行Xamarin.Forms的專案開發、建置、測試與佈署),您可以從這個網頁下載Visual Studio 2017 IDE開發工具來取得。
  • Visual Studio Community 2017
    免費、功能完整的IDE,適用於學生、開放原始碼及個人開發人員
  • Visual Studio Professional 2017
    適用於小型團隊的專業開發人員工具、服務及訂閱權益
  • Visual Studio Enterprise 2017
    滿足各規模團隊對嚴格品質與規模需求的端對端解決方案

我一定要使用Windows 10 作業系統嗎?

強烈建議您採用Windows 10 作業系統來進行Xamarin.Forms 跨平台行動專案開發。

要進行iOS App 除錯與測試,為什麼需要一台Mac電腦?

這是因為要建置與產生出iOS 的應用程式,需要用到Xcode,而Xcode 僅能夠安裝在macOS 作業系統上,而macOS 因為使用合約,僅能夠在Mac 電腦上來運行;所以,若想要使用Xamarin.Forms 開發與設計出iOS 的應用程式,您需要額外的Mac 電腦。

為什麼我要安裝與使用Hyper-V 呢?

會有這樣的需求,那是因為若您選擇了Visual Studio for Android 模擬器做為開發與除錯的一個設備,而Visual Studio for Android 模擬器使用的虛擬化技術就是採用Hyper-V,所以,您的開發環境與硬體,就必須要支援Hyper-V。
若您不要用到Visual Studio for Android 模擬器,也不需要開發UWP 行動應用專案,那你就可以不用啟用、安裝、設定Hyper-V 服務了。

有沒有甚麼值得加入的Xamarin 相關的社群社團呢?

您可以加入
  • Xamarin實驗室臉書粉絲團,這裡會有不定期關於相關Xamarin產品相關的資訊。
  • Xamarin.Forms @ Taiwan臉書社團,您可以這裡與眾多Xamarin高手來進行技術討論。
I ♥ Xamarin
I ♥ Xamarin

了解更多關於 [Xamarin.Android] 的使用方式
了解更多關於 [Xamarin.iOS] 的使用方式
了解更多關於 [Xamarin.Forms] 的使用方式
了解更多關於 [Hello, Android:快速入門] 的使用方式
了解更多關於 [Hello, iOS – 快速入門] 的使用方式
了解更多關於 [Xamarin.Forms 快速入門] 的使用方式

2018/02/01

UWP 專案無法設定中斷點問題與修正說明

當在進行Xamarin.Forms 專案開發的時候,突然發現到,當我針對UWP 專案的原始碼,設定中斷點,並且執行該UWP 專案,卻發現到該中斷點無法生效,如同下圖畫面,出現了這個錯誤訊息:目前無法叫用中斷點,未載入這個文件的服務
UWP Break point
可是,在以往的時候,UWP 專案是可以設定中斷點,並且可以生效的呀。最後,發現到原因是:我現在已經針對共用類別庫,從之前的PCL 改成.NET Standard 了,所以,我們需要打開.NET Standard 專案的屬性。
請在建置標籤頁次,找到進階按鈕
UWP Break point
進階建置設定對話窗中,找到偵錯資訊,從可攜式改成完整,這樣,就可以在UWP專案內使用除錯中斷點了。
UWP Break point

2018/01/13

Prism for Xamarin.Forms 7.0 的相依性服務注入修正與使用說明

01/12 Prism for Xamarin.Forms 推出了7.0 正式版本,並且Prism Template Pack 也同步升級到2.0.8 版本。在此次的更新過程中,增加了許多相當好用的功能,不過,也同步中止了之前6.3 版本的好用功能。
在這裡有個相當重大的變更,那就是在以往我們若需要相依性注入服務,將原生專案內的實作介面類別,想要透過Prism的建構式註入到檢視模型ViewModel內,我們僅需要在實作介面類別中,使用Xamarin.Forms.Dependency屬性進行宣告,就可以直接使用,不過,在Prism for Xamarin.Forms 7.0這項福利已經無法使用了。
若我們想要繼續使用這樣的功能,那該如何處理呢?Prism現在將不同的相依性注入服務進行抽象化處理,包裝到Prism.IoC命名空間類,因此,當我們想要進行解析或者註入一個新的物件,可以使用IContainerProvider介面,而當我們要進行註冊一個要注入的介面與型別的時候,可以使用IContainerRegistry介面。
在這以,我們在Xamarin.Forms 的.NET Standard 類別庫內,建立了一個介面
public interface IOSInfo
{
    string Info();
}
接著,就如以往,我們在原生Android 專案內,來實作出這個介面,並且使用了Xamarin.Forms.Dependency 這個屬性來宣告這個類別是可以用於Xamarin.Forms 的相依性注入服務中。
[assembly: Xamarin.Forms.Dependency(typeof(BlankApp2.Droid.OSInfo))]
namespace BlankApp2.Droid
{
    public class OSInfo : IOSInfo
    {
        public string Info()
        {
            return "Android";
        }
    }
}
現在,我們在檢視頁面ViewModel 內的建構函式,想要自動注入IOSInfor 這個介面的實作物件,如下列程式碼。
private IOSInfo _osInfo;
public MainPageViewModel(INavigationService navigationService,
    IOSInfo osInfo)
{
    _navigationService = navigationService;
    _osInfo = osInfo;

    Title = _osInfo.Info();

}
很不幸的,您將會得到底下的例外異常錯誤訊息:
Unhandled Exception:

Unity.Exceptions.ResolutionFailedException: Resolution of the dependency failed, type = 'BlankApp2.ViewModels.MainPageViewModel', name = '(none)'.
Exception occurred while: while resolving.
Exception is: InvalidOperationException - The current type, BlankApp2.IOSInfo, is an interface and cannot be constructed. Are you missing a type mapping?
-----------------------------------------------
At the time of the exception, the container was: 
  Resolving BlankApp2.ViewModels.MainPageViewModel,(none)
  Resolving parameter 'osInfo' of constructor BlankApp2.ViewModels.MainPageViewModel(Prism.Navigation.INavigationService navigationService, BlankApp2.IOSInfo osInfo)
    Resolving BlankApp2.IOSInfo,(none)
因此,想要能夠在Xamarin.Forms專案內,注入原生專案的實作類別物件,您需要自行透過IPlatformInitializer介面來實作出public void RegisterTypes(IContainerRegistry container)方法,在這個方法中有個參數,IContainerRegistry container,我們可以透過這個container來進行註冊行為,如同底下程式碼
public class AndroidInitializer : IPlatformInitializer
{
    public void RegisterTypes(IContainerRegistry container)
    {
        // Register any platform specific implementations
        container.Register<IOSInfo, OSInfo>();
    }
}
當然,每個原生專案內,您都要自己進行註冊動作,如此,您就可以在Xamarin.Forms 專案內,使用建構函式來注入這些原生專案內的實作類別物件。
若您想要在Xamarin.Forms專案內,自行註冊介面與實作類別,可以在App.xaml.cs檔案內,找到RegisterTypes這個方法,在這個方法內,使用containerRegistry參數就可以進行註冊的動作。
protected override void RegisterTypes(IContainerRegistry containerRegistry)
{
    containerRegistry.RegisterForNavigation<NavigationPage>();
    containerRegistry.RegisterForNavigation<MainPage>();
    containerRegistry.Register<IDITest, DITest>();
}
若想要直接操作Unity 這個相依性服務注入容器,透過containerRegistry 這個參數的GetContainer 方法,就可以得到IUnityContainer 的物件;在底下的程式碼中,我們將會顯示出所有已經註冊,且可以注入的介面與實作物件清單。
var foo = containerRegistry.GetContainer();
foreach (var item in foo.Registrations)
{
    System.Console.WriteLine($"{item.RegisteredType.Name} -> {item.MappedToType.Name}");
}
01-13 19:05:08.541 I/mono-stdout( 5976): IUnityContainer -> IUnityContainer
01-13 19:05:08.542 I/mono-stdout( 5976): IContainerExtension -> IContainerExtension
01-13 19:05:08.542 I/mono-stdout( 5976): ILoggerFacade -> EmptyLogger
01-13 19:05:08.542 I/mono-stdout( 5976): IApplicationProvider -> ApplicationProvider
01-13 19:05:08.542 I/mono-stdout( 5976): IApplicationStore -> ApplicationStore
01-13 19:05:08.542 I/mono-stdout( 5976): IEventAggregator -> EventAggregator
01-13 19:05:08.542 I/mono-stdout( 5976): IDependencyService -> DependencyService
01-13 19:05:08.542 I/mono-stdout( 5976): IPageDialogService -> PageDialogService
01-13 19:05:08.542 I/mono-stdout( 5976): IDeviceService -> DeviceService
01-13 19:05:08.542 I/mono-stdout( 5976): IPageBehaviorFactory -> PageBehaviorFactory
01-13 19:05:08.542 I/mono-stdout( 5976): IModuleCatalog -> ModuleCatalog
01-13 19:05:08.542 I/mono-stdout( 5976): IModuleManager -> ModuleManager
01-13 19:05:08.542 I/mono-stdout( 5976): IModuleInitializer -> ModuleInitializer
01-13 19:05:08.543 I/mono-stdout( 5976): INavigationService -> PageNavigationService
01-13 19:05:08.543 I/mono-stdout( 5976): IOSInfo -> OSInfo
01-13 19:05:08.543 I/mono-stdout( 5976): Object -> NavigationPage
01-13 19:05:08.543 I/mono-stdout( 5976): Object -> MainPage
01-13 19:05:08.543 I/mono-stdout( 5976): IDITest -> DITest
最後,若想要在檢視模型類別或者任何地方,使用容器來取得實作物件,可以使用底下的程式碼來手動注入。
IContainerProvider fooContainer = (App.Current as Prism.Unity.PrismApplication).Container;
var fooOSInfo = fooContainer.Resolve<IDITest>();