XAML in Xamarin.Forms 基礎篇 電子書

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

Xamarin.Forms 快速入門 電子書

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

2019/04/09

Visual Studio 2019 for Xamarin 之安裝與設定 Part2 - Visual Studio 2019 安裝與相關相關設定 1

Visual Studio 2019 for Xamarin 之安裝與設定 Part2 - Visual Studio 2019 安裝與相關相關設定 1

Visual Studio 2019 for Xamarin 之安裝與設定 Part2 - Visual Studio 2019 安裝與相關相關設定 1
Visual Studio 2019 for Xamarin 之安裝與設定 Part5 - 測試與確認開發環境可以進行 Xamarin.Forms 專案開發與結論

對於已經具備擁有 .NET / C# 開發技能的開發者,可以使用 Xamarin.Forms Toolkit 開發工具,便可以立即開發出可以在 Android / iOS 平台上執行的 App;對於要學習如何使用 Xamarin.Forms & XAML 技能,現在已經推出兩本電子書來幫助大家學這這個開發技術。
這兩本電子書內包含了豐富的逐步開發教學內容與相關觀念、各種練習範例,歡迎各位購買。
Xamarin.Forms 電子書
想要購買 Xamarin.Forms 快速上手 電子書,請點選 這裡
想要購買 XAML in Xamarin.Forms 基礎篇 電子書,請點選 這裡

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


現在,需要在 Windows 主機與 Mac 主機上來進行開發工具的安裝與設定。
這裡需要的工作有
  • Windows 作業系統電腦上安裝 Visual Studio 2019
  • Visual Studio 2019 安裝後的相關設定
  • Mac 作業系統電腦開發工具之安裝與設定
  • 安裝 Prism Template Pack
  • 下載與安裝 Xamarin.Forms 專用的程式碼片段

在 Windows 作業系統電腦上安裝 Visual Studio 2019

