.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 鍵。
如有提示，請允許安裝程式自行更新。
If an update for Visual Studio 2022 is available, an Update button will be shown. Select it to update before modifying the installation. This tutorial only works with Visual Studio 2022 17.12 and later versions.
尋找您的 Visual Studio 2022 安裝，然後選取 [修改]。
選取 [.NET Multi-platform App UI 開發]。
選取 [修改] 按鈕。

Download and install the .NET SDK. After the download completes, launch the download to begin the install.

Download .NET 9 SDK x64 (Intel)
Download .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 的最新版本

To find the latest version of Xcode that is compatible with .NET MAUI, check this release version reference. Go to the Apple Tools column to find the latest compatible Xcode version.

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 為專案名稱，然後按一下 [下一步] 按鈕。
In the Additional information window, select .NET 9.0 in the Framework drop-down if not already selected and click the Create button.

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]。