什么是 .NET MAUI？

.NET Multi-platform App UI (.NET MAUI) 是微軟推出的新一代跨平臺UI框架，是Xamarin.Forms的繼任者。它允許開發者使用單一的代碼庫和項目結構，創建可在Android、iOS、macOS和Windows上運行的本地應用程序。.NET MAUI采用C#和XAML作為開發語言，為開發者提供了統一的編程模型和API，簡化了跨平臺應用開發流程。

MAUI的核心特點

1. 單一項目結構：不同于Xamarin.Forms的多項目解決方案，MAUI采用單一項目結構，簡化了開發和維護過程。
2. 統一控件：提供一套統一的控件庫，這些控件在不同平臺上保持一致的行為和外觀。
3. 平臺特定API集成：允許直接從共享代碼中訪問平臺特定API，無需編寫自定義渲染器。
4. 現代化架構：基于.NET 6及更高版本構建，支持最新的C#特性。
5. 原生性能：應用程序編譯為平臺原生代碼，提供接近原生的性能體驗。

上圖出自微軟官方學習路線

與Xamarin.Forms的區別

主要改進點包括：

1. 項目結構：從多項目結構簡化為單一項目結構
2. 渲染系統：從渲染器架構升級為更靈活的處理程序架構
3. 構建系統：整合到.NET統一構建系統中
4. 依賴注入：內置現代依賴注入框架
5. 生命周期管理：改進的應用和頁面生命周期管理
6. 熱重載：增強的XAML熱重載支持

開發環境搭建

要開始.NET MAUI開發，需要設置適當的開發環境。以下是詳細的步驟：

安裝Visual Studio 2022

Visual Studio 2022是開發MAUI應用的首選IDE，它提供了完整的工具集和集成支持。

1. 下載并安裝Visual Studio 2022（推薦使用Community或更高版本）

安裝Visual Studio 2022可以參考博文對于C#初學者在學習前的準備

2. 在安裝過程中，選擇".NET Multi-platform App UI開發"工作負載

安裝必要組件

在Visual Studio安裝程序中，確保以下組件被選中：

1. .NET MAUI（必選）
2. Android SDK設置（適用于Android開發）
3. iOS和MacOS開發工具（適用于iOS/MacOS開發）
4. 通用Windows平臺開發（適用于Windows開發）

配置Android開發環境

要開發Android應用，需要完成以下設置：

1. 安裝Android SDK：默認情況下，Visual Studio會安裝必要的Android SDK
2. 配置Android模擬器：
   • 打開Visual Studio中的"Android設備管理器"
   • 創建新的設備映像（推薦API 30或更高版本）
   • 配置模擬器性能選項
     
     打開樣式如下
     

當我們存在項目時調試時就可以直接運行

無法創建模擬器時參考如何使用Android模擬器（Hyper-V和AEHD）啟用硬件加速
如果模擬器無法使用可以嘗試使用真機調試（在手機中打開開發者模式）

3. 配置真機調試（可選）：
   • 在Android設備上啟用"開發者選項"和"USB調試"
   • 安裝適當的USB驅動程序
   • 通過USB連接設備并允許調試

調試時可以打開xaml實時預覽窗口進行查看

配置iOS開發環境

iOS開發需要一臺Mac計算機和以下組件：

1. 安裝最新版Xcode：從Mac App Store下載并安裝
2. 設置遠程配對：
   • 在Mac上安裝Apple的遠程工具
   • 在Visual Studio中配置Mac連接

如果您使用Mac開發，則可以直接在Mac上安裝Visual Studio for Mac并進行MAUI開發。

驗證安裝

完成安裝后，可以通過以下步驟驗證環境：

// 在命令行運行以下命令以檢查.NET MAUI工作負載是否正確安裝
dotnet workload list
// 應該能看到maui工作負載已安裝的信息

創建第一個MAUI應用

讓我們創建一個簡單的Hello World應用來理解MAUI項目結構和基本概念。

創建新項目

1. 打開Visual Studio 2022
2. 選擇"創建新項目"
3. 在搜索框中輸入"MAUI"
4. 選擇".NET MAUI應用"模板
5. 點擊"下一步"
6. 輸入項目名稱（例如"MauiHelloWorld"）

注意創建MAUI項目目錄時不要包含中文

7. 選擇保存位置
8. 點擊"創建"

MAUI項目結構解析

創建的MAUI項目有以下主要文件和文件夾：