若您已經完成 Visual Studio 2019 安裝前的準備工作,現在需要開始進行 Visual Studio 2019 的安裝作業。
在這裡將會使用 Visual Studio 2019 Community 版本作為安裝說明,不過,任何一種 Visual Studio 2019 的版本,皆可以進行 Xamarin Cross-Platform 跨平台專案的開發,關於 Visual Studio 2019 的不同版本的比較,可以參考 比較 Visual Studio 2019 IDE
更多關於 Visual Studio 2019 的安裝,可以參考 安裝 Visual Studio 2019
  • Visual Studio 2019 安裝下載網頁
  • 找到 Visual Studio 2019 下方的 社群 項目,點選其下方的 免費下載 按鈕,點選這個按鈕連結,當安裝檔案下載完成後,請點選執行按鈕,開始進行 Visual Studio 2019 社群版本的安裝;當安裝程式下載完成之後,請點選螢幕下方的 執行 按鈕,開始進行 Visual Studo 2019 社群版的安裝(如同下面節圖所示)。
    Visual Studio 2019 安裝程式下載完成
  • 此時,螢幕會出現 使用者帳戶控制 對話窗,此對話窗詢問:您是否要允許此 App 變更您的裝置?這個時候,請點選 是 按鈕。
    使用者帳戶控制對話窗
  • 現在,看到的對話窗是 Visual Studio Installer,請在該對話窗右下方,點擊 繼續 按鈕。如此,Visual Studio Install 安裝程式,便會開始下載最新的安裝程式檔案到您的電腦。
    Visual Studio Installer 開始安裝前的確認對話窗
  • 將會看到 Visual Studio Community 2019 - 16.0.0 安裝程式啟動了。
    16.0.0 是作者寫這篇文章的時候,最新 Visual Studio Community 的版本編號,原則上,您每次進行 Visual Studio 2019 安裝作業的時候,您將會使用最新的 Visual Studio 2019 Installer 來安裝到最新的版本,因此,您將需要比 16.0.0 更新的版本編號出現在您的電腦畫面中。
    正在安裝 Visual Studio Community 2019 - 16.0.0 視窗
  • 請在 工作負載 標籤頁次中,至少需要勾選底下項目,才能夠完成 Xamarin開發工具的安裝
    • 通用 Windows 開發平台
    • 使用 .NET 進行行動開發
    當您勾選這兩個 工作負載 項目之後,在 Visual Studio Community 2019 Installer 視窗的最右方,將會出現準備要安裝的相關元件清單說明
    勾選要安裝 通用 Windows 開發平台 工作負載
    勾選要安裝 使用 .NET 進行行動開發 工作負載
  • 請點選 個別元件 標籤頁次,您將會看到底下的個別元件已經被勾選了
    Visual Studio 2019 Installer 個別元件
    安裝不同的 Visual Studio 2019 版本,可能會看到不通的套件選項項目內容
    • .NET
      • .NET Framework 4.5 目標套件
      • .NET Framework 4.6.1 目標套件
      • .NET Framework 4.6.1 SDK
      • .NET Framework 4.7.2 SDK
      • .NET Framework 4.7.2 目標套件
      • .NET Native
      • .NET 可攜式程式庫目標套件
    • Code 工具
      • (無)
    • SDK、程式庫和架構
      • Android SDK 安裝程式 (API 層級 27)
      • OpenJDK (Microsoft 散發)
      • TypeScript 3.3 SDK
      • Windows 10 SDK (10.0.17763.0)
    • 偵錯和測試
      • .NET 分析工具
      • JavaScript 診斷
    • 模擬器
      • (無)
    • 程式碼工具
      • Developer Analytics Tools
      • NuGet 套件管理員
    • 編譯器、建置工具與執行階段
      • (無)
    • 編譯器、建置工具和執行階段
      • C# 與 Visual Basic Roslyn 編譯程式
      • MSBuild
    • 遊戲開發套件
      • 影像與 3D 模型編輯器
    • 開發活動
      • C# 與 Visual Basic
      • F# 語言支援
      • JavaScript 與 TypeScript 語言支援
      • Xamarin
      • Xamarin Remoted Simulator
    • 雲端、資料庫和伺服器
      • SQL Server 的 CLR 資料類型
  • 為了要讓 Xamarin 開發環境可以正常運作與符合日常開發需求,所以,請依照底下清單,比對您電腦上的 個別元件 勾選項目,確認底下的項目都已經有勾選到 (額外需要安裝的項目將會以粗體文字標示)。
    • .NET
      • .NET Framework 4.5 目標套件
      • .NET Framework 4.6.1 目標套件
      • .NET Framework 4.6.1 SDK
      • .NET Framework 4.7.2 SDK
      • .NET Framework 4.7.2 目標套件
      • .NET Native
      • .NET 可攜式程式庫目標套件
    • Code 工具
      • Visual Studio 的 GitHub 擴充功能
    • SDK、程式庫和架構
      • Android SDK 安裝程式 (API 層級 25)(可用於以 C++ 進行行動裝置開發的本機安裝)
      • Android SDK 安裝程式 (API 層級 27)
      • OpenJDK (Microsoft 散發)
      • TypeScript 3.3 SDK
      • USB 裝置連線
      • Windows 10 SDK (10.0.17763.0)
    • 偵錯和測試
      • .NET 分析工具
      • JavaScript 診斷
    • 模擬器
      • Google Android Emulator (API 層級 25) (本機安裝)
      • Intel Hardware Accelerated Execute Manager (HAXM) (本機安裝)
    • 程式碼工具
      • Developer Analytics Tools
      • Git for Windows
      • NuGet 套件管理員
      • PreEmptive Protection - DotFuscator
    • 編譯器、建置工具與執行階段
      • (無)
    • 編譯器、建置工具和執行階段
      • C# 與 Visual Basic Roslyn 編譯程式
      • MSBuild
    • 遊戲開發套件
      • 影像與 3D 模型編輯器
    • 開發活動
      • C# 與 Visual Basic
      • F# 語言支援
      • JavaScript 與 TypeScript 語言支援
      • Xamarin
      • Xamarin Remoted Simulator
    • 雲端、資料庫和伺服器
      • SQL Server 的 CLR 資料類型
    Visual Studio 2019 Installer 安裝詳細資料
  • 若確認無誤,請點選 Visual Studio Community 2019 Installer 程式畫面右下角的 安裝 按鈕,開始進行 Visual Studio Community 2019 的程式安裝。
    根據 Visual Studio Installer 的預估,這樣的安裝過程,大約需要用到 34.68 GB 的磁碟空間。
    Visual Studio 2019 Installer
  • 當安裝作業完成之後,將會看到如下圖的畫面,您可以選擇登入功能,或者點選 不是現在,以後再說,在這裡點選後者,也就是點選 不是現在,以後再說
    Visual Studio 2019 登入畫面
  • 現在需要設定開發設定條件,請在 開發設定 下拉選單中,選擇 Visual C#,完成後,點選 啟動 Visual Studio 按鈕。
    Visual Studio 2019 開發設定與主題佈景
  • 底下螢幕截圖是 Visual Studio 2019 啟動後的畫面
    Visual Studio 2019 第一次啟動畫面

