XAML in Xamarin.Forms 基礎篇 電子書

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

Xamarin.Forms 快速入門 電子書

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

2017/03/21

Xamarin 企業級行動化開發平台環境建置攻略 ( 全新 Visual Studio 2017 版 )

這份文件,將會說明如何進行 Visual Studio 2017 企業版 開發工具的安裝過程中,相關的設定與注意事項,可以安裝起來一個可以進行 Xamarin / Xamarin.Forms 跨平台開發的工作環境。
這份文件所說明要安裝的項目與內容,是實際安裝 Visual Studio 2017 企業版 到一台剛剛安裝好的 Windows 10 專業版電腦上,實際確認可以正常開發與 Xamarin 專案,與可以在 Visual Studio for Android Emulator / iOS Simulator / UWP 模擬器上執行;若您有自己的需求,請自行按照您的需求,勾選自己有興趣的項目。

進行 Visual Studio 2017 企業版 安裝

這裡展示的過程將會以 Visual Studio 2017 企業版,作為安裝說明。
  • 首先,啟動 Visual Studio 2017 企業版 安裝程式
    • 將游標移動到 下載 Visual Studio 區域,並在彈出視窗中,點選 Enterprise
    • 當安裝程式下載完成後,啟動該安裝程式。
  • 當安裝程式啟動完成後,您會看到底下畫面