MauiHelloWorld/
│
├── Platforms/            # 平臺特定代碼
│   ├── Android/         # Android特定代碼
│   ├── iOS/             # iOS特定代碼
│   ├── MacCatalyst/     # MacOS特定代碼
│   └── Windows/         # Windows特定代碼
│
├── Resources/            # 應用資源
│   ├── AppIcon/         # 應用圖標
│   ├── Fonts/           # 字體文件
│   ├── Images/          # 圖像資源
│   ├── Raw/             # 其他資源
│   └── Styles/          # 樣式定義
│
├── App.xaml              # 應用定義文件
├── App.xaml.cs           # 應用代碼
├── AppShell.xaml         # Shell UI定義
├── AppShell.xaml.cs      # Shell UI代碼
├── MainPage.xaml         # 主頁面UI定義
├── MainPage.xaml.cs      # 主頁面代碼
└── MauiProgram.cs        # 應用配置和啟動

理解關鍵文件

1. MauiProgram.cs：應用程序的入口點，配置服務和應用生命周期

public static class MauiProgram
{public static MauiApp CreateMauiApp(){// 創建MauiApp構建器var builder = MauiApp.CreateBuilder();// 配置應用程序builder.UseMauiApp<App>() // 使用App類作為主應用程序類.ConfigureFonts(fonts =>{// 配置應用程序字體fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");});// 在這里注冊服務（依賴注入）// builder.Services.AddSingleton<IMyService, MyService>();// 構建并返回MauiApp實例return builder.Build();}
}

2. App.xaml/App.xaml.cs：定義應用程序資源和應用程序級行為

<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:local="clr-namespace:MauiHelloWorld"x:Class="MauiHelloWorld.App"><Application.Resources><ResourceDictionary><!-- 應用級資源和樣式 --><ResourceDictionary.MergedDictionaries><ResourceDictionary Source="Resources/Styles/Colors.xaml" /><ResourceDictionary Source="Resources/Styles/Styles.xaml" /></ResourceDictionary.MergedDictionaries></ResourceDictionary></Application.Resources>
</Application>

public partial class App : Application
{public App(){InitializeComponent();// 設置應用程序的主頁面MainPage = new AppShell();}// 應用程序生命周期方法protected override void OnStart(){// 當應用啟動時調用base.OnStart();}protected override void OnSleep(){// 當應用進入后臺時調用base.OnSleep();}protected override void OnResume(){// 當應用從后臺恢復時調用base.OnResume();}
}

3. AppShell.xaml/AppShell.xaml.cs：定義應用程序的Shell架構（導航結構）

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"xmlns:local="clr-namespace:MauiHelloWorld"x:Class="MauiHelloWorld.AppShell"Title="MauiHelloWorld"><!-- 定義應用程序的Shell結構，這里是一個簡單的單頁面應用 --><ShellContent Title="Home"ContentTemplate="{DataTemplate local:MainPage}"Route="MainPage" />
</Shell>

4. MainPage.xaml/MainPage.xaml.cs：應用程序的主頁面

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"x:Class="MauiHelloWorld.MainPage"><ScrollView><VerticalStackLayout Spacing="25" Padding="30"><Image Source="dotnet_bot.png"HeightRequest="185"SemanticProperties.Description="The .NET Bot mascot" /><Label Text="Hello, World!"FontSize="32"HorizontalOptions="Center" /><Label Text="Welcome to .NET MAUI!"FontSize="18"HorizontalOptions="Center" /><Button x:Name="CounterButton"Text="Click me"Clicked="OnCounterClicked"HorizontalOptions="Center" /></VerticalStackLayout></ScrollView>
</ContentPage>

public partial class MainPage : ContentPage
{// 計數器變量private int _count = 0;public MainPage(){InitializeComponent();}// 按鈕點擊事件處理方法private void OnCounterClicked(object sender, EventArgs e){// 增加計數器值_count++;// 根據計數值更新按鈕文本if (_count == 1)CounterButton.Text = $"Clicked {_count} time";elseCounterButton.Text = $"Clicked {_count} times";// 屏幕閱讀器宣布文本變化（輔助功能支持）SemanticScreenReader.Announce(CounterButton.Text);}
}

運行應用程序

創建項目后，可以選擇目標平臺并運行應用程序：

1. 在Visual Studio頂部工具欄中，從調試目標下拉列表選擇平臺：