Visual Studio 2019 安裝後的相關設定

當啟動完成 Visual Studio 2019 之後,需要開始進行 Android SDK 的設定與更新作業,確認相關機碼是否有正確產生出來。
在這個階段將會進行底下的相關設定
  • 更新 Android SDK
  • 安裝 Visual Studio 的 Android 模擬器
  • 檢查 Android SDK 機碼是否存在

更新 Android SDK

養成時常確保您的 Android SDK 有更新到最新版本的好習慣,需要進行 Android SDK 的設定與更新,確保 Xamarin.Android 專案可以正常順利的建置與執行 Android App。更多關於 Android SDK 的說明,可以參考 設定 Xamarin.Android 的 Android SDK
  • 開啟 Visual Studio 2019 程式
  • 點選啟動後的視窗右下方的 不使用程式碼繼續 連結
  • 請在 Visual Studio 程式中,點選功能表 工具 > Android > Android SDK 管理員
    啟動 Android SDK 管理員
  • 若有出現下方的 使用者帳戶控制 對話窗,請點選 是 按鈕
    Visual Studio Emulator for Android
  • 當 Android SDK 及工具視窗出現之後,請先點選 工具 標籤頁次,此時,您會發現到 Android SDK Platform-Tools 的版本是 25.0.5,並且在該項目的狀態欄位,該視窗的左下方,顯示的是 有更新可用。
  • 先點選左下角的 2 項可用的更新按鈕,當出現了 檢閱更新 對話窗的時候,只要選取 Android SDK Platform-Tools 這個項目 要進行更新,接著,點選 安裝更新 按鈕。
    檢閱更新對話窗
  • 若成功安裝完成後,現在,只剩下 1 個可用更新了,接著點選左下角的 1 項可用的更新按鈕,當出現了 檢閱更新 對話窗的時候,選取 Android SDK Platform 27 這個項目 要進行更新,接著,點選 安裝更新 按鈕。
    檢閱更新對話窗
  • 接下來,還是在 工具 標籤頁次,展開 Android SDK Build Tools 節點,取消勾選 Android SDK Build-Tools 25.0.3,並且勾選 Android SDK Build-Tools 27.0.3
    展開 額外 節點,勾選 Android Support Repository 與 Google USB Driver 兩個選項, 最後,點選右下方 套用變更 按鈕
    勾選 Android SDK Build-Tools 27.0.3
    勾選 Android Support Repository
    • 出現 接受授權對話窗後,直接點選 接受 按鈕
      接受授權 對話窗
      Android SDK 及工具
  • 現在要來設定 平台 標籤頁次,請點選標籤頁次
    在 平台 標籤頁次中,會有每個 Android SDK API 的版本項目,請依序展開您有興趣的 Android SDK API 版本,只需要勾選這個項目內的 Android SDK Platform X ( X 為該 SDK API 版本編號),其他的項目可以不用安裝。
    在這個安裝過程中,將只會選擇 Android SDK Platform 28 (9.0) / 8.1 / 7.1 / 6.0 裡面的 Android SDK Platform X 項目。
    設定完成後,請點選右下角的 套用變更 按鈕
    Android SDK 及工具 的 平台
  • 當 接受授權 對話窗出現之後,請點選右下角的 接受 按鈕
    接受授權 對話窗
  • 安裝完成之後,就可以把 Android SDK 及工具 視窗關閉

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



