XAML in Xamarin.Forms 基礎篇 電子書

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

Xamarin.Forms 快速入門 電子書

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

2018/06/07

Visual Studio 2017 for Xamarin 開發環境之安裝與設定說明 (2018 Q2 版本)

請注意,Visual Studio 2019 已經於 2019年四月正式發表了,若想要了解如何在 Visual Studio 2019 下進行各種安裝與設定,以便可以進行 Xamarin.Forms 專案開發,請參考這一系列的文章 Visual Studio 2019 for Xamarin 之安裝與設定 


在 2017 Q1,因為 Xamarin 課程 教學需要 ,我撰寫了關於如何安裝與設定 Visual Studio 2017 的步驟說明文件與影片,不過,由於 Visual Studio 2017 不斷的演進與更新,之前所撰寫與錄製的影片將與現今的安裝過程有些差異。因為現在的安裝與設定過程有些不同,所以,我將 Visual Studio 2017 的安裝與設定文件重新撰寫一次 (但是,取消了影片錄影說明,這是因為,一旦錄製成為影片,日後想要進行部分異動內容的修正,會顯得相當的不太方便)。

對於已經具備擁有 .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 課程 教育訓練課程的官方教材,使用 Windows 10 組建 1803 版本作為安裝基礎,並且說明在安裝前、安裝時、安裝後的相關設定步驟做一說明,期望透過該文件的內容,讓有心想要進行 Xamarin.Forms 開發的人員,可以順利的安裝與設定 Xamarin 的開發環境。
此份文件製作於 2018年06月06日
整個安裝與設定過程,您的電腦需要重新開機數次
本文件總共分成 3 部分
  • 安裝前的準備工作
    這裡將會說明當您準備要進行安裝 Visual Studio 2017 for Xamarin.Forms 開發環境之前,需要進行得確認與準備工作有那些,這裡的內容相當重要,因為,若您的電腦環境一旦規格不符合需求,整個安裝與設定過程,將會產生問題,也會造成某些功能無法使用。
  • Visual Studio 2017 安裝後的相關設定
    在這裡,我們將會帶領大家,一步一步地進行 Visual Studio 2017 開發工具的安裝,並且在 Visual Studio 2017 安裝完成之後,接下來該如何進行 Xamarin 開發環境的設定,這裡也包含了 Prism Template Pack 擴充功能的安裝與參加我舉辦的 Xamarin 課程 必須要具備程式碼片段,這個些程式碼片段是我專門為開發 Xamarin.Forms for Prism 所設計的。
  • 確認開發環境可以進行 Xamarin.Forms 專案開發
    最後,安裝與設定工作都完成之後,我們就需要開始進行檢查與確認您的電腦可以真的進行 Xamarin 跨平台應用程式的開發,因此,一定要依據這裡說明內容,逐一進行檢測,確認您的開發環境都正確無誤並且可以運作正常。

安裝前的準備工作

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

確認作業系統版本

在這裡,我們需要將您使用的 Windows 10 專業版本作業系統,升級到 組建 1803 版本,若您的電腦不是這個版本,請使用 Windows Update 進行更新到 組建 1803 版本。
請特別注意,由於 Hyper-V 服務僅能夠在 Windows 10 專業版以上版本才能夠啟用,若您的 Windows 10 作業系統屬於 Windows 10 Home 版本,您將會只有一個選擇,那就是重新安裝 Windows 10 專業版本;若您只是更新授權金鑰為 Windows 10 專業版本,則您的 Hyper-V 服務,還是會有問題的。
想要檢查您的 Windows 10 作業系統是甚麼版本,請點選左下角的視窗圖示,接著點選左下方的齒輪圖示,或者點選右下方通知圖示,接著選取 所有設定按鈕
Windows Setting 設定
當進入到 設定 視窗之後,點選左上方的 系統 圖示,緊接著在左邊的最下方選項,點選 關於 項目,您就會看到視窗右邊出現的內容,查看到 Windows 規格 區域,確認您使用作業系統版本至少為 Windows 10 專業版與 組件 1803
Windows Setting 設定

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

