使用 .NET MAUI 建立移動應用——Get Start

張飛洪[廈門]發表於2022-06-14

大家好，我是張飛洪，感謝您的閱讀，我會不定期和你分享學習心得，希望我的文章能成為你成長路上的墊腳石，讓我們一起精進。

1、IDE下載安裝

如果你還沒安裝Visual Studio 2022 預覽版

你可以點選下載

在安裝過程中，應選擇.NET 跨平臺應用程式 UI 開發，如下圖所示：

已經擁有 Visual Studio 2022 預覽版

如果您已經擁有 Visual Studio 2022 預覽版，則可以更新以新增 .NET MAUI 支援。

2、建立應用

開啟 Visual Studio 2022 預覽版。
選擇建立新專案按鈕。
從專案型別下拉選單中選擇MAUI 。
選擇.NET MAUI App模板並選擇下一步按鈕。

輸入MyFirstMauiApp作為專案名稱並選擇Create按鈕。

還原 NuGet 包

等待NuGet 自動還原應用程式的依賴項，等到螢幕左下方的狀態列中出現已恢復或就緒訊息。

3、執行應用

本教程將重點介紹首先將 .NET MAUI 應用程式部署到本地 Windows 計算機。稍後，您可以選擇設定 Android 裝置或模擬器。

為開發設定 Windows

要開發 Windows 應用程式，您需要啟用開發人員模式以在 Windows 11 或 Windows 10 上旁載入應用程式。

啟用開發者模式

在 Windows 上，轉到“設定”應用程式。
在 Windows 11 上的隱私和安全和 Windows 10 上的更新和安全中搜尋開發人員設定。
開啟Developer Mode下的切換開關。

4.將顯示使用開發人員功能對話方塊。選擇“是”以確認您要啟用開發者模式。

在 Windows 上執行

現在已準備好執行 .NET MAUI 應用並將其部署到 Windows。在工具欄中，預設將Windows 機器視為除錯目標。

選擇“除錯” > “開始除錯F5”（或按）

4、編輯程式碼

使用 .NET MAUI 開發時，可以在除錯時使用 XAML 熱過載。這意味著您可以在執行時更改 XAML 使用者介面， UI 將自動更新。

在解決方案資源管理器中，雙擊專案MainPage.xaml下的檔案MyFirstMauiApp。

目前，Text第一個Label設定為Hello, World!如下程式碼所示：

<Label
    Text="Hello, World!" 
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" >

將文字更新為Hello, .NET MAUI!：

<Label
    Text="Hello, .NET MAUI!" 
    SemanticProperties.HeadingLevel="Level1"
    FontSize="32"
    HorizontalOptions="Center" >

UI 會自動更新:

使用 .NET MAUI 開發時，還可以使用 .NET Hot Reload 重新載入 C# 程式碼。我們修改程式中的邏輯，將計數增加 10 而不是 1。

開啟MainPage.xaml.cs（此檔案巢狀在 MainPage.xaml 下，或者您可以右鍵單擊並從選單中選擇檢視程式碼）。

該OnCounterClicked檔案上的方法當前具有以下程式碼：

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++;以增加 10 count += 10;

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);
}