2019/04/08

Visual Studio 2019 for Xamarin 之安裝與設定 Part1 - 安裝前的準備工作


Visual Studio 2019 for Xamarin 之安裝與設定 Part1 - 安裝前的準備工作

Visual Studio 2019 for Xamarin 之安裝與設定 Part1 - 安裝前的準備工作
Visual Studio 2019 for Xamarin 之安裝與設定 Part2 - Visual Studio 2019 安裝與相關相關設定 1
Visual Studio 2019 for Xamarin 之安裝與設定 Part3 - Visual Studio 2019 安裝與相關相關設定 2
Visual Studio 2019 for Xamarin 之安裝與設定 Part4 - 安裝 Android 使用的模擬器
Visual Studio 2019 for Xamarin 之安裝與設定 Part5 - 測試與確認開發環境可以進行 Xamarin.Forms 專案開發與結論

對於已經具備擁有 .NET / C# 開發技能的開發者,可以使用 Xamarin.Forms Toolkit 開發工具,便可以立即開發出可以在 Android / iOS 平台上執行的 App;對於要學習如何使用 Xamarin.Forms & XAML 技能,現在已經推出兩本電子書來幫助大家學這這個開發技術。
這兩本電子書內包含了豐富的逐步開發教學內容與相關觀念、各種練習範例,歡迎各位購買。
Xamarin.Forms 電子書
想要購買 Xamarin.Forms 快速上手 電子書,請點選 這裡

想要購買 XAML in Xamarin.Forms 基礎篇 電子書,請點選 這裡


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

了解更多關於 [Xamarin.Forms 快速入門] 的使用方式



對於要使用 Xamarin.Forms 跨平台開發工具來進行行動裝置應用程式開發,首先要先進行 Xamarin 開發環境的安裝與設定,在這裡將會分成 4 部分來說明,而這裡將會使用 Visual Studio 2019 社群版本作為安裝過程的說明。在此將會假設開發者主要在 Windows 作業系統下使用 Visual Studio 2019 for Windows 來進行開發、設計、建置、除錯 Xamarin.Forms 的專案,而 Mac 電腦上的 Visaul Studio 2019 for Mac 其存在的目的只是要能夠產生出 Xamarin.iOS 的專案檔案而已,通常,是不會使用 Visual Studio for Mac 來進行 Xamarin.Forms 開發作業。
  • 安裝前的準備工作
    這裡將會說明當準備要進行安裝 Visual Studio 2019 for Xamarin.Forms 開發環境之前,需要確認與準備工作有那些,這裡的內容相當重要,因為,若電腦環境一旦規格不符合需求,整個安裝與設定過程,將會產生問題,也會造成某些功能無法使用。
  • Visual Studio 2019 安裝與相關相關設定
    在這裡,將會帶領大家,一步一步地在 Windows 作業系統下進行 Visual Studio 2019 開發工具的安裝,並且在 Visual Studio 2019 安裝完成之後,接下來該如何進行 Xamarin 開發環境的設定。另外,也會說明在 Mac 電腦上要如何安裝 Xcode 與 Visual Studio 2019 for Mac 這兩個開發工具。
  • 安裝 Android 使用的模擬器
    透過這裡的說明,可以進行安裝設定 Google Android 原生模擬器,方便進行 Android 應用程式的開發與測試,當然,要使用哪種類型的模擬器,可以依照開發者的喜好來決定。
  • 確認開發環境可以進行 Xamarin.Forms 專案開發
    最後,這也是最為重要的,在安裝與設定工作都完成之後,需要開始進行檢查與確認電腦環境是否可以真的進行 Xamarin 跨平台應用程式的開發,因此,一定要依據這裡說明內容,逐一進行檢測,確認開發環境都正確無誤並且可以運作正常。

安裝前的準備工作