依照個人喜好,若您想要使用模擬器來進行開發的話,您的電腦 CPU 需要具備支援虛擬化的功能,若您想要啟用您的電腦支援虛擬化功能,請確認您的 CPU 有支援此一功能,並且從 BIOS 啟用此功能。這個影片 how to enable hyper-v machine in bios 將會展示如何設定 BIOS 可以使用虛擬化的功能。
關於 Hypervisor 虛擬機器監視器的更多說明與了解,可以參考 維基百科的解釋
原則上不同的虛擬化產品是無法混合一起使用的,例如 Hyper-V 無法與其他的虛擬化產品 Intel HAXM或 VMware 等等,共同使用,您只能夠選擇其一來使用。
您也可以在您的作業系統中,使用工作管理員程式,檢查您的作業系統是否可以使用虛擬化的功能,當您打開工作管理員程式之後,點選 效能 標籤頁次,在這個標籤頁次中,點選 CPU 項目,在 CPU 項目的右方,您將會看到 模擬 欄位,若標示 已啟用,那就表示您的 BIOS 已經開啟了虛擬化功能了。
在我的教學課程中,我都是搭配著使用 Hyper-V 技術的模擬器來進行操作
若您的電腦無法從 Windows 10 Home 版本 (因為該版本無法安裝與使用 Hyper-V) 升級到 Windows 10 專業版、又或者您的電腦 CPU 沒有支援虛擬化功能、甚至,您的電腦中已經安裝了其他 Hypervisor 的產品,這個時候,您可以選擇不需要 Hyper-V 的模擬器技術,您可以有這兩個選擇:1. 使用實體手機來進行測試與開發 2. 選擇已經安裝的虛擬化技術廠商可用的 Android 模擬器
再次重新聲明,在進行 Xamarin.Forms 專案開發的時候,沒有說一定只能夠透過 Hyper-V 模擬器或者任何其他家的模擬器來開發,您可以使用實體手機來進行開發,這也是沒有問題。
工作管理員

同時啟用 Hyper-V 和 Windows Hypervisor 平台

在安裝之前,我們建議您先要啟用該作業系統可以使用 Hyper-V 和 Windows Hypervisor 平台 這兩項功能,請根據底下的操作步驟,安裝這兩個服務。
  • 首先,依據上面的操作步驟,開啟 Windows 設定視窗
啟用 Hyper-V 和 Windows Hypervisor 平台
  • 點選 應用程式 項目
Windows Setting 設定
  • 在 應用程式 畫面右方,點選 相關設定的 程式和功能
Windows Setting 設定
  • 當 程式和功能 視窗開啟之後,點選該視窗左方的 開啟或關閉 Windows 功能
啟用 Hyper-V 和 Windows Hypervisor 平台
  • 現在,您將會看到 Windows 功能 視窗出現在電腦上,請在下方的清單項目,找到 Hyper-V 與 Windows Hypervisor 平台 這兩個選項,完成後,請點選 確定 按鈕。
啟用 Hyper-V 和 Windows Hypervisor 平台
  • 現在,Windows 將會開始安裝這兩個功能。
Windows Setting 設定
  • 當這兩個 Windows 功能安裝完成後,我們需要重新啟動您的作業系統
Windows Setting 設定

啟用 UWP 開發人員模式

若您想要使用 Xamarin.Forms 建立出可以同時在 Android / iOS / UWP 系統下執行的跨平台 App,您就需要參考底下的步驟,先進行 UWP 開發人員模式的啟用
  • 首先,還是一樣需要進入到 Windows 設定 應用程式畫面
Windows Setting 設定
  • 請點選 更新與安全性 選項
Windows Setting 設定
  • 當 更新與安全性 頁面出現之後,從該頁面的左方最下面,點選 開發人員專用
Windows Setting 設定
  • 請點選右方內容的 開發人員模式 選項,現在,會看到使用開發人員功能對話窗出現,現在可以點選 是 按鈕。
Windows Setting 設定

安裝 Visual Studio 2017

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

Visual Studio 2017 安裝後的相關設定

當我們啟動完成 Visual Studio 2017 之後,我們需要開始進行 Android SDK 的設定與更新作業、安裝 Prism Template Pack與我開發的 Xamarin.Forms 專用的程式碼片段和確認相關機碼是否有正確產生出來。
在這個階段,我們將會進行底下的相關設定
  • 更新 Android SDK
  • 安裝 Prism Template Pack
  • 下載與安裝 Xamarin.Forms 專用的程式碼片段
  • 檢查 Android SDK 機碼是否存在

更新 Android SDK

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