工作負載

  • 請點選左上方的 工作負載 標籤
  • 請勾選 通用 Windows 平台開發
    在右邊摘要部分,請勾選
    • IntelliTrace
    • Windows 10 行動模擬器 (Anniversar..
    • 架構與分析工具
  • 請勾選 使用 .NET 進行行動開發
    在右邊摘要部分,請勾選
    • Xamarin Workbooks
    • Xamarin Profiler
    • Xamarin Remoted Simulator
    • Android SDK 安裝程式 (API 層級 23)
    • Android NDK (R13B)
    • Java SE 開發套件 (8.0.920.14)
    • Windows 10 行動模擬器 (Anniversar...
    • 適用於 Xamarin 的通用 Windows 平...
    • 架構與分析工具

個別元件 (Visual Studio 2017 企業版)

  • 請點選左上方的 個別元件 標籤
    確認有勾選底下個別元件
    底下項目有提醒標示者(斜體),為需要額外追加的安裝項目

.NET

  • .NET 可攜式程式庫目標套件
  • .NET Framework 4.5.2 目標套件
  • .NET Framework 4.6.1 目標套件
  • .NET Framework 4.6.1 SDK
  • .NET Native

偵錯和測試

  • 分析工具
  • 自動程式化 UI 測試
  • 測試工具的核心功能
  • IntelliTrace
  • JavaScript 診斷

程式碼工具

  • 即時相依性驗證
  • 靜態分析工具

開發活動

  • C# 與 Visual Basic
  • JavaScript 與 TypeScript 程式語言
  • Xamarin
  • Xamarin Profiler
  • Xamarin Remote Simulator
  • Xamarin Workbooks

雲端、資料庫和伺服器

  • 資料來源與服務參考
  • SQL Server 的 CLR 資料模型
  • SQL Server Express 2016 LocalDB
  • SQL Server Native Client

遊戲開發套件

  • 影像與3D模型編輯器

遊戲與圖形

模擬器

  • Android 版 Visual Studio 模擬器
  • Windows 10 行動模擬器(Annviersary Edition)

編譯器、建置工具和執行階段

  • C# 與 Visual Basic Roslyn 編譯程式
  • MSBuild

編譯器、建置工具與執行階段

Code 工具

  • 文字範本轉換
  • 程式碼複製品
  • ClickOnce 發行
  • Code Map
  • Developer Analytics Tools
  • DGML 編譯器
  • Git for Windows
  • NuGet 封裝管理員
  • Visual Studio 的 GitHub 擴充功能

SDK、程式庫和架構

  • 適用於 .NET 的 Blend for Visual Studio SDK
  • Android NDK (R13B)
  • Android SDK 安裝程式 (API 層級 23)
  • Java SE 開發套件 (8.0.920.14)
  • TypeScript 2.1 SDK
  • Windows 10 SDK (10.0.14393.0)

額外安裝的項目清單

個別元件 (Visual Studio 2017 Community 版本)

當您安裝的是 Visual Studio 2017 Community 版本,個別元件要選擇的項目,可以參考這裡:
  • 請點選左上方的 個別元件 標籤
    確認有勾選底下個別元件

.NET

  • .NET 可攜式程式庫目標套件
  • .NET Framework 4.6.1 目標套件
  • .NET Framework 4.6.1 SDK
  • .NET Native

偵錯和測試

  • 分析工具
  • 測試工具的核心功能
  • JavaScript 診斷

程式碼工具

  • 相依性驗證
  • 靜態分析工具

開發活動

  • C# 與 Visual Basic
  • JavaScript 與 TypeScript 程式語言
  • Xamarin
  • Xamarin Workbooks

雲端、資料庫和伺服器

  • 資料來源與服務參考
  • SQL Server 的 CLR 資料模型

遊戲開發套件

  • 影像與3D模型編輯器

遊戲與圖形

模擬器

  • Android 版 Visual Studio 模擬器
  • Windows 10 行動模擬器(Annviersary Edition)

編譯器、建置工具和執行階段

  • C# 與 Visual Basic Roslyn 編譯程式
  • MSBuild

編譯器、建置工具與執行階段

Code 工具

  • 文字範本轉換
  • ClickOnce 發行
  • Developer Analytics Tools
  • Git for Windows
  • NuGet 封裝管理員
  • Visual Studio 的 GitHub 擴充功能

SDK、程式庫和架構

  • 適用於 .NET 的 Blend for Visual Studio SDK
  • Android NDK (R13B)
  • Android SDK 安裝程式 (API 層級 23)
  • Java SE 開發套件 (8.0.920.14)
  • TypeScript 2.1 SDK
  • Windows 10 SDK (10.0.14393.0)

總共安裝大小

經過這樣的設定,Visual Studio 2017 企業版 預估要安裝的程式約 24GB
請點選 安裝 按鈕,開始進行安裝 Visual Studio 2017 企業版

重新啟動電腦

安裝完成後,請點選 重新啟動 按鈕,請重新啟動您的電腦,並且接著要做些設定,確認您的開發環境,可以順利開發與進行 Xamarin.Forms 專案除錯與執行。

進行 Xamarin 開發環境設定

當電腦重新開機完成後,請開啟 Visual Studio 2017 企業版

Android SDK 管理員

  • 請點選功能表 工具 > Android > Android SDK 管理員
  • 勾選底下項目,進行安裝與升級
    Tools > Android SDK Tools
    Tools > Android SDK Platform-tools
    Tools > Android SDK Build-tools (Rev.25.0.2)
    Extras > Android Support Repository
    Extras > Google USB Driver
  • 點選 Install 5 Packages 按鈕,進行安裝
  • 關閉 Android SDK 管理員 ,並且重新開啟
  • 確認剛剛選取的五個項目,都已經安裝,且安裝到最新版本
  • 勾選底下項目,將其刪除掉
    Tools > Android SDK Build-tools (Rev.23.0.3)
    Android 6.0 (API 23) > Google APIs
  • 點選 Delete 2 Packages 按鈕,刪除這兩個套件
  • 勾選底下項目,準備進行安裝
    Android 7.1.1 (API 25) > SDK Platform
    Android 7.0 (API 24) > SDK Platform
    Android 4.4.2 (API 19) > SDK Platform
  • 點選 Install 3 Packages 按鈕,進行安裝
  • 安裝完成後,關閉 Android SDK 管理員

Visual Studio 的 Android 模擬器設定

首先,先確認您的 Hyper-V 服務已經有啟動
  • 請在左下角,點選放大鏡圖示,輸入 Hyper
  • 若有看到 Hyper-V 管理員,則表示這台電腦上的 Hyper-V 服務已經啟動了。
  • 從開始選單,找到 Visual Studio Emulator for Android 應用程式,並且開啟這個應用程式。
  • 請準備安裝 API 23 的 5.2" Marshmallow (6.0.0) XXHDPI Phone 這個模擬器
  • 您可以從左上方的 Device Profiles 的下方之下拉選單,設定只要看到 Marshmallow (API 23) 的相關模擬器。
  • 在清單中找到 5.2" Marshmallow (6.0.0) XXHDPI Phone 這個模擬器,並且點選該項目的 Install Profile 按鈕,下載這個模擬器。
  • 安裝過程,會出現需要您提稱權限模式,來執行模擬器,因此,請點選 重試 按鈕
  • 安裝完成後,請關閉 Visual Studio Emulator for Android 程式視窗

確認可以建立 Xamarin.Forms 專案

回到 Visual Studio 2017 企業版 內
  • 點選功能表 檔案 > 新增 > 專案
  • 點選 已安裝 > 範本 > Cross-Platform > 跨平台應用程式 (Xamarin.Forms 或原生)
  • 在 New Cross Platform 對話窗中,點選 選取範本 空白應用程式 > UI 技術 Xamarin.Forms > 程式碼共用策略 可攜式類別庫
  • 點選 OK 按鈕,開始建立專案
  • 當出現 設定 視窗的時候,請點選 開發人員模式,接著點選  按鈕
  • 當您已經啟動了開發人員模式,關閉 設定 視窗
  • 若出現這個錯誤訊息
封裝安裝錯誤

無法將所有必要的封裝加入專案中,無法從 'C:\Program Files(x86)\Microsoft SDKs\NuGetPackages' 安裝下列封裝

Microsoft.NETCore.UniversalWindowsPlatform.5.1.0 : 封裝還原失敗。正在復原 'App2.UWP' 的寺裝變更。
  • 請點選 確定 按鈕,讓專案建立完成
  • 修補剛剛發現到的錯誤,使用滑鼠右擊 UWP 專案,選擇 管理 NuGET 套件
  • 點選 瀏覽 標籤頁次,在文字輸入盒中,輸入這個套件名稱 Microsoft.NETCore.UniversalWindowsPlatform
  • 點選搜尋到的套件,並且安裝到專案內
    這個動作,僅需要做一次,之後,就不會再發生了

確認 Android 開發環境正常

  • 使用滑鼠右擊 Android 專案,選擇 設定為起始專案
    此時,您會看到工具列上方,會看到 Visual Studio 提供的可用模擬器,出現了
  • 使用滑鼠右擊 Android 專案,選擇 建置
  • 若可以成功完成 建置 動作,就表示您的 Android SDK 等環境設定完成,此時,便可以確認是否可以佈署到模擬器,並且測試是否可以進行除錯工作。
  • 點選工具列上的 綠色三角形,執行這個 Android 專案
  • 若模擬器成功啟動,且看到執行結果,則表示您的 Android 開發環境已經設定完成。

確認 UWP 開發環境正常

  • 使用滑鼠右擊 UWP 專案,選擇 設定為起始專案
  • 使用滑鼠右擊 UWP 專案,選擇 建置
  • 若可以成功完成 建置 動作,就表示您的 UWP SDK 等環境設定完成,此時,便可以確認是否可以佈署到模擬器,並且測試是否可以進行除錯工作。
  • 點選功能表 建置 > 組態管理員
  • 勾選 UWP 專案,可以建置與佈署
  • 也請勾選 iOS 專案,可以建置與佈署
  • 點選工具列上的 本機電腦 右邊的小黑色三角形,切換成為 Mobile Emulator 10.0.14939.0 720p 5 inch 1GB,這個模擬器,執行這個 UWP 專案
  • 若模擬器成功啟動,且看到執行結果,則表示您的 UWP 開發環境已經設定完成。

確認 iOS 開發環境正常

  • 首先需要讓您的 Visual Studio 與遠端的 Mac 電腦連線
  • 點選下方 輸出 視窗的上方,選擇 Xamarin
  • 點選工具列上的 Xamarin Mac Agent 圖示
  • 加入您 Mac 電腦的連線
  • 在與 Mac 電腦連線過程中,您可以從輸出視窗中,看到連線 Log
  • 若電腦圖示變成綠色,表示 Visual Studio 已經成功與 Mac 電腦連線成功 
  • 使用滑鼠右擊 iOS 專案,選擇 設定為起始專案
  • 切換 方案平台 為 iPhoneSimulator
  • 切換您要建置的模擬器本版
  • 使用滑鼠右擊 iOS 專案,選擇 建置
  • 若可以成功完成 建置 動作,就表示您的 iOS SDK 等環境設定完成,此時,便可以確認是否可以佈署到模擬器,並且測試是否可以進行除錯工作。
  • 點選工具列上的 綠色三角形,執行這個 iOS 專案
  • 若模擬器成功啟動,且看到執行結果,則表示您的 iOS 開發環境已經設定完成。

完成

恭喜您,你已經完成了 Visual Studio 2017 企業版 開發工具安裝,並且也具備了 Xamarin 開發環境。
整個開發環境,連同新安裝的作業系統,總共耗用了 50 GB 的空間。


I ♥ Xamarin

12 則留言:

  1. 您好,感謝您的分享,有個問題想請教您:
    我安裝Visual Studio 2017 Community 版本,但是我沒有看到 [Android 版 Visual Studio 模擬器]
    請問這要在哪裡安裝?

    回覆刪除
  2. 安裝畫面中,會看到有個 [個別元件] 標籤頁次,點選進去,在 模擬器 分類下,就會看到 Android 版 Visual Studio 模擬器

    回覆刪除
    回覆
    1. 可是,我在 [個別元件] 標籤頁次, 模擬器 的分類下,只有看到
      Google Android 模擬器(API層級23)
      Intel硬體加速執行管理器(HAXM)

      刪除
    2. 我剛剛啟動 VS2017 Community 的安裝程式,確實有看到這個選項呀,
      請參考該附圖
      https://content.screencast.com/users/vulcanlee/folders/Snagit/media/090dd8b2-1050-49ef-8c64-cf370c7f41c4/03.27.2017-13.03.png

      刪除
    3. 真的很神奇耶!
      我安裝的真的少了幾個....

      刪除
    4. 是沒有看到這個選項出現過嗎?

      刪除
    5. https://lh3.googleusercontent.com/-wVErzgThLfI/WNjRi2wAOBI/AAAAAAAAAAk/AB95jDT7A6E_q9AwaYXSfSXW3FsyzI1lwCJoC/w530-h460-p-rw/%25E5%259C%2596%25E7%2589%2587%2B1.jpg

      刪除
    6. 我試裝、重新下載,都沒有出現過

      刪除
  3. 我也沒有這個選項,會不會是我的windows 10版本是Home的關係?

    回覆刪除
  4. 你的電腦硬體有支援 Hyper-V 嗎?

    檢查需求
    Windows 10 企業版、專業版或教育版
    使用第二層位址轉譯 (SLAT) 的 64 位元處理器。
    CPU 對 VM 監視模式延伸模組的支援 (Intel CPU 上的 VT-c)。
    至少 4 GB 記憶體。

    https://docs.microsoft.com/zh-tw/virtualization/hyper-v-on-windows/quick-start/enable-hyper-v

    回覆刪除
  5. 匿名1/3/18

    沒有:[Android 版 Visual Studio 模擬器]
    可能改名稱了,
    因為有一個[Visual Studio 的 Android 模擬器]
    不知是否相同東西。
    https://imgur.com/seABZTZ

    回覆刪除