MAUI Blazor 專案實戰
前言
最近在專案中嚐鮮了MAUI，總體感受下來還是挺不錯的，優缺點並存，但是瑕不掩瑜，目前隨著.Net版本的迭代升級對它的支援也越來越友好，相信未來可期！感興趣的朋友歡迎關注。文章中如有不妥的地方，也請多多指教。
專案效果圖
什麼是.NET MAUI？
網上關於MAUI介紹相關的內容也挺多的了，這裡只做簡單介紹。瞭解更多
.NET 多平臺應用 UI (.NET MAUI) 是一個跨平臺框架，用於使用 C# 和 XAML 建立本機移動和桌面應用。
使用 .NET MAUI，可從單個共用程式碼庫開發可在 Android、iOS、macOS 和 Windows 上執行的應用。
什麼是Blazor Hybrid？
Blazor Hybrid(混合)，可以通過它在 ASP.NET Core 應用中使用 .NET 生成互動式使用者端 Web UI。
使用 Blazor Hybrid 將桌面和移動本機使用者端框架與 .NET 和 Blazor 結合使用。
在 Blazor Hybrid 應用中，Razor 元件在裝置上本機執行。 元件通過本地互操作通道呈現到嵌入式 Web View 控制元件。 元件不在瀏覽器中執行，並且不涉及 WebAssembly。 Razor 元件可快速載入和執行程式碼，元件可通過 .NET 平臺完全存取裝置的本機功能。
Blazor Hybrid 應用與MAUI
Blazor Hybrid 支援內建於 MAUI 框架 。.NET MAUI 包含 BlazorWebView 控制元件，該控制元件執行將 Razor 元件 呈現到嵌入式 Web View 中。 通過結合使用 .NET MAUI 和 Blazor，可以跨移動裝置、桌面裝置和 Web 重複使用一組 Web UI 元件。
專案准備
- .Net 7
- Visual Studio 2022
專案搭建
MultiPlatform.Blazor
MultiPlatform.Maui 
MultiPlatform.Server
整個專案結構如下：
專案整體思路就是將Blazor UI樣式抽離至 MultiPlatform.Blazor（Razor類庫）專案中，MultiPlatform.Maui（安卓、IOS等）專案用來構建多端應用，MultiPlatform.Server 則用來跑Web，可以方便我們調整樣式。
1.抽離 MultiPlatform.Maui UI 至 MultiPlatform.Blazor
- 新增 MultiPlatform.Blazor 專案參照
- 檔案抽離過去後注意調整名稱空間，直接調整 MultiPlatform.Blazor 專案的 _Imports.razor即可。
@using Microsoft.AspNetCore.Components.Web
@using MultiPlatform.Blazor.Shared
@using Microsoft.AspNetCore.Components.Routing
@using MultiPlatform.Blazor.Data
- 因為我們將Main.razor檔案抽離到了 MultiPlatform.Blazor，所以我們還需要調整 MultiPlatform.Maui專案中的 MainPage.xaml 檔案：（相關知識點參考）
BlazorWebView 專案模板建立的 在 MainPage.xaml 中定義，並指向 Blazor 應用的根：
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MultiPlatform.Maui"
x:Class="MultiPlatform.Maui.MainPage"
BackgroundColor="{DynamicResource PageBackgroundColor}">
<BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
<BlazorWebView.RootComponents>
<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
</ContentPage>
應用的根 Razor 元件 位於 Main.razor 中，Razor 將其編譯為應用程式根名稱空間中名為 Main 的型別。 其餘 Razor 元件位於頁面和共用專案資料夾中，與預設 Blazor Web 模板中使用的元件相同。 應用的靜態 Web 資產位於 wwwroot 資料夾中。
2.調整 MultiPlatform.Server專案
1.移除 MultiPlatform.Server的 MainLayout 檔案
2.更改App.razor 檔案，使用 AdditionalAssemblies 載入 MultiPlatform.Blazor 程式集
3.新增 MultiPlatform.Blazor 專案參照
最後專案結構調整如下：
到此，比較基礎的多端應用就搭建完成了。
下面我們再試試應用一個Blazor框架到我們的專案中。
MASA Blazor MAUI
1.MultiPlatform.Blazor 專案安裝 MASA Blazor Nuget包
Server 專案Program.cs檔案與Maui專案的MauiProgram.cs檔案中註冊相關服務
builder.Services.AddMasaBlazor();
2.MultiPlatform.Server 專案 _Host.cshtml 檔案與MultiPlatform.Maui 專案的wwwroot/index.html引入樣式、字型、指令碼
<link href="_content/Masa.Blazor/css/masa-blazor.css" rel="stylesheet">
<link href="_content/Masa.Blazor/css/masa-extend-blazor.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/materialicons/materialicons.css" rel="stylesheet">
<link href="https://cdn.masastack.com/npm/fontawesome/v5.0.13/css/all.css" rel="stylesheet">
<script src="_content/BlazorComponent/js/blazor-component.js"></script>
範例：
注：如果這裡嫌麻煩也可以選用模板安裝
模板使用範例，具體請移步 [開始使用MASA Blazor]
(https://docs.masastack.com/blazor/getting-started/installation)
//安裝 Masa.Template 模板（目前1.0還沒發正式版，所以是Masa.Template::1.0.0-rc.1，但不影響使用）
dotnet new install Masa.Template::1.0.0-rc.1
//建立masablazor-maui 模板
dotnet new masablazor-maui -o MauiApp
3.替換 MultiPlatform.Blazor 專案的Shared/MainLayout檔案程式碼
這裡使用MASA Blazor框架中的 App bars（應用欄）元件與 Navigation drawers（導航抽屜）元件替換了原來的bootstrap樣式
@inherits LayoutComponentBase
<MApp>
<MAppBar App Elevation="2">
<MAppBarNavIcon @onclick="() => _drawer = !_drawer"></MAppBarNavIcon>
<MToolbarTitle>CrossPlatformApp</MToolbarTitle>
<MSpacer></MSpacer>
<MButton Text Color="primary" Target="_blank" Href="https://docs.masastack.com/blazor/introduction/why-masa-blazor">About</MButton>
</MAppBar>
<MNavigationDrawer App @bind-Value="_drawer">
<MList Nav Routable>
<MListItem Href="/" ActiveClass="primary--text">
<MListItemIcon>
<MIcon>mdi-home</MIcon>
</MListItemIcon>
<MListItemContent>
<MListItemTitle>Home</MListItemTitle>
</MListItemContent>
</MListItem>
<MListItem Href="/counter" ActiveClass="primary--text">
<MListItemIcon>
<MIcon>mdi-plus</MIcon>
</MListItemIcon>
<MListItemContent>
<MListItemTitle>Counter</MListItemTitle>
</MListItemContent>
</MListItem>
<MListItem Href="/fetchdata" ActiveClass="primary--text">
<MListItemIcon>
<MIcon>mdi-list-box</MIcon>
</MListItemIcon>
<MListItemContent>
<MListItemTitle>Fetch data</MListItemTitle>
</MListItemContent>
</MListItem>
</MList>
</MNavigationDrawer>
<MMain>
<MContainer Fluid>
<MErrorHandler>
@Body
</MErrorHandler>
</MContainer>
</MMain>
</MApp>
@code {
private bool _drawer;
}
4.更改 MultiPlatform.Blazor 服務的 Pages/Index.razor 檔案程式碼
增加 Bottom navigation (底部導航欄) 元件
@page "/"
<Container>
<MRow>
<h1>Hello, world!</h1>
Welcome to your new app.
<SurveyPrompt Title="How is Blazor working for you?" />
<MBottomNavigation @bind-Value="value"
Color="teal"
Fixed
Style="display:flex"
Grow>
<MButton>
<span>Recents</span>
<MIcon>mdi-history</MIcon>
</MButton>
<MButton>
<span>Favorites</span>
<MIcon>mdi-heart</MIcon>
</MButton>
<MButton>
<span>Nearby</span>
<MIcon>mdi-map-marker</MIcon>
</MButton>
</MBottomNavigation>
</MRow>
</Container>
@code {
StringNumber value = 1;
}
結尾
文章中的範例比較基礎，基本上直接cv過去就可以用，還是比較適合新手朋友上手的。
最後由於文章篇幅有限，對MAUI與Blazor感興趣的朋友可自行深入研究。
後續系列文章都會基於這個Demo專案進行分享，歡迎關注。