在進行 Visual Studio 2019 開發工具安裝之前,請務必要進行底下說明的各個檢查與準備工作,否則,在進行安裝 Visual Studio 2019 與 Xamarin 開發工具的時候,可能會發生莫名的異常問題。
這裡需要的工作有
  • 確認作業系統版本
  • 確認硬體 BIOS 有啟用虛擬化功能
  • 同時啟用 Hyper-V 和 Windows Hypervisor 平台
  • 啟用 UWP 開發人員模式
  • 準備一台 macOS 的電腦主機

確認作業系統版本

以下說明內容將會使用的 Windows 10 專業版本作業系統,原則上,建議您使用當前最新的 Windows 10 作業系統的最新版本來安裝,若電腦不是這個版本,請使用 Windows Update 進行更新到組建版本。
欲檢查您的 Windows 10 作業系統版本,請點選左下角的視窗圖示,接著點選左下方的 設定 齒輪圖示,或者點選右下方通知圖示,選取齒輪圖示的設定按鈕
使用開始圖示來開啟 Windows 設定視窗
使用通知設定視窗來開啟 Windows 設定視窗
當進入到 設定 視窗之後,點選上方的 系統 圖示
在 Windows 設定窗內開啟系統功能視窗
緊接著在左邊的最下方選項,點選 關於 項目,就會看到視窗右邊出現的內容,請在視窗右邊區域,使用滑鼠往下捲動,就會查看到 Windows 規格 區域,確認您使用作業系統版本至少為 Windows 10 專業版與 組件 1809
Windows Setting 設定

確認硬體 BIOS 有啟用虛擬化功能

因為絕大多數的 Android 模擬器都會使用虛擬化技術,因此,,Windows 電腦 CPU 需要具備支援虛擬化的功能,若想要啟用電腦支援虛擬化功能,請確認 CPU 有支援此一功能,並且從 BIOS 啟用此功能。這個影片 how to enable hyper-v machine in BIOS 將會展示如何設定 BIOS 可以使用虛擬化的功能。若電腦 BIOS 上沒有啟動此功能 Intel Virtual Technology 或者電腦的 BIOS 根本就沒有這項設定,建議使用實體手機來進行 Android 專案的開發與設計。
原則上不同的虛擬化產品是無法混合一起使用的,例如 Hyper-V 無法與其他的虛擬化產品 Intel HAXM或 VMware 等等,共同使用,您只能夠選擇其一來使用。
在這篇文章中將不會採用 Hyper-V 虛擬化技術,而會採用 Intel HAXM 虛擬化技術,對於 Android 模擬器部分,將會使用 [Android Emulator] 這個模擬器軟體。

停用 Hyper-V

若想要使用 Intel HAXM 虛擬化技術,進而直接使用 Android 原生地 x86 模擬器,需要先將這台電腦上的 Hyper-V 和 Windows Hypervisor 平台 這兩項功能移除與停用;在這台電腦中,已經有安裝這兩個服務,所以需要先進行移除,若電腦中並沒有安裝這兩個服務,可以直接進行下一個步驟。
  • 首先,依據上面的操作步驟,開啟 Windows 設定視窗 (請點選左下角的視窗圖示,接著點選左下方的 設定 齒輪圖示,或者點選右下方通知圖示,接著選取齒輪圖示的設定按鈕)
Windows 設定視窗
  • 點選 應用程式 項目,將會出現下圖 應用程式與功能視窗 畫面
應用程式與功能視窗
  • 在 應用程式 畫面右方,點選 相關設定的 程式和功能 項目
程式和功能視窗
  • 當 程式和功能 視窗開啟之後,點選該視窗左方的 開啟或關閉 Windows 功能
Windows 功能之設定視窗
  • 現在,將會看到 [Windows 功能] 視窗出現在電腦上,請在下方的清單項目,找到 Hyper-V 與 Windows Hypervisor Platform 這兩個選項,請記得要取消勾選這兩個項目與其子項目,完成後請點選 確定 按鈕。
取消選擇安裝 Hyper-V 的所有功能
取消選擇安裝與啟用 Windows Hypervisor Platform
  • 現在,Windows 將會開始安裝這兩個功能,請點選 確定 按鈕。
Windows 正在進行套用變更
  • 當這兩個 Windows 功能移除這兩個服務之後,需要重新啟動作業系統,請點選 立即重新啟動 按鈕。