安裝 Prism Template Pack

  • 請回到 Visual Studio 2017 程式中,點選功能表
    工具 > 擴充功能和更新
    擴充功能和更新
  • 當 擴充功能和更新 視窗出現之後,請先在左方點選 線上 選項
    接著在右上方搜尋文字輸入盒,輸入 prism 關鍵字
    此時,您將會看到 Prism Template Pack 項目出現在清單內,請點選該項目的 下載 按鈕,安裝這個擴充功能
    安裝 Prism Template Pack
  • 若從該視窗的左邊之 更新 項目中,看到有尚未更新的選項,請點選 更新 項目
    從我們的環境中,看到 GitHub Extension for Visual Studio 需要進行更新,因此,請點選該項目中的 更新 按鈕
    擴充功能和更新
  • 完成之後,請關閉 擴充功能和更新 視窗與關閉 Visual Studio,以便進行更新這些擴充功能,完成後,請再度開啟 Visual Studio 2017

下載與安裝 Xamarin.Forms 專用的程式碼片段

  • 請先建立一個 Xamarin 資料夾(任何名稱皆可),在這裡,我是建立 C:\Xamarin
  • 請在右方方案總管視窗下方,點選 Team Explorer 標籤頁次
    請在下方的 本機 Git 存放庫 的下方,點選 複製 選項
    請在第一個文字輸入盒中輸入這個 URL : https://github.com/vulcanlee/XamarinProductive.git
    請在第二個文字輸入盒中,輸入 C:\Xamarin\XamarinProductive
    C:\Xamarin 目錄,是我們剛剛建立的目錄,您可以指定任何您電腦中的一個目錄
    最後,請點選 複製 按鈕
    複製程式碼片段
  • 我們從 Visual Studio 2017 功能表中,點選
    工具 > 程式碼片段管理員
    安裝程式碼片段
  • 在 程式碼片段管理員 視窗中,切換 語言 項目為 CSharp
    這裡很重要,若沒有切換,您的程式碼片段設定將會失敗
    安裝程式碼片段
  • 接著,在這個 程式碼片段管理員 視窗下方,點選 加入 按鈕
    請不要點選 匯入 按鈕
  • 請在剛剛出現的 程式碼片段目錄 對話窗中,切換到我們剛剛建立的 C:\Xamarin 目錄
    接著點選切換到 XamarinProductive 目錄下
    最後,只需要使用滑鼠點擊一下 CodeSnippetV2 這個目錄
    不需要使用滑鼠雙擊切換到這個目錄內
    現在,請點選 選擇資料夾 按鈕
    安裝程式碼片段
  • 此時,我們將會回到 程式碼片段管理員 視窗內,您應該可以看到 CodeSnippetV2 出現在這個對話窗中。
    現在,我們已經完成了程式碼片段的安裝,您可以關閉這個視窗
    安裝程式碼片段

檢查 Android SDK 機碼是否存在

若沒有進行這個步驟的檢查,將會有可能發生您的 Xamarin.Android 專案無法在 Visual Studio Emulator for Android 模擬器上來執行您的 App。
  • 請打開 Regedit 程式
    Regedit
  • 請切換到這個機碼下
    HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node
    檢查是否有這個機碼存在
    Regedit
  • 若沒有,使用滑鼠右擊 WOW6432Node 這個節點,點選
    新增 > 機碼
    Regedit
    在新增的機碼處,輸入 Android SDK Tools
    Regedit
  • 若沒有,使用滑鼠右擊 Android SDK Tools 這個節點,點選
    新增 > 字串值
    Regedit
    使用 Path 這個字串,取代掉剛剛建立的 新數值 #1 字串文字
    Regedit
  • 使用滑鼠雙擊 Path 項目
    當出現 編輯字串 對話窗,請在數值資料欄位,輸入底下路徑
    C:\Program Files (x86)\Android\android-sdk
    Regedit
  • 最後,結果如下圖,您可以關閉 登錄機碼程式
    Regedit

測試與確認開發環境可以進行 Xamarin.Forms 專案開發

您必須要確實進行這些檢查與測試工作,確保您的 Xamarin.Forms 開發環境可以正常運作
  • 安裝與啟動 Visual Studio for Android 模擬器
  • 測試可以建立 Xamarin.Forms for Prism 專案
  • 確認程式碼片段可以正常運作

