建置您的第一個適用於 Windows 的 .NET MAUI 應用程式

在 Windows 組建第一個跨平台應用程式，藉此熟悉 .NET MAUI 的實際操作。

簡介

在本教學課程中，您將瞭解如何在 Visual Studio 2022 (17.3 或之後的版本) 建立及執行第一個 Windows 適用的 .NET MAUI 應用程式。 我們將從 .NET Community 工具組新增幾項 MVVM工具組功能，改善預設專案的設計。

設定環境

如果您尚未設定 .NET MAUI 的開發環境，請按照步驟開始使用 Windows 的 .NET MAUI。

建立 .NET MAUI 專案

1. 啟動 Visual Studio，然後在起始視窗按一下 [建立新專案] 以建立新的專案：

2. 在「建立新專案」視窗的 [所有專案類型] 下拉式清單中選取 [MAUI]，然後選取 .NET MAUI 應用程式 範本，再按一下 [下一步] 按鈕：

3. 在「設定新專案」視窗上，為專案命名、選擇位置，然後按一下 [下一步] 按鈕：

4. 在「其他資訊」視窗中，按一下 [建立] 按鈕：

5. 等候專案建立，以及相依性還原：

6. 在 Visual Studio 工具列中，按下 [Windows 電腦] 按鈕以組建並執行應用程式。

7. 在執行中的應用程式按下 [按我] 按鈕數次，觀察按鈕點擊次數的計數遞增：

您已在 Windows 執行第一個 .NET MAUI 應用程式了。 在下一節中，您將瞭解如何將 MVVM工具組 的資料繫結和傳訊功能新增到您的應用程式。

疑難排解

如果您的應用程式無法編譯，請參閱已知問題的疑難排解，其中可能有您的問題適用的解決方案。

新增 MVVM 工具組

現在您已在 Windows 執行第一個 .NET MAUI 應用程式了，接著我們要將幾項 MVVM 工具組功能新增到專案，藉此改善應用程式的設計。

1. 在「方案總管」中，以滑鼠右鍵按一下專案，然後選取操作功能表中的 [管理 NuGet 套件...]。

2. 在「NuGet 套件管理員」視窗中，選取 [瀏覽] 索引標籤，然後搜尋「CommunityToolkit.MVVM」。

3. 按一下 [安裝]，藉此將 CommunityToolkit.MVVM 套件 (8.0.0 版或之後的版本) 的最新穩定版本新增到專案。

4. 在新套件完成安裝之後，關閉「NuGet 套件管理員」視窗。

5. 再次以滑鼠右鍵按一下專案，並從操作功能表中選取 [新增 | 類別]。

6. 在顯示的「新增項目」視窗中，將類別命名為 MainViewModel，然後按一下 [新增]：

7. MainViewModel 類別是 MainPage 的資料繫結目標。 將它更新為繼承 CommunityToolkit.Mvvm.ComponentModel 命名空間中的 ObservableObject。這個動作也需要將類別更新為 public 和 partial。

8. MainViewModel 類別將會包含下列程式碼。 CountChangedMessage 記錄定義了每次按一下 [按我] 按鈕時傳送的訊息，以通知檢視的變更。 新增至 message 和 IncrementCounter 成員的 ObservableProperty 和 RelayCommand 屬性是 MVVM 工具組提供的來源產生器，可建立 INotifyPropertyChanged 和 IRelayCommand 實作的 MVVM 重複使用程式碼。 IncrementCounter 方法的實作包含來自 MainPage.xaml.cs 中 OnCounterClicked 的邏輯，其中的變更所傳送的訊息內含新計數器訊息。 我們之後會移除該程式碼後置的程式碼。

using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using CommunityToolkit.Mvvm.Messaging;

namespace MauiOnWindows
{
    public sealed record CountChangedMessage(string Text);

    public partial class MainViewModel : ObservableObject
    {
        [ObservableProperty]
        private string message = "Click me";

        private int count;

        [RelayCommand]
        private void IncrementCounter()
        {
            count++;

            if (count == 1)
                message = $"Clicked {count} time";
            else
                message = $"Clicked {count} times";

            WeakReferenceMessenger.Default.Send(new CountChangedMessage(message));
        }
    }
}

注意

您必須更新上一個程式碼中的命名空間，才能與專案的命名空間相符。

9. 開啟 MainPage.xaml.cs 檔案進行編輯，並移除 OnCounterClicked 方法和 count 欄位。

10. 將下列程式碼新增到 MainPage 建構函式，位於 InitializeComponenent() 的呼叫後方。 此程式碼會在 MainViewModel 接收 IncrementCounter() 傳送的訊息，並以新訊息更新 CounterBtn.Text 屬性，然後宣告內含 SemanticScreenReader 的新文字：

WeakReferenceMessenger.Default.Register<CountChangedMessage>(this, (r, m) =>
{
    CounterBtn.Text = m.Text;
    SemanticScreenReader.Announce(m.Text);
});

11. 您也需要在類別中加入 using 陳述式：

using CommunityToolkit.Mvvm.Messaging;

12. 在 MainPage.xaml 中，將命名空間宣告新增至 ContentPage，以便找到 MainViewModel 類別：

xmlns:local="clr-namespace:MauiOnWindows"

13. 將 MainViewModel 新增為 ContentPage 的 BindingContext：

<ContentPage.BindingContext>
    <local:MainViewModel/>
</ContentPage.BindingContext>

14. 對 MainPage 更新 Button，讓它使用 Command，而不是處理 Clicked 事件。 此指令會繫結到 MVVM 工具組來源產生器所產生的 IncrementCounterCommand 公用屬性：

<Button
    x:Name="CounterBtn"
    Text="Click me"
    SemanticProperties.Hint="Counts the number of times you click"
    Command="{Binding Path=IncrementCounterCommand}"
    HorizontalOptions="Center" />

15. 再次執行專案，並檢查您按下按鈕時計數器是否仍會遞增：

16. 專案執行過程中，請嘗試更新第一個標籤中的「Hello, World!」訊息，讓它在 MainPage.xaml 顯示「Hello, Windows!」。 儲存檔案，並且注意，應用程式仍在執行時，XAML 熱重新載入更新了 UI：

下一步

瞭解如何利用 Windows 適用的 .NET MAUI 教學課程 中的 Graph SDK，組建可向使用者顯示 Microsoft Graph 資料的應用程式。

相關主題

.NET MAUI 學習資源

在 Windows 使用含有 .NET MAUI 的 Microsoft Graph API