.NET Maui

.NET Maui 是一個跨平台的桌面與手機應用開發框架，它支援 iOS、Android、macOS、Windows。
不同於 Xamarin，.NET Maui 只需要一個專案便可以導向不同的平台。

架構

+ 一個 .NET Maui 專案底下，預設會有幾個資料夾與檔案，其關係如下圖： + `/Platforms` 底下的各個資料夾為不同平台的入口，不同的平台各有一個 `Program.cs`。 + 各個 `Program.cs` 內又會透過注入該 namespace 底下的 `AppDelegate` ，將入口指向 `MauiProgram` 的 `CreateMauiApp()`，就此將不同平台路由到 `MauiProgram.cs` 這個統一的入口。 ```Csharp public class Program { static void Main(string[] args) { UIApplication.Main(args, null, typeof(AppDelegate)); } }

[Register(“AppDelegate”)] public class AppDelegate : MauiUIApplicationDelegate { protected override MauiApp CreateMauiApp() => MauiProgram.CreateMauiApp(); }

+ 關係如下圖：
```mermaid
graph TD;
  iOS-->MauiProgram.cs;
  Android-->MauiProgram.cs;
  Windows-->MauiProgram.cs;
  macOS-->MauiProgram.cs;
  MauiProgram.cs-->App;
  App-->AppShell;
  AppShell-.->Page1;
  AppShell-.->Page2;
  AppShell-.->Page3;
  AppShell-.->Page4;

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
				fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
            });
        return builder.Build();
    }
}
public partial class App : Application
{
    public App()
    {
        InitializeComponent();
        MainPage = new AppShell();
    }
}

從上面兩段程式 MauiProgram.cs 與 App.xaml.cs 可以看出，這個統一的進入點會開啟 App，並將 AppShell 作為 MainPage 開放。

Router

在此可以發現 AppShell 作為一個 Controller 的功能，用來引導頁面的路由。
我們可以透過 RegisterRoute 來注冊要顯示的頁面。

public partial class AppShell : Shell
{
    public AppShell()
    {
        InitializeComponent();

        Routing.RegisterRoute(nameof(Page1), typeof(Page1));
        Routing.RegisterRoute(nameof(Page2), typeof(Page2));
        Routing.RegisterRoute(nameof(Page3), typeof(Page3));
    }
}

xaml

上述的頁面可以透過新增 xaml 檔來建立：
以下為一個 xaml 檔的 sample
- x:class="MoneyTrack.AppShell" 表示該檔案的路徑為 MoneyTrack.AppShell
- mlns 關鍵字很像是 using：
  - xmlns:views="clr-namespace:MoneyTrack.Views": 代表將 MoneyTrack.Views 這個路徑命名成 views。
- ShellContent 內代表是首頁要導引至的頁面，如下例會導向 view:MoneyTackPage

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
    x:Class="MoneyTrack.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MoneyTrack"
    xmlns:views="clr-namespace:MoneyTrack.Views"
    Shell.FlyoutBehavior="Disabled"
    Title="MoneyTrack">

    <ShellContent
        Title="Home"
        ContentTemplate="{DataTemplate views:MoneyTackPage}"
        Route="MoneyTackPage" />

</Shell>

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MoneyTrack.Views.ContactsPage"
             Title="Contacts">
    <VerticalStackLayout Spacing="5">
        <Label 
            Text="Welcome to .NET MAUI!"
            VerticalOptions="Center" 
            HorizontalOptions="Center" />
        <Button x:Name="btn1" Clicked="btn1_Clicked" Text="click1"></Button>
        <Button x:Name="btn2" Clicked="btn2_Clicked" Text="click2"></Button>
    </VerticalStackLayout>
</ContentPage>

Shell

接著我們可以透過 Shell 來控制面版上要顯示的頁面：

public void btnPage1_Clicked()
{
    Shell.Current.GoToAsync(nameof(Page1));
}

GoToAsync

Shell 本身是一個 View，也是一個 Layout
GoToAsync 可以用來切換頁面

void btnPage1_Clicked(object sender, EvertArgs e)
{
    Shell.Current.GoToAsync($"{nameof(Page1)}");  // 前往 Page1
}

void btnCancel_Clicked(object sender, EvertArgs e)
{
    Shell.Current.GoToAsync($"//{nameof(MainPage)}");  // 回到 MainPage
}

void btnCancel_Clicked(object sender, EvertArgs e)
{
    Shell.Current.GoToAsync($"..");  // 回到上一頁
}

QueryProperty

透過 QueryPropertyAttribute 可以達到如 http method 裡的 get 的方法。
以下範例等同於實現 page1?Id=1，在路由到 page1 的同時，將 property: Id 賦值。

[QueryProperty(nameof(PageId), "Id")]
public partial class Page1 : ContentPage
{
	public EditContactPage()
	{
		InitializeComponent();
	}
    public string ContactId
    {
        set
        {
            lblName.Text = Id;
        }
    }
}

[IT] .NET Maui