安裝與啟動 Visual Studio for Android 模擬器

  • 點選 Windows 作業系統畫面左下方的放大鏡,輸入 android 文字
    現在,Windows 作業系統,會顯示出 Visual Studio Emulator for Android 這個應用程式
    請點選這個應用程式,開始執行它
    安裝程式碼片段
  • 在 Visual Studio Emulator for Android 視窗中
    切換 Device Profiles 下方的下拉選單為 Marshmallow (API 23)
    Visual Studio Emulator for Android
  • 我個人會下載與安裝這個模擬器
    5.2" Marshmallow (6.0.0 XXHDPI Phone) Similar to LG Nexus 5X, Sony Xperia Z3, Sony Xperia Z2, Sony Xperia Z5, Huawei P8
    API Level 23 (Marshmallow 6.0.0)
    因此,請點選這個項目(該畫面中的倒數第二個)右方的向下箭頭圖示,該使下載與安裝這個模擬器。
  • 若有出現下方的 使用者帳戶控制 對話窗,請點選 是 按鈕
    Visual Studio Emulator for Android
  • 現在,若您在 Visual Studio Emulator for Android 視窗中,看到下列文字
    You were previously added to the Hyper-V Administrators security group, but the permissions have not taken effect. Please sign out of your computer for the permissions to take effect.
    建議您重新器動您的作業系統
    Visual Studio Emulator for Android
  • 在我們重新啟動 Windows 作業系統之後,請重新開啟 Visual Studio Emulator for Android 應用程式
    現在,您可以看到我們剛剛下載與安裝的 6.0 模擬器已經準備好了,請點選該項目最右方的綠色 啟動 三角形
    Visual Studio Emulator for Android
  • 若您的環境有看到底下對話窗
    按一下 [重試] 以在提升權限的模式中,執行模擬器
    您沒有權限可以修改內部 Hyper-V 網路介面卡設定,需要修改設定才能執行模擬器
    請點選 重試 按鈕
    Visual Studio Emulator for Android
    接著會出現 使用者帳戶控制 對話窗,請點選 是 按鈕
    Visual Studio Emulator for Android
  • 現在,若您看到畫面如下所示,那就表示您的 Visual Studio Emulator for Android 模擬器可以正常執行,您可以點選模擬器上 GOT IT 按鈕
    Visual Studio Emulator for Android
    現在,您的電腦畫面將會如下所示
    Visual Studio Emulator for Android

若無法正常模擬器進行除錯之修正

請打開 Hyper-V 管理員,找到您要連線的模擬器,並且記得要先關閉該模擬器,接者,滑鼠右擊該模擬器,設定處理器 > 相容性 ,要將 移轉至使用不同處理器版本的實體電腦 選項打勾,之後,可以重新啟用該模擬器,就可以正常進行除錯了。

修正模擬器之相容性測試可以建立 Xamarin.Forms for Prism 專案

  • 請在 Visual Studio 2017 程式中,點選功能表
    檔案 > 新增 > 專案
    Xamarin.Forms for Prism
  • 在 新增專案 對話窗中,請點選該對話窗左方的 Prism 項目
    在中間選項中,點選 Prism Blank App (Xamarim.Forms)
    Xamarin.Forms for Prism
  • 出現了 PRISM PROJECT WIZARD 對話窗中,請切換 Container 為 Unity
    最後,點選 CREATE PROJECT 按鈕
    Xamarin.Forms for Prism
  • 若您的環境中看到了 檢閱方案動作 對話窗,您可以點選藍色的 安裝 文字,安裝這個 UWP SDK
    Install UWP SDK
  • 接著,您會看到底下對話窗,請點選 安裝 按鈕
    Install UWP SDK
  • 若您看到這個對話窗,請將 Visual Studio 2017 關閉,並且點選 重試 按鈕
    Install UWP SDK
    若看到下圖視窗,那就表示正在進行下載與安裝這個 UWP SDK
    Install UWP SDK
  • 在 UWP SDK 安裝完成之後,請重新開啟 Visual Studio 2017,並且依照這一小節的說明,重新建立一個 Xamarin.Forms for Prism 的專案。
    Install UWP SDK
  • 當 Xamarin.Forms for Prism 專案建立完成後,請使用滑鼠右擊 Android 專案
    選擇 設定為起始專案
    Install UWP SDK
  • 此時,您會在 Visual Studio 2017 中間上方區域,看到 啟動專案已經設定為 Android 專案,並且要執行的裝置為 5.2" Marshmallow (6.0.0) XXHDPI Phone (Android 6.0 API 23) 這個模擬器
    請點選有綠色三角形的模擬器項目,開始建置與在這個模擬器上來執行
    Install UWP SDK
  • 若您看到底下訊息,請參考下一個步驟,進行調整
    Your project is not referencing the "MonoAndroid,Version=v8.1" framework. Add a reference to "MonoAndroid,Version=v8.1" in the "frameworks" section of your project.json, and then re-run NuGet restore.
    Install UWP SDK
  • 請展開 Android 專案,找到 Properties 節點
    使用滑鼠雙擊 Properties 這個節點
    當新的視窗出現之後,請在 使用下列 Android 版本編譯: (目標 Framework) 標題文字下方的下拉選單,選擇 Android 8.1 (Oreo) 這個選項
    現在,請重新執行這個 Android 專案
    Install UWP SDK
  • 由於第一次進行專案建置,需要下載許多 NuGet 套件,因此,需要花費一些時間,請耐心等候一下,底下是成功執行完成的畫面
    Install UWP SDK
  • 停止這個 Android 專案的執行
  • 使用滑鼠右擊 UPW 專案
    選擇 設定為起始專案
  • 點選 Visual Studio 2017 最上方工具列綠色三角形的本機電腦
    底下將會是成功執行 UWP 專案的畫面
    Install UWP SDK
  • 停止 UWP 專案的執行

