建置您的第一個 應用程式
本文內容
在本教學課程中,您將瞭解如何在 Windows 或 Visual Studio 2022 for Mac 上的 Visual Studio 2022 中建立和執行第一個 .NET 多平臺應用程式 UI (.NET MAUI) 應用程式。 這有助於確保您的開發環境已正確設定。
必要條件
已安裝 .NET 多平臺應用程式 UI 工作負載的 Visual Studio 2022 17.8 或更高版本。 如需詳細資訊,請參閱 安裝 。
建立應用程式
在本教學課程中,您將在 Visual Studio 2022 中建立第一個 .NET MAUI 應用程式,並在 Android 模擬器上執行:
在 Windows 上開發適用於 iOS 的 .NET MAUI 應用程式需要 Mac 組建主機。 如果您不需要以 iOS 為目標,而且沒有 Mac,請考慮改為開始使用 Android 或 Windows。
在本教學課程中,您將在 Visual Studio 中建立第一個 .NET MAUI 應用程式,並在 iOS 模擬器上執行:
在本教學課程中,您將在 Visual Studio 2022 中建立第一個 .NET MAUI 應用程式,並在 Windows 上執行:
啟動 Visual Studio 2022。 在開始視窗中,按兩下 [建立新專案 ] 以建立新的專案:
在 [建立新專案] 視窗中,選取 [所有項目 類型] 下拉式清單中的 [MAUI ],選取 .NET MAUI 應用程式 範本,然後按兩下 [下一步 ] 按鈕:
在 [ 設定新專案] 視窗中,為您的專案 命名,選擇適合它的位置,然後按兩下 [ 下一步 ] 按鈕:
在 [ 其他資訊] 視窗中,選擇您想要設為目標的 .NET 版本,然後按兩下 [ 建立] 按鈕:
等候專案建立,以及還原其相依性:
在 Visual Studio 工具列中,使用 [偵錯目標 ] 下拉式清單選取 [Android 模擬器],然後選取 [Android 模擬器] 專案:
在 Visual Studio 工具列中 ,按 Android 模擬器 按鈕:
Visual Studio 會開始安裝預設的 Android SDK 和 Android 模擬器。
在 [ Android SDK - 許可協定] 視窗中,按 [ 接受 ] 按鈕:
在 [ Android SDK - 許可協定] 視窗中,按 [ 接受 ] 按鈕:
在 [ 用戶帳戶控制 ] 對話框中,按 [ 是 ] 按鈕:
在 [授權接受] 視窗中,按 [接受 ] 按鈕:
等候 Visual Studio 下載 Android SDK 和 Android Emulator。
在 Visual Studio 工具列中 ,按 Android 模擬器 按鈕:
Visual Studio 將會開始建立預設的 Android 模擬器。
在 [ 用戶帳戶控制 ] 對話框中,按 [ 是 ] 按鈕:
在 [ 新增裝置 ] 視窗中,按 [ 建立] 按鈕:
等候 Visual Studio 下載、解壓縮及建立 Android 模擬器。
關閉 [Android 裝置管理員 ] 視窗:
在 Visual Studio 工具列中,按 圖元 5 - API 34 (Android 14.0 - API 33) 按鈕來建置和執行應用程式:
Visual Studio 會啟動 Android 模擬器、建置應用程式,並將應用程式部署至模擬器。
在Android模擬器中執行的應用程式中,按下 [按下'按下 '按鈕數次,並觀察按鈕點擊次數的計數遞增。
疑難排解
如果您的應用程式無法編譯,請檢閱 針對已知問題 進行疑難解答,這可能會有問題的解決方案。 如果問題與 Android 模擬器有關,請參閱 Android 模擬器疑難解答 。
在 Visual Studio 工具列中,使用 [偵錯目標 ] 下拉式清單選取 [Framework],然後選取 net8.0-windows 專案:
在 Visual Studio 工具列中 ,按 [Windows 計算機 ] 按鈕來建置並執行應用程式:
如果您尚未啟用開發人員模式,Visual Studio 會提示您啟用它。 在 [啟用 Windows 開發人員模式] 對話框中,按兩下開發人員 的設定以開啟 設定 應用程式:
在 設定 應用程式中,開啟開發人員模式 並接受免責聲明:
關閉 設定 應用程式,然後關閉 [啟用 Windows 開發人員模式] 對話方塊。
在執行中的應用程式中,按下 [按下我 ] 按鈕數次,並觀察按鈕點選次數的計數遞增:
疑難排解
如果您的應用程式無法編譯,請檢閱 針對已知問題 進行疑難解答,這可能會有問題的解決方案。
在 Visual Studio 中,將 IDE 與 Mac 組建主機配對。 如需詳細資訊,請參閱 與Mac配對以進行iOS開發 。
在 Visual Studio 工具列中,使用 [ 偵錯目標 ] 下拉式清單選取 [iOS 模擬器],然後選取 特定的 iOS 模擬 器:
在 Visual Studio 工具列中,按所選 iOS 模擬器的 [開始] 按鈕,以建置並執行您的應用程式:
Visual Studio 會建置應用程式、啟動適用於 Windows 的遠端 iOS 模擬器,並將應用程式部署至遠端模擬器。 如需 Windows 遠端 iOS 模擬器的詳細資訊,請參閱 適用於 Windows 的遠端 iOS 模擬器。
在執行中的應用程式中,按下 [按下我 ] 按鈕數次,並觀察按鈕點擊次數的計數遞增。
疑難排解
如果您的應用程式無法編譯,請檢閱 針對已知問題 進行疑難解答,這可能會有問題的解決方案。
以 Mac Catalyst 為目標的 .NET MAUI 應用程式只能使用 Visual Studio 2022 for Mac 來啟動和偵錯。
必要條件
已安裝 .NET、.NET MAUI、Android 和 iOS 工作負載的 Visual Studio 2022 for Mac 17.6。 如需詳細資訊,請參閱 安裝 。
重要
若要搭配 .NET 8 使用 Visual Studio for Mac,請啟用 Visual Studio > 喜好 > 設定其他 > 預覽功能 > :如果已安裝 [需要重新啟動] 複選框,請使用 .NET 8 SDK。
建立應用程式
在本教學課程中,您將在 Visual Studio 2022 for Mac 中建立第一個 .NET MAUI 應用程式,並在您選擇的平台上執行:
啟動 Visual Studio 2022 for Mac。 在 [開始] 視窗中,按兩下 [ 新增 ] 以建立新的專案:
在 [ 選擇新專案的 範本] 視窗中,選取 [多平臺 > 應用程式 ],選取 .NET MAUI 應用程式 範本,然後按兩下 [ 繼續 ] 按鈕:
在 [ 設定新的 .NET MAUI 應用程式 ] 視窗中,選擇您想要設為目標的 .NET 版本,然後按兩下 [ 繼續 ] 按鈕:
在 [ 設定新的 .NET MAUI 應用程式 ] 視窗中,輸入 MyMauiApp 作為專案名稱、選取適合專案的位置,然後按兩下 [ 建立 ] 按鈕:
等候專案建立,以及還原其相依性:
如果您的 Mac 缺少 Android SDK 元件,Visual Studio 2022 for Mac 將會顯示資訊列。 點選 「 安裝」 按鈕以安裝 Android SDK:
在 [ Android SDK] 視窗中,選取 [ 自動 下載並安裝 Android 相依性] 複選框,然後按兩下 [ 下載並安裝 ] 按鈕:
在 [授權接受] 視窗中,按兩下 [接受 ] 按鈕:
等候 Visual Studio 2022 for Mac 下載 Android SDK:
在 Visual Studio 2022 for Mac 工具列中,將偵錯目標變更為 Android 模擬器 :
在 Visual Studio 2022 for Mac 工具列中,按 [播放 ] 按鈕來建置應用程式並嘗試啟動它:
Visual Studio 2022 for Mac 將會建置應用程式,然後建立預設的 Android 模擬器。
在 [ 新增裝置 ] 視窗中,按兩下 [ 建立] 按鈕:
在 [授權接受] 視窗中,按兩下 [接受 ] 按鈕:
等候 Visual Studio 2022 for Mac 下載並安裝 Android 模擬器。
關閉 [Android 裝置管理員 ] 視窗:
在 Visual Studio 2022 for Mac 工具列中,將偵錯目標變更為 Pixel 5 - API 34 (API 34) :
在 Visual Studio 2022 for Mac 工具列中,按 [播放 ] 按鈕以在 Android 模擬器中啟動應用程式:
Visual Studio 2022 for Mac 將會啟動 Android 模擬器、建置應用程式,並將應用程式部署至模擬器。
在 Android 模擬器中執行的應用程式中,按下 [按下 我 ] 按鈕數次,並觀察按鈕點擊次數的計數會遞增:
在 Visual Studio 2022 for Mac 工具列中,確定偵錯目標已設定為 iOS 模擬器:
在 Visual Studio 2022 for Mac 工具列中,按 [播放 ] 按鈕以在您選擇的 iOS 模擬器中啟動應用程式:
Visual Studio 2022 for Mac 將會啟動 iOS 模擬器、建置應用程式,並將應用程式部署至模擬器。
在執行中的應用程式中,按下 [按下我 ] 按鈕數次,並觀察按鈕點擊次數的計數遞增:
在 Visual Studio 2022 for Mac 工具列中,確定偵錯目標已設定為 My Mac (MacCatalyst) :
在 Visual Studio 2022 for Mac 中,以滑鼠右鍵按兩下 MyMauiApp 專案,然後選取 [編輯項目檔 ]。 然後,在專案檔編輯器中,於第一個 <ItemGroup>
之前插入下列 XML:
<PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Debug|net8.0-maccatalyst|AnyCPU'">
<RuntimeIdentifiers>maccatalyst-x64;maccatalyst-arm64</RuntimeIdentifiers>
</PropertyGroup>
在 Visual Studio 2022 for Mac 工具列中,按 [播放 ] 按鈕以在您的 Mac 上啟動應用程式:
Visual Studio 2022 for Mac 將會建置和部署應用程式。
在執行中的應用程式中,按下 [按下我 ] 按鈕數次,並觀察按鈕點擊次數的計數遞增:
以 Windows 為目標的 .NET MAUI 應用程式只能使用 Visual Studio 2022 啟動和偵錯。
注意
Visual Studio Code 中的 .NET MAUI 支援仍處於預覽狀態。 試試看並 分享您的意見 反應!
安裝延伸模組
請遵循指示 來設定適用於 Visual Studio Code 的 .NET MAUI 擴充功能。
建立應用程式
若要建立新的 .NET MAUI 應用程式:
按兩下 [總管] 中的 [建立 .NET 專案 ],或>CTRL/CMD+SHIFT+P
[.NET:新增專案...]。
選取 [.NET MAUI 應用程式 ] 或 [.NET MAUI Blazor 應用程式 ]。
選取空白 資料夾。 如果檔案總管再次開啟,您的資料夾不是空的。
命名專案。
請確定專案在 方案總管 中順利載入,然後開啟 C# 或 XAML 檔案。
您也可以透過>檔案開啟... ,在 Visual Studio Code 中開啟現有的 .NET MAUI 專案。
您現在應該會在 Visual Studio Code 的 C# 開發工具包 方案總管 中看到您的應用程式。 由於 .NET MAUI 擴充功能相依於 C# 開發工具包,因此您可以搭配 .NET MAUI 擴充功能使用 其所有功能 。
選擇您的目標裝置
按兩下 Visual Studio Code 右下角的大括弧符號 { }
。 您可以在這裡變更啟動專案、將偵錯目標變更為開發電腦上的任何有效專案,並將任一設定釘選到 Visual Studio Code 狀態列:
您也可以在命令選擇區中設定啟動專案和偵錯目標,並使用 CTRL/CMD+SHIFT+P
並搜尋 “.NET MAUI”。
根據預設,您可以部署到本機 macOS 或 Windows 開發電腦。 在macOS上,您也可以部署至iOS模擬器。
如果您想要使用 Android 模擬器,請遵循下列步驟:
在終端機中瀏覽至 <YOUR_ANDROID_SDK_DIRECTORY>/cmdline-tools/latest/bin/
。
在 Windows 或 macOS 上執行 sdkmanager --install emulator
和 sdkmanager --install system-images;android-33;google_apis;x86_64
./sdkmanager --install system-images;android-33;google_apis;x86_64
。./sdkmanager --install emulator
然後,您可以使用 Android 的 avdmanager 在命令行上建立新的模擬器 。 例如,您可以在 Windows 或 ./avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64"
macOS 上執行avdmanager create avd -n MyAndroidVirtualDevice-API33 -k "system-images;android-33;google_apis;x86_64"
。
您也可以在實體 Android 裝置上進行偵錯 。
偵錯應用程式
若要對應用程式進行偵錯,請流覽至 Visual Studio Code 的 [執行和偵錯 ] 功能表,然後選取 [執行和偵錯] 按鈕。 或者,您可以使用 F5
來啟動偵錯會話。 如果 Visual Studio Code 提示您選取除錯程式,請確定您選取 「.NET MAUI」。。
調試程式會自動選擇您在大括弧 { }
功能表中設定的 [偵錯目標] 和 [啟動專案]。 如果您尚未選取任何專案,則會提示您選擇偵錯目標。
您的應用程式開始偵錯之後,您可以使用內建的 Visual Studio Code 偵錯工具來設定斷點、逐步執行程式代碼等等 。
深入了解
如果您遇到擴充功能的任何問題,您可以遵循 疑難解答步驟 、查看已知 問題 或 提供意見反應 。
下一步
在本教學課程中,您已瞭解如何建立並執行您的第一個 .NET 多平台應用程式 UI (.NET MAUI) 應用程式。
若要瞭解使用 .NET MAUI 建置應用程式的基本概念,請參閱 建立 .NET MAUI 應用程式 。 或者,如需完整的 .NET MAUI 訓練課程,請參閱 使用 .NET MAUI 建置行動和桌面應用程式。