   • Windows Machine（Windows）
   • Android Emulator（Android）
   • Local Device（iOS，需要Mac連接）

2. 點擊綠色的"運行"按鈕或按F5啟動應用程序

3. 應用程序將在所選平臺上編譯和運行

簡單修改示例

讓我們對默認應用程序做一些簡單的修改，以了解MAUI開發流程：

1. 添加自定義UI元素：

<!-- 在VerticalStackLayout中添加一個滑塊控件 -->
<Slider x:Name="OpacitySlider" Minimum="0" Maximum="1" Value="1"ValueChanged="OnOpacityChanged"Margin="0,20,0,0" /><Label Text="調整透明度"HorizontalOptions="Center" />

2. 添加相應的代碼邏輯：

// 在MainPage.xaml.cs中添加滑塊值變化處理方法
private void OnOpacityChanged(object sender, ValueChangedEventArgs e)
{// 獲取滑塊當前值（0到1之間）double newValue = e.NewValue;// 將滑塊值應用到圖像的透明度if (sender is Slider slider){// 查找Image控件并設置其Opacity屬性var image = this.FindByName<Image>("dotnet_bot");if (image != null){image.Opacity = newValue;}}
}

使用熱重載

.NET MAUI支持熱重載功能，允許在應用運行時實時查看XAML更改：

1. 運行應用程序
2. 在XAML文件中修改UI（例如更改文本、顏色或布局）
3. 保存文件，更改將立即反映在運行的應用程序中

MAUI應用生命周期

了解MAUI應用的生命周期對于正確管理資源和用戶體驗至關重要。

應用程序生命周期

MAUI應用生命周期由以下關鍵事件定義：

1. OnCreate/構造函數：應用程序初始化時調用
2. OnStart：應用程序變為活動狀態時調用
3. OnSleep：應用程序進入后臺時調用
4. OnResume：應用程序從后臺恢復時調用

頁面生命周期

每個頁面也有自己的生命周期事件：

1. OnAppearing：頁面即將顯示時調用
2. OnDisappearing：頁面即將隱藏時調用

public partial class MyPage : ContentPage
{public MyPage(){InitializeComponent();}// 頁面即將顯示時調用protected override void OnAppearing(){base.OnAppearing();Console.WriteLine("頁面正在顯示");// 可以在此處加載數據或初始化UILoadData();}// 頁面即將隱藏時調用protected override void OnDisappearing(){base.OnDisappearing();Console.WriteLine("頁面正在隱藏");// 可以在此處保存數據或清理資源SaveData();}private void LoadData(){// 加載數據的邏輯}private void SaveData(){// 保存數據的邏輯}
}

常見控件和布局

MAUI提供了豐富的控件和布局系統，以下是一些常用的UI元素：

常用控件

布局容器

MAUI提供了多種布局容器，用于組織UI元素：

1. StackLayout：垂直或水平排列元素
2. Grid：在行和列中排列元素
3. FlexLayout：靈活排列元素，類似CSS Flexbox
4. AbsoluteLayout：使用絕對坐標定位元素
5. RelativeLayout：相對于其他元素或父容器定位元素

布局示例

以下是使用Grid布局的示例：

<Grid RowDefinitions="Auto,*,Auto"ColumnDefinitions="*,*"><!-- 占據第一行，跨越兩列 --><Label Text="標題文本" Grid.Row="0" Grid.ColumnSpan="2"HorizontalOptions="Center"FontSize="24"Margin="0,20,0,0" /><!-- 第二行第一列 --><Image Source="image1.png"Grid.Row="1"Grid.Column="0"Aspect="AspectFit"Margin="20" /><!-- 第二行第二列 --><Image Source="image2.png"Grid.Row="1"Grid.Column="1"Aspect="AspectFit"Margin="20" /><!-- 第三行，跨越兩列 --><Button Text="確認"Grid.Row="2"Grid.ColumnSpan="2"Margin="20"HorizontalOptions="Center" />
</Grid>

小結與后續學習路徑

本文介紹了.NET MAUI的基礎知識，包括：

• MAUI的定義與特點
• 與Xamarin.Forms的區別與改進
• 開發環境搭建
• 創建和運行第一個MAUI應用
• 項目結構和關鍵文件
• 應用和頁面生命周期
• 常見控件和布局

這些知識為開始MAUI開發提供了堅實的基礎。要成為熟練的MAUI開發者，還需要：

1. 深入XAML：掌握XAML語法、樣式和資源系統
2. 數據綁定與MVVM：學習數據綁定和MVVM架構模式
3. 導航與Shell：掌握頁面導航和Shell框架
4. 本地數據存儲：學習使用SQLite等技術存儲數據
5. Web服務集成：掌握HTTP請求和REST API調用
6. 平臺特定功能：學習如何訪問設備功能和平臺特定API

學習資源

以下是一些有用的.NET MAUI學習資源：

1. .NET MAUI官方文檔
2. Microsoft Learn MAUI課程
3. .NET MAUI GitHub倉庫
4. MAUI社區工具包
5. MAUI示例應用

通過這些資源和實踐，您將能夠掌握.NET MAUI并創建出色的跨平臺應用程序。