.NET MAUI 教學課程 - 使用 C# 的第一個多平台應用程式

簡介

目的

設定您的開發環境，並建置您的第一個 .NET Multi-Platform App UI (.NET MAUI) 應用程式。

必要條件

檢查 Visual Studio 2022 的系統需求。

完成時間

10分鐘 + 下載/安裝時間

情節

在 Windows 和 Android 上執行且會顯示 Hello, World! 訊息的手機與傳統型應用程式。

下載並安裝

下載並安裝 Visual Studio 2022。

下載 Visual Studio 2022

在安裝期間，應選取 [.NET Multi-platform App UI 開發] 工作負載。使用上述連結應正確預先選擇所有必要條件，如下圖所示:

已經有 Visual Studio 2022 了嗎?

如果您已經有 Visual Studio 2022，請確認它是最新的，並已安裝必要的工作負載：

選取 Windows 鍵，輸入 Visual Studio 安裝程式，然後按 Enter 鍵。
如有提示，請允許安裝程式自行更新。
如果有 Visual Studio 2022 的更新，則會顯示 [更新] 按鈕。選取它以在修改安裝之前更新。此教學課程僅適用於 Visual Studio 2022 17.12 及更新版本。
尋找您的 Visual Studio 2022 安裝，然後選取 [修改]。
選取 [.NET Multi-platform App UI 開發]。
選取 [修改] 按鈕。

下載並安裝 .NET SDK。下載完成後，啟動下載以開始安裝。

下載 .NET 9 SDK x64 (Intel)
下載 .NET 9 SDK Arm64 (Apple Silicon)

如果您使用的 Mac 上有 Apple M1 或 M2 晶片，則必須安裝 Arm64 版本的 SDK。
下載並安裝 VS Code:

下載 VS Code
開啟 VS Code 並選取 VS Code 活動列左側的 [擴充] 按鈕。在搜尋列中輸入 MAUI，選取 [.NET MAUI]，然後在.NET MAUI 擴充頁面上選取 [安裝] 按鈕。

此擴充隨附 C# 開發套件和 C# 延伸模組，需要這些擴充才能執行.NET MAUI 擴充。
開啟新的終端，並執行下列命令以安裝 .NET MAUI 工作負載：
Terminal
```
sudo dotnet workload install maui
```
如果安裝成功，您應該會看到類似下列的輸出:
Terminal
```
Successfully installed workload maui
```

檢查是否已正確安裝所有項目

一旦設定您的環境後，請開啟新的 VS Code 終端。在工具列中，依序選取 [終端]，[新增終端]。

在您的終端中執行下列命令，以檢查安裝。

Terminal

dotnet workload list

如果安裝成功，您應該會看到類似下列的輸出:

Terminal

Installed Workload Id      Manifest Version      Installation Source
--------------------------------------------------------------------
maui                       8.0.82/8.0.100        SDK 8.0.400

Use `dotnet workload search` to find additional workloads to install.

發生錯誤嗎?

如果您收到 [無法將 'dotnet' 辨識為內部或外部命令] 錯誤，請確定已開啟新的 VS Code 終端。如果重新啟動 VS Code 或 重新啟動您的機器都無法解決問題，請使用此頁面下方的 [我遇到問題] 按鈕以尋求解決問題的協助。

安裝 Xcode

若要建置 .NET MAUI 應用程式，您也需要:

Xcode 的最新版本

若要尋找與 .NET MAUI 相容的最新版 Xcode，請查看此發行版本參考。請前往 [Apple 工具] 欄，尋找最新的相容 Xcode 版本。
Apple ID

如果您還沒有 Apple ID，您可以在 https://appleid.apple.com 建立新的 ID。您必須有 Apple ID，才可安裝並登入 Xcode。
安裝 Xcode 之後，您必須開啟 Xcode 並同意授權合約，然後安裝選用元件 (如果系統提示)。
如果系統詢問您要開發的平台，請選取 [macOS 與 iOS] 平台，然後選取 [下載與安裝]。
開啟新的終端，並執行下列命令來安裝 Xcode 命令列開發人員工具：
Terminal
```
xcode-select --install
```
當系統提示安裝 Xcode 命令列開發人員工具時，請選取 [安裝]。最後，請同意授權合約。