確認程式碼片段可以正常運作

  • 在 Xamarin.Forms 的 .NET Standard 專案中,找到 ViewModels 資料夾
  • 打開 MainPageViewModel
  • 在任何空白處,輸入 xf 文字
    此時,您應該要看到如下螢幕畫面,會有許多程式碼片段顯示出來,而且,都是 xf 開頭的
    Xamarin.Forms Code Snippet

結論

若您的 Visual Studio 2017 可以成功建立 Xamarin.Forms for Prism 專案,並且可以建置與在 Android / UWP 平台下執行,最後,Xamarin.Forms 客製程式碼片段也可以正常顯示與使用,那麼,恭喜您,您的 Visual Studio 2017 開發環境,已經可以正常進行 Xamarin.Forms 跨平台專案開發了

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


關於 Xamarin 在台灣的學習技術資源

歡迎加入 Xamarin 實驗室 粉絲團,在這裡,將會經常性的貼出各種關於 Xamarin / Visual Studio / .NET 的相關消息、文章、技術開發等文件,讓您可以隨時掌握第一手的 Xamarin 方面消息。
歡迎加入 Xamarin.Forms @ Taiwan,這是台灣的 Xamarin User Group,若您有任何關於 Xamarin / Visual Studio / .NET 上的問題,都可以在這裡來與各方高手來進行討論、交流。
Xamarin 實驗室 部落格 是作者本身的部落格,這個部落格將會專注於 Xamarin 之跨平台 (Android / iOS / UWP) 方面的各類開技術探討、研究與分享的文章,最重要的是,它是全繁體中文。
Xamarin.Forms 系列課程 想要快速進入到 Xamarin.Forms 的開發領域,學會各種 Xamarin.Forms 跨平台開發技術,例如:MVVM、Prism、Data Binding、各種 頁面 Page / 版面配置 Layout / 控制項 Control 的用法等等,千萬不要錯過這些 Xamarin.Forms 課程


2018/06/04

Xamarin.Android 執行時期的權限處理說明 3 使用手機內其他 PDF App 來開啟在 download 資料夾內的檔案

範例專案 : XFFileProvider

了解更多關於 [Xamarin.Android] 的使用方式
了解更多關於 [Xamarin.iOS] 的使用方式
了解更多關於 [Xamarin.Forms] 的使用方式
了解更多關於 [Hello, Android:快速入門] 的使用方式
了解更多關於 [Hello, iOS – 快速入門] 的使用方式
了解更多關於 [Xamarin.Forms 快速入門] 的使用方式
在上兩篇文章 Xamarin.Android 執行時期的權限處理說明 2 使用 Plugin.Permissions / Xamarin.Android 執行時期的權限處理說明 1 最低的 Android 版本 / 目標 Android 版本 / 目標 Framework 中,我們說明了 Android API Level 23 以上的作業系統,如何進行處理執行時期的權限授權處理方法,在這篇文章中,我們將會產生一個檔案到 Android 檔案系統中,不過,我們不是要將檔案儲存 App Sandbox 沙箱目錄內,而是要建立在 Download 資料夾內,這個資料夾內存在的檔案,連使用者也可以自行查看與開啟,不過,我們將要使用手機內已將安裝的其他,使用這些 App 來開啟這個檔案,在這裡,我們會建立一個 PDF 檔案,不過,檔案內容卻是一般文字,接者,可以讓使用者選取要使用哪個已安裝的 PDF 檢視軟體來開啟這個檔案。
不過,由於在 Android SDK 24 以上的版本,在使用 Intent 來開啟檔案的時候,加入了開啟檔案的權限判斷,因此,我們之前所使用的 Android.Net.Uri.FromFile(file); 方法,將會需要修改成為 Android.Support.V4.Content.FileProvider.GetUriForFile(Android.App.Application.Context,Android.App.Application.Context.PackageName + ".fileprovider", file); 這樣的方法呼叫,不過,還不只如此,我們還需要在 AndroidManifest 檔案內,加入額外的宣告,並且另外新增一個 XML 檔案。
因此,在這篇文章中,我們將會說明要如何做到這樣的事情,我們會設計一個頁面,裡面有兩個按鈕,第一個按鈕,將會取得使用者授權這個 App 可以使用 Storage 使用權限,第二個按鈕,將會在 download 目錄下產生一個 pdf 檔案,緊接著,將會使用手機內可以開啟 pdf 的檔案,幫助我們開啟這個 PDF 檔案與看到這些內容,當然,若您的手機中,可以開啟 pdf 的檔案 App 超過一個以上,Android 系統,將會顯示一個小對話窗,列出您手機中可以開啟 pdf 檔案的所有 App,您可以選擇任何一個來開啟這個 pdf 檔案。

