Maui

.NET Maui .NET Maui 是一個跨平台的桌面與手機應用開發框架，它支援 iOS、Android、macOS、Windows。 不同於 Xamarin，.NET Maui 只需要一個專案便可以導向不同的平台。 架構 一個 .NET Maui 專案底下，預設會有幾個資料夾與檔案，其關係如下圖： /Platforms 底下的各個資料夾為不同平台的入口，不同的平台各有一個 Program.cs。 各個 Program.cs 內又會透過注入該 namespace 底下的 AppDelegate ，將入口指向 MauiProgram 的 CreateMauiApp()，就此將不同平台路由到 MauiProgram.cs 這個統一的入口。 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(); } 關係如下圖： 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; } } }