如果一切順利，請選取下方的 [繼續] 按鈕以移至下一個步驟。

建立您自己的應用程式

建立新的 .NET MAUI 應用程式:

開啟 Visual Studio 2022。
選取 [建立新專案] 按鈕。
在 [建立新專案] 視窗中，在搜尋列上輸入 [MAUI 應用程式]。選取 [.NET MAUI 應用程式] 範本，然後按一下 [下一個] 按鈕。
在 [設定新專案]視窗中，輸入 MyFirstMauiApp 為專案名稱，然後按一下 [下一步] 按鈕。
如果尚未選取，請在 [其他資訊] 視窗中，在 [Framework] 下拉式清單中選取 [.NET 9.0]，然後按一下 [建立]　按鈕。

Visual Studio 建立新專案。如果您收到 Windows 安全性警告，警告您防火牆封鎖某些功能，請選取 [[允許存取] 按鈕。

等候 NuGet 套件還原流程

NuGet 是套件管理員，會帶來您新的應用程式的依賴性。

套件還原程序將會自動開始。請等待畫面左下角的狀態列中出現 [已還原] 或 [已就緒] 訊息。

執行您的應用程式

本教學課程將著重於先將 .NET MAUI 應用程式部署到本機 Windows 機器。之後，您可以選擇設定 Android 裝置或模擬器。

在 Visual Studio 工具列中，根據預設，您應將 Windows 電腦視為偵錯目標。請按下 [Windows 電腦] 按鈕以建置及執行應用程式:

在執行中的應用程式中，選取 [按我] 按鈕數次，並觀察按鈕點擊次數的計數為遞增:

恭喜，您已建置並執行您的第一個 .NET MAUI 應用程式！讓應用程式繼續執行並繼續教學課程。

編輯您的程式碼

使用.NET MAUI 開發應用程式時，當您對應用程式進行偵錯時，可以使用 XAML 熱重新載入。這表示您可以在應用程式執行時變更 XAML 使用者介面 (UI)，而且 UI 將會自動更新。

返回 Visual Studio 並讓應用程式繼續執行。在 [方案總管] 中，按兩下 MyFirstMauiApp 專案下的 MainPage.xaml 檔案。如果您沒有看到 [方案總管] 窗格，請從主功能表選取 [檢視] > [方案總管] (或按 CTRL+ALT+L)。

如下列程式碼所示，目前第 17 行第二個 Label 的 Text 是設定為 Hello, World!:

MainPage.xaml

<Label
    Text="Hello, World!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

更新文字以顯示 Hello, .NET MAUI!:

MainPage.xaml

<Label
    Text="Hello, .NET MAUI!" 
    Style="{StaticResource Headline}"
    SemanticProperties.HeadingLevel="Level1"  />

當您進行變更時，應用程式 UI 會自動更新。

使用 .NET MAUI 開發應用程式時，您也可以使用 .NET 熱重新載入來重新載入 C# 程式碼。讓我們來修改應用程式中的邏輯，以在按一下按鈕時將計數增加 10 而非 1。

開啟 MainPage.xaml.cs (此檔案是巢狀在 MainPage.xaml 下，或者您可以在功能表上按一下滑鼠右鍵並選取 [檢視程式碼])。

該檔案中的 OnCounterClicked 方法目前具有下列程式碼:

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count++;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

將 count++; 變更為 count += 10;，以遞增 10。

MainPage.xaml.cs

private void OnCounterClicked(object sender, EventArgs e)
{
    count += 10;

    if (count == 1)
        CounterBtn.Text = $"Clicked {count} time";
    else
        CounterBtn.Text = $"Clicked {count} times";

    SemanticScreenReader.Announce(CounterBtn.Text);
}

若要套用程式碼變更，請選取 Visual Studio 中的 [熱重新載入] 按鈕，或選取 [ALT+F10]。