在 Download 目錄下建立一個 PDF 檔案

在這個按鈕的命令委派方法中,我們透過相依性注入方法,取得了 download 目錄的路徑,並且包裝成為 PCLStorage 套件中使用的 IFolder 物件,如此,我們針對這個 IFolder 注入後的物件,也就是下面程式碼中的 rootFoler 變數,就可以在這個 download 目錄下來產生任何檔案了。我們將會在這裡產生一個 PDF.pdf 名稱的檔案,不過,該檔案內容僅是一個文字內容。
最後,我們使用相依性注入方法,取得了在 Android 平台下實作的 IOpenFileByName 物件,我們就可以針對該物件進行使用別的 App 來開啟這個檔案的動作了。
OpenPDFCommand = new DelegateCommand(async () =>
{
    string filename = "PDF.pdf";
    IFolder rootFolder = _publicFileSystem.PublicDownloadFolder;
    IFile file = await rootFolder.CreateFileAsync(filename, CreationCollisionOption.OpenIfExists);
    await file.WriteAllTextAsync("123");
    _openFileByName.OpenFile(file.Path);
});

開啟 Downoad 目錄下的檔案

底下的程式碼將會需要在 Android 原生專案內實作,因為需要使用到各種 Android SDK API,我們將透過傳送過來的檔案完整路徑,建立一個 Java.IO.File 物件,接著檢查 TargetSDK 是否小於 24,若是大於等於 API Level 24,我們將會需要 這個方法,來取得該檔案的 URI : Android.Support.V4.Content.FileProvider.GetUriForFile(Android.App.Application.Context,Android.App.Application.Context.PackageName + ".fileprovider", file);
接著,當然需要建立一個 Intent 物件,最後,呼叫這個方法 Android.App.Application.Context.StartActivity(intent); 來開啟這個檔案。
很不幸的,看似一切完美,可以當您實際執行這個專案,並點下按鈕之後,您將會得到這個例外異常錯誤訊息 : Attempt to invoke virtual method 'android.content.res.XmlResourceParser android.content.pm.PackageItemInfo.loadXmlMetaData(android.content.pm.PackageManager, java.lang.String)' on a null object reference
public void OpenFile(string fullFileName)
{
    try
    {
        Java.IO.File file = new Java.IO.File(fullFileName);
        file.SetReadable(true);

        string application = "";

        application = "application/pdf";

        var targetSdk = ResolvePackageTargetSdkVersion();
        if (targetSdk < 24)
        {
            Android.Net.Uri uri = Android.Net.Uri.FromFile(file);
            Intent intent = new Intent(Intent.ActionView);
            intent.SetDataAndType(uri, application);
            intent.SetFlags(ActivityFlags.ClearWhenTaskReset | ActivityFlags.NewTask);

            Android.App.Application.Context.StartActivity(intent);
            try
            {
                Android.App.Application.Context.StartActivity(intent);
            }
            catch (Exception)
            {
                Toast.MakeText(Android.App.Application.Context, "No Application Available to View this file.", ToastLength.Short).Show();
            }
        }
        else
        {
            var foo = Android.App.Application.Context.PackageName + ".fileprovider";
            Android.Net.Uri uri = Android.Support.V4.Content.FileProvider.GetUriForFile(
                Android.App.Application.Context,
                foo, file);

            Intent intent = new Intent(Intent.ActionView);
            intent.SetDataAndType(uri, application);
            intent.AddFlags(ActivityFlags.GrantReadUriPermission);
            intent.AddFlags(ActivityFlags.NoHistory);
            intent.AddFlags(ActivityFlags.ClearWhenTaskReset | ActivityFlags.NewTask);

            try
            {
                Android.App.Application.Context.StartActivity(intent);
            }
            catch (Exception)
            {
                Toast.MakeText(Android.App.Application.Context, "No Application Available to View this file.", ToastLength.Short).Show();
            }
        }
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
}

其他設定

  • 請使用滑鼠雙擊您的 Android 專案 Properties 目錄,切換到 Android 資訊清單頁次,記錄下您這個 Android 專案的套件名稱。
  • 展開 Android 專案的 Properties 節點,您將會看到 AndroidManifest.xml 檔案,請打開他
  • 在 AndroidManifest.xml 檔案中加入底下的宣告
  • 在 android:authorities 屬性中,請使用您實際專案的套件名稱,替換掉這個字串: [Android 專案的套件名稱]
    <provider 
      android:name="android.support.v4.content.FileProvider" 
      android:authorities="[Android 專案的套件名稱].fileprovider" 
      android:exported="false" 
      android:grantUriPermissions="true">
      <meta-data 
        android:name="android.support.FILE_PROVIDER_PATHS" 
        android:resource="@layout/file_provider_path" />
    </provider>
  • 另外,我們需要建立一個 xml 檔案,在這裡,我們建立到 layout 目錄下,他的檔案內容如下:
<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
  <external-path name="Download" path="Download/"/>
</paths>
好的,現在我們可以再度執行這個應用程式,當我們點選了 開啟 PDF 檔案,此時,螢幕最下方出現了 選擇開啟工具 對話窗,您可以選擇要使用哪個 App 來開啟這個檔案。
小米 Max 小米 Max



2018/06/01

Xamarin.Android 執行時期的權限處理說明 2 使用 Plugin.Permissions

這篇文章的說明範例專案,可以從 這裡 取得

了解更多關於 [Xamarin.Android] 的使用方式
了解更多關於 [Xamarin.iOS] 的使用方式
了解更多關於 [Xamarin.Forms] 的使用方式
了解更多關於 [Hello, Android:快速入門] 的使用方式
了解更多關於 [Hello, iOS – 快速入門] 的使用方式
了解更多關於 [Xamarin.Forms 快速入門] 的使用方式
在上一篇文章 Xamarin.Android 執行時期的權限處理說明 1 最低的 Android 版本 / 目標 Android 版本 / 目標 Framework ,我們透過了事件聚合器 Event Aggregator 來呼叫 Android 原生的執行時期的權限檢查與授權工作,不過,這樣的處理方式會有些麻煩,因為,我們同時也需要時做出 iOS 上的相關動態權限檢查與請求授權,因此,在這篇文章中,我們將會透過了 Plugin.Permissions 這個 NuGet 套件,讓我們可以在 Xamarin.Forms 的 .NET Standard 專案中,來進行相關的權限檢查與授權需求。而更多關於這個套件的說明與使用注意事項,可以參考 GitHub Plugin.Permissions 文章說明

準備測試專案

  • 首先我們先使用 Prism Template Pack 幫助我們建立一個 Xamarin.Forms 的專案
  • 接著,請在 SCL .NET Standard 專案中,加入這個 Plugin.Permissions 套件
  • 滑鼠窗擊 Xamarin.Android 專案中的 Properties 節點,並且切換到 Android 資訊清單 標籤頁次,找到 目標 Android 版本,在此下拉選單中,選擇任何一個 API 層級大於 23 的版本
  • 打開 Android 專案中的 MainActivity.cs 檔案,使用底下程式碼取代
using Android.App;
using Android.Content.PM;
using Android.OS;
using Prism;
using Prism.Ioc;

[assembly: UsesPermission(Name = Android.Manifest.Permission.ReadExternalStorage)]
[assembly: UsesPermission(Name = Android.Manifest.Permission.WriteExternalStorage)]
[assembly: UsesPermission(Name = Android.Manifest.Permission.Camera)]
[assembly: UsesPermission(Name = Android.Manifest.Permission.CallPhone)]
namespace XFPermPlugin.Droid
{
    [Activity(Label = "XFPermPlugin", Icon = "@mipmap/ic_launcher", Theme = "@style/MainTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);

            Plugin.CurrentActivity.CrossCurrentActivity.Current.Init(this, bundle);

            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App(new AndroidInitializer()));
        }
        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [Android.Runtime.GeneratedEnum] Android.Content.PM.Permission[] grantResults)
        {
            Plugin.Permissions.PermissionsImplementation.Current.OnRequestPermissionsResult(requestCode, permissions, grantResults);
            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);
        }
    }

    public class AndroidInitializer : IPlatformInitializer
    {
        public void RegisterTypes(IContainerRegistry container)
        {
            // Register any platform specific implementations
        }
    }
}
  • 在此,我們使用了 [assembly: UsesPermission(Name = Android.Manifest.Permission.WriteExternalStorage)] 宣告我們需要進行外部記憶卡的寫入需求
  • 接著 我們要在 OnCreate 方法中,使用 Plugin.CurrentActivity.CrossCurrentActivity.Current.Init(this, bundle); 方法呼叫,進行這個套件初始化的動作。
  • 另外,我們也需要在 MainActivity 類別中,加入 OnRequestPermissionsResult 的方法覆寫。
  • 打開 MainPage.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="XFPermPlugin.Views.MainPage"
             Title="{Binding Title}">

    <StackLayout HorizontalOptions="CenterAndExpand" VerticalOptions="CenterAndExpand">
        <Label Text="Welcome to Xamarin Forms and Prism!" />
        <Button Text="Permission 檢查與授權" Command="{Binding CheckPermissionCommand}" />
    </StackLayout>