Windows 已完成要求的變更

啟用 UWP 開發人員模式

若想要使用 Xamarin.Forms 建立出可以同時在 Android / iOS / UWP 系統下執行的跨平台 App,就需要參考底下的步驟,先進行 UWP 開發人員模式的啟用
  • 首先,還是一樣需要進入到 Windows 設定 (請點選左下角的視窗圖示,接著點選左下方的 設定 齒輪圖示,或者點選右下方通知圖示,接著選取齒輪圖示的設定按鈕)
Windows Setting 設定
  • 請點選 更新與安全性 選項,並且點選 更新與安全性 視窗左方的 開發人員專用 選項
開發人員專用設定視窗
  • 請點選右方內容的 開發人員模式 選項,現在顯示出 使用開發人員功能 對話窗,並且說明:開啟開發人員模式 (包括安裝及執行不是來自於 Microsoft Store 的應用程式) 可能造成您裝置與個人資料的安全性風險或危害您的裝置。 開啟開發人員模式?請點選 是 按鈕。
開啟開發人員模式
  • 若 開發人員模式 已經開啟之後,可以看到如同下圖畫面,在開發人員模式選下的下方,會顯示出:已安裝「開發人員模式」套件,現已啟用適用於桌面的遠端工具 訊息。
已安裝「開發人員模式」套件

準備一台 macOS 的電腦主機

由於 Apple 公司的規定,當要進行 iOS 應用程式開發的時候,必須要透過一台有安裝 macOS 的蘋果硬體電腦來進行,因此,對於想要產生與進行 iOS 應用程式除錯的開發者,就需要準備一台 macOS 電腦主機。
對於這台 macOS 電腦建議要將作業系統升級到最新版本,以便符合 Xcode 開發工具的安裝要求,除了會安裝 Xcode 到這台電腦上,也會進行安裝 Visual Studio 2019 for Mac 工具。


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



Xamarin.Forms 的檢視 View 與版面配置 Layout 的手勢 Gesture 操作

Xamarin.Forms 的檢視 View 與版面配置 Layout 的手勢 Gesture 操作

就在上週, Visual Studio 2019 正式發表了,隨之而來的驚奇工作那就是要來體驗 Visual Studio 2019 這套新的開發工具所帶來的絕佳操作感覺,也就是說,在 2019年四月之後,我這裡所寫關於 Xamarin.Forms 的範例程式碼,將會全部改成使用 Xamarin.Forms 來設計。在這篇文章中,將會來測試 Xamarin.Forms 的手勢操作的設計上的問題,那就是可以在使用者控制項與版面配置上來使用 GestureRecognizers 屬性來指定其需要執行相對應手勢操作需要進行的綁定命令。可是,當在一個 Layout 上有指定 GestureRecognizers ,並且放置一個使用者控制項到這個版面配置上,此時,該使用者控制項若有指定 GestureRecognizers ,那麼,是版面配置的 GestureRecognizers 會被觸發,還是使用者控制項的 GestureRecognizers 會被觸發呢?
因此,在我心中存在者許多疑問,便想要寫可個範例程式碼來逐一檢測底下的問題?
  1. 當在一個 Layout 上有指定 GestureRecognizers ,並且放置一個使用者控制項到這個版面配置上(該使用者控制項並未完全佔用滿整個版面配置空間),此時,該使用者控制項若有指定 GestureRecognizers ,那麼,當使用者點選該使用者控制項的時候,是哪個 GestureRecognizers 會被觸發呢?
  2. 當在一個 Layout 上有指定 GestureRecognizers ,並且放置一個使用者控制項到這個版面配置上(該使用者控制項並未完全佔用滿整個版面配置空間),此時,該使用者控制項若沒有指定 GestureRecognizers ,那麼,當使用者點選該使用者控制項的時候,是哪個 GestureRecognizers 會被觸發呢?
  3. 當在一個 Layout 上有指定 GestureRecognizers ,並且放置一個按鈕到這個版面配置上(該使用者控制項並未完全佔用滿整個版面配置空間),此時,該按鈕若有指定 Command ,那麼,當使用者點選該按鈕的時候,是否會觸發 Layout 的GestureRecognizers呢?
  4. 當在一個 Layout 上有指定 GestureRecognizers ,並且放置一個按鈕到這個版面配置上(該使用者控制項並未完全佔用滿整個版面配置空間),此時,該按鈕若沒有指定 Command ,那麼,當使用者點選該按鈕的時候,是否會觸發 Layout 的GestureRecognizers呢?
  5. 當在一個 Layout 上有指定 GestureRecognizers ,並且放置一個文字輸入盒到這個版面配置上(該使用者控制項並未完全佔用滿整個版面配置空間),此時,若點選該文字輸入盒,是否會觸發 Layout 的GestureRecognizers呢?
為了要能夠了解這些疑問,所以,請依照底下步驟建立一個 Xamarin.Forms 測試專案,並且分別在 Android / iOS / UWP 底下來跑看看,看看這些問題的實際運作情況是如何,並且在不同作業系統平台下的表顯示否都是相同呢?
這篇文章所提到的範例程式碼,可以從 Github Xamarin2019 Repository 上取得。

使用 Visual Studio 產生一個 Xamarin.Forms for Prism 專案

  • 開啟 Visual Studio 2019 程式
  • 當 Visual Studio 2019 開始 視窗 出現之後,請點選左下角的 [建立新專案] 選項 
  • 當 [建立新專案] 對話窗出現之後,請在中間最上方的搜尋文字輸入盒中輸入 [prism] 關鍵字,搜尋所有與 Prism 有關的專案樣板 
  • 請選擇 [Prism Blank App (Xamarin.Forms)] 這個專案樣板
  • 當出現 [設定新的專案] 對話窗,請在 [專案名稱] 輸入 [LayoutGesture] 
  • 最後點選該對話窗右下方的 [建立] 按鈕
  • 現在將會看到 [PRISM PROJECT WIZARD] 對話窗,請勾選 ANDROID, iOS, UWP 三個行動裝置平台,接著在底下 [Container] 下拉選單,選擇 Unity 項目 
  • 最後,點選 [CREATE PROJECT] 按鈕,以便產生 Xamarin.Forms 專案
  • 當這個 Xamarin.Forms 專案建立成功之後,請在該方案中,找到 Xamarin.Forms 使用的專案,這裡是名為 [LayoutGesture] 專案名稱,請在該專案中,使用滑鼠右擊 [相依性] 節點,選擇 [管理 NuGet 套件] 選項
  • 在 [NuGet: LayoutGesture] 視窗中,點選 [瀏覽] 標籤頁次,並且在下方的搜尋文字輸入盒中,輸入 [propertychanged.fody] 關鍵字,搜尋出這個 NuGet 套件
  • 當出現 [PropertyChanged.Fody] NuGet 套件,請點選該套件,並且點選右方的 [安裝] 按鈕,將這個套件安裝到 Xamarin.Forms 專案內 
  • 請查看 Xamarin.Forms 專案內,並沒有 [FodyWeavers.xml] 這個檔案,因此,使用滑鼠右擊 [LayoutGesture] 專案節點,選擇 [建置] 選項
  • 當建置完成之後,在這個 Xamarin.Forms 專案內將會出現 [FodyWeavers.xml] 檔案 

修正 View 與 ViewModel

  • 在 Xamarin.Forms 專案內的 [Views] 資料夾內,找到 MainPage.xaml 檔案,並且打開它
  • 使用底下 XAML 語言替換掉這個檔案內的 XAML 內容