</ContentPage>
  • 在這個頁面中,宣告的 UI 相當的簡單,只有一個按鈕
  • 打開 MainPageViewModel.cs,填入底下的 C# 程式碼
using Prism.Commands;
using Prism.Mvvm;
using Prism.Navigation;
using Prism.Services;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

namespace XFPermPlugin.ViewModels
{
    public class MainPageViewModel : ViewModelBase
    {
        public DelegateCommand CheckPermissionCommand { get; set; }
        public readonly IPageDialogService _dialogService;
        public MainPageViewModel(INavigationService navigationService,
            IPageDialogService dialogService) 
            : base (navigationService)
        {
            _dialogService = dialogService;
            Title = "Main Page";
            CheckPermissionCommand = new DelegateCommand(async () =>
            {
                var fooStatus = await Plugin.Permissions.CrossPermissions
                .Current.CheckPermissionStatusAsync(Plugin.Permissions.Abstractions.Permission.Storage);
                if (fooStatus != Plugin.Permissions.Abstractions.PermissionStatus.Granted)
                {
                    if (await Plugin.Permissions.CrossPermissions.Current.ShouldShowRequestPermissionRationaleAsync
                    (Plugin.Permissions.Abstractions.Permission.Storage))
                    {
                        await _dialogService.DisplayAlertAsync("Need Storage", "Gunna need that Storage", "OK");
                    }

                    var results = await Plugin.Permissions.CrossPermissions.Current.RequestPermissionsAsync
                    (Plugin.Permissions.Abstractions.Permission.Storage);
                    //Best practice to always check that the key exists
                    if (results.ContainsKey(Plugin.Permissions.Abstractions.Permission.Storage))
                        fooStatus = results[Plugin.Permissions.Abstractions.Permission.Storage];
                }

                if (fooStatus == Plugin.Permissions.Abstractions.PermissionStatus.Granted)
                {
                    await _dialogService.DisplayAlertAsync("Storage Allow", "You can continue to call any storage API.", "OK");
                }
                else if (fooStatus != Plugin.Permissions.Abstractions.PermissionStatus.Unknown)
                {
                    await _dialogService.DisplayAlertAsync("Storage Denied", "Can not continue, try again.", "OK");
                }
            });
        }
    }
}
  • 在這個 ViewModel 中,我們使用了 Plugin.Permissions.CrossPermissions.Current 取得了 IPermissions 這個實作物件,並且使用了 Plugin.Permissions.CrossPermissions.Current.CheckPermissionStatusAsync(Plugin.Permissions.Abstractions.Permission.Storage) 敘述,來檢查現在正在執行的應用程式,是否已經取得使用者授權可以使用 Storage 的使用權限。
    若使用這已經授權使用 Storage 這個使用權限,則您會得到 Plugin.Permissions.Abstractions.PermissionStatus.Granted 值
    若使用者尚未授權,對於 Android 平台,我們需要顯示一段訊息,告知使用者我們需要這樣的權限,如此,應用程式方可正常運作。
    Android Permission
    接下來,我們使用了 Plugin.Permissions.CrossPermissions.Current.RequestPermissionsAsync(Plugin.Permissions.Abstractions.Permission.Storage) 方法,請求使用者授權這個應用程式,可以使用 Storage 的權限。
    Android Permission
    一旦此次請求授權的結果為 Plugin.Permissions.Abstractions.PermissionStatus.Granted ,您就可以開始進行相關 API 呼叫,否則,就不應該呼叫這些尚未授權 API 的呼叫。