XAML
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="LayoutGesture.Views.MainPage"
             Title="版面配置的手勢操作">

    <Grid
       RowSpacing="0" ColumnSpacing="0"
       >
        <Grid.RowDefinitions>
            <RowDefinition Height="50"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.GestureRecognizers>
            <TapGestureRecognizer
                    Command="{Binding TapCommand}"
                    CommandParameter="透明的 Grid 觸發點選手勢"/>
        </Grid.GestureRecognizers>

        <Label
            Grid.Row="0" Grid.Column="0"
            HorizontalOptions="Center" VerticalOptions="Center"
            Text="{Binding Hint}"/>

        <StackLayout
            Grid.Row="1"
            >
            <StackLayout.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding TapCommand}"
                    CommandParameter="透明的 StackLayout 觸發點選手勢"/>
            </StackLayout.GestureRecognizers>
        </StackLayout>

        <StackLayout
            Grid.Row="2"
            BackgroundColor="LightBlue"
            >
            <StackLayout.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding TapCommand}"
                    CommandParameter="藍色背景的 StackLayout 觸發點選手勢"/>
            </StackLayout.GestureRecognizers>
        </StackLayout>

        <BoxView
            Grid.Row="3"
            Color="LightGreen"
            HorizontalOptions="Start" VerticalOptions="Center"
            WidthRequest="100" HeightRequest="50"/>

        <BoxView
            Grid.Row="3"
            Color="LightPink"
            HorizontalOptions="End" VerticalOptions="Center"
            WidthRequest="100" HeightRequest="50">
            <BoxView.GestureRecognizers>
                <TapGestureRecognizer
                    Command="{Binding TapCommand}"
                    CommandParameter="粉紅色背景的 BoxView 觸發點選手勢"/>
            </BoxView.GestureRecognizers>
        </BoxView>

        <Button
            Grid.Row="4"
            HorizontalOptions="Start" VerticalOptions="Center"
            Text="沒有設定 Command 的按鈕"/>

        <Button
            Grid.Row="4"
            HorizontalOptions="End" VerticalOptions="Center"
            Text="設定 Command 的按鈕"
            Command="{Binding TapCommand}"
            CommandParameter="設定 Command 的按鈕"/>

        <Entry
            Grid.Row="5"
            Placeholder="請在這裡輸入"
            HorizontalOptions="Center" VerticalOptions="Center"/>
    </Grid>

</ContentPage>
  • 在 Xamarin.Forms 專案內的 [ViewModels] 資料夾內,找到 MainPageViewModel.cs 檔案,並且打開它
  • 使用底下 C# 敘述替換掉這個檔案內的 C# 敘述
C Sharp / C#
namespace LayoutGesture.ViewModels
{
    using System.ComponentModel;
    using Prism.Events;
    using Prism.Navigation;
    using Prism.Services;
    public class MainPageViewModel : INotifyPropertyChanged, INavigationAware
    {
        public event PropertyChangedEventHandler PropertyChanged;
        public DelegateCommand<string> TapCommand { get; set; }
        private readonly INavigationService navigationService;
        public string Hint { get; set; }
        public MainPageViewModel(INavigationService navigationService)
        {
            this.navigationService = navigationService;
            TapCommand = new DelegateCommand<string>(x =>
            {
                Hint = x;
            });
        }

        public void OnNavigatedFrom(INavigationParameters parameters)
        {
        }

        public void OnNavigatedTo(INavigationParameters parameters)
        {
        }

        public void OnNavigatingTo(INavigationParameters parameters)
        {
        }

    }
}

建置與執行和測試結果

  • 切換 Android 專案為預設起始專案,並且執行這個 Xamarin.Forms 到模擬器或者實體手機上
  • 底下螢幕截圖為實際執行結果
現在,可以實際點選螢幕上的任何地方,並且觀察螢幕最上方的訊息文字,所以,可以得到底下結論:
  • Layout 版面配置 與 View 檢視 可以設定使用 GestureRecognizers 屬性,指定不同的手勢觸發命令
  • 若有多個 Layout 版面配置重疊,且這些版面配置都有設定使用 GestureRecognizers 屬性,當點選多個重疊在最上方版面配置區域的時候,最上方的版面配置之手勢命令將會被觸發,在底層的手勢命令不會被觸發
  • 若版面配置的背景顏色為 透明色 Transparent ,還是依照上述的運作規則
  • 若版面配置與檢視彼此重疊,也是依照上述的運作規則
  • 若該檢視本身就具有手勢感應功能,例如,按鈕可以接收到使用者是否有點選這個按鈕、文字輸入盒可以接受使用者輸入文字等等,就算這些檢視沒有使用 GestureRecognizers 屬性,在底層的版面配置或者檢視也不會觸發相關手勢命令