MAUIはFlutterに匹敵するBlazorとUIを共有し、Windows、macOS、Android、iOS、Webに共通するUIを実現しています。

1. 前のページ

距离上次发《MAUI 初体验：爽》一文已经过去 2 个月了，本计划是下半年或者明年再研究 MAUI 的，现在计划提前啦，因为我觉得 MAUI Blazor 挺有意思的：在 Android、iOS、macOS、Windows 之间共享 UI，一处 UI 增加或者修改，就能得到一致的 UI 体验。

看看这篇文章《Blazor Hybrid/MAUI 简介和实战》对 MAUI Blazor 的说明：

MAUI

NET Multi-Platform Application UI. NET MAUIは、C#とXAMLを使用してネイティブのモバイルおよびデスクトップアプリケーションを作成するためのクロスプラットフォーム·フレームワークです。. NET MAUIを使用すると、Android、iOS、macOS、Windows、および単一の共有コードベースから実行するアプリケーションを開発できます。

*Blazor Hybridアプリと. NET MAUI

Blazor Hybridは、. NET Multiplatform Application UI. NET MAUIフレームワークに組み込まれています。. NET MAUIには、Razorコンポーネントを埋め込みWeb ViewにレンダリングするBlazor WebViewコントロールが含まれています。. NET MAUIとBlazorを組み合わせることで、モバイル、デスクトップ、Web全体でWeb UIコンポーネントのセットを再利用できます。

Blazor Server、Blazor Wasm、MAUI Blazor間でUIを共有する方法の実験を今日共有しましょう。これは完了し、後でアプリケーションを開発する際にはるかに便利になります（UI変更のみ）。

2. 最後の効果を最初に体験してください

Blazor Server：https://server.dotnet9.com/
Blazor Wasm：https://wasm.dotnet9.com/
MAUI Android\Windows\macOS https//github.com/dotnet9/dotnet9/tree/development/src/Dotnet9.MAUI（ソースコードは自己コンパイル）

**Windowsデスクトップ、Blazor Server（オンライン）、Blazor Wasm（オンライン）、Androidエフェクト **

** i Pad Air、iOS、macOSデスクトップ効果 **

MAUIの各エンドはファイルの公開体験を行わない（対応するプラットフォームの公開署名などの操作を行う必要がある）ため、以下の方法でプロジェクトのコンパイル体験を作成することができます。

iOS 和 macOS 效果感谢青城同学提供的图片素材，站长 mbp 安装了最新的 macOS，xCode 也是最新的，可能因为预览版 macOS 原因，xCode 无法打开，间接影响了 maui 编译？

**macOS版とX Code版 **

**xCodeは使用不可の **

*** エラーは後で修正します **

用 mbp 的学友提案不要据付プレビュー版OS，不要当战士...

3. 新規プロジェクトの作成

关于 MAUI 的环境搭建可参考这篇文章《在 MAUI 中使用 Masa Blazor》，本文不再介绍环境搭建，直接使用 VS 2022 最新预览版项目模板创建项目。

3.1 Blazor Serverプロジェクトの作成：Dotnet 9. Server

3.2 Blazor Web Assemblyプロジェクトの作成：Dotnet 9. Wasm

3.3 MAUI Blazorプロジェクトの作成：Dotnet 9.MAUI

3.4共通点を探す

在 3 个项目的上一层目录，打开 PowerShell，输入tree /f查看详细的目录文件组织结构：

3つのテンプレートプロジェクトファイル構造を詳しく見ると、共通のファイル表示がわかります。

文件夹 PATH 列表
卷序列号为 76F5-AF62
C:.
│  Dotnet9.sln
│
├─Dotnet9.MAUI
【1 这里省略数个文件】
│  │
│  ├─Data
│  │      WeatherForecast.cs
│  │      WeatherForecastService.cs
│  │
│  ├─Pages
│  │      Counter.razor
│  │      FetchData.razor
│  │      Index.razor
【2 这里省略数个文件】
│  │
│  ├─Shared
│  │      MainLayout.razor
│  │      MainLayout.razor.css
│  │      NavMenu.razor
│  │      NavMenu.razor.css
│  │      SurveyPrompt.razor
【3 这里省略数个文件】
│
├─Dotnet9.Server
│  │  App.razor
【4 这里省略数个文件】
│  │
│  ├─Data
│  │      WeatherForecast.cs
│  │      WeatherForecastService.cs
│  │
│  ├─Pages
│  │      Counter.razor
│  │      Error.cshtml
│  │      Error.cshtml.cs
│  │      FetchData.razor
│  │      Index.razor
│  │      _Host.cshtml
│  │      _Layout.cshtml
│  │
│  ├─Properties
│  │      launchSettings.json
│  │
│  ├─Shared
│  │      MainLayout.razor
│  │      MainLayout.razor.css
│  │      NavMenu.razor
│  │      NavMenu.razor.css
│  │      SurveyPrompt.razor
【5 这里省略数个文件】
│
└─Dotnet9.Wasm
【6 这里省略数个文件】
    │
    ├─Pages
    │      Counter.razor
    │      FetchData.razor
    │      Index.razor
    │
    ├─Properties
    │      launchSettings.json
    │
    ├─Shared
    │      MainLayout.razor
    │      MainLayout.razor.css
    │      NavMenu.razor
    │      NavMenu.razor.css
    │      SurveyPrompt.razor
【7 这里省略数个文件】

发现都有Data目录和Pages目录（其中 Wasm 项目没有 Data 目录，使用的示例类是直接写在FetchData.razor文件@code{}中的），那把这部分文件直接提取到类库中就可以了，那就做吧。

4. RazorライブラリへのUIの抽出

Razorライブラリの作成：Dotnet 9. Web App

** 以下はUIの抽出です **

如上图，将Dotnet9.MAUI项目的Data、Pages、Shared三个目录外加Main.razor文件剪切到Dotnet9.WebApp项目中，然后修改剪切后相应文件的命名空间Dotnet9.MAUI[xxx]为Dotnet9.WebApp[xxx]，打开Dotnet9.WebApp项目的_Import.razor文件，参考Dotnet9.MAUI项目的_Import.razor文件部分命名空间，修改如下：

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared

上面部分命名空间可以删除（未尝试），编译Dotnet9.WebApp项目，检查是否正确编译。

5. 各エンドプロジェクトの変更

5.1 MAUIプロジェクト

添加Dotnet9.WebApp项目引用
Program.cs中using Dotnet9.MAUI.Data;改为using Dotnet9.WebApp.Data
删除Data、Pages、Shared三个目录外加Main.razor文件，上一步是剪切的话这步省略
修改_Imports.razor文件，主要是添加Dotnet9.WebApp项目命名空间引用

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.MAUI
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared

MauiProgram.cs修改引用的命名空间：using Dotnet9.MAUI.Data; => using Dotnet9.WebApp.Data;
打开MainPage.xaml，对路由组件命名空间的引用修改

添加命名空间xmlns:webApp="clr-namespace:Dotnet9.WebApp;assembly=Dotnet9.WebApp",修改代码如下：

変更前：

<RootComponent Selector="#app" ComponentType="{x:Type local:Main}" />

修正後：

<RootComponent Selector="#app" ComponentType="{x:Type webApp:Main}" />

修改完毕，编译运行Dotnet9.MAUI项目吧，接下来修改Dotnet9.Server项目。

5.2 Blazor Serverプロジェクト

添加Dotnet9.WebApp项目引用
Program.cs中using Dotnet9.Server.Data;改为using Dotnet9.WebApp.Data;
删除Data目录
删除Pages目录中的Counter.razor、FetchData.razor、Index.razor三个文件（包括同名的.cs、.css文件）
删除Shared目录
修改_Imports.razor文件，主要是添加Dotnet9.WebApp项目命名空间引用

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.Server
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared

删除App.razor文件，打开./Pages/_Host.cshtml文件，添加命名空间引用@using Dotnet9.WebApp,修改代码如下：

変更前：

<component type="typeof(App)" render-mode="ServerPrerendered" />

修正後：

<component type="typeof(Main)" render-mode="ServerPrerendered" />

修改完毕，编译运行Dotnet9.Server项目吧，接下来修改Dotnet9.Wasm项目。

5.3ブレザー·ワスム計画

添加Dotnet9.WebApp项目引用
删除Pages、Shared目录外加App.razor文件
Program.cs中using Dotnet9.Wasm;改为using Dotnet9.WebApp;，同时修改代码

変更前に

builder.RootComponents.Add<App>("#app");

修正後の

builder.RootComponents.Add<Main>("#app");

修改_Imports.razor文件，主要是添加Dotnet9.WebApp项目命名空间引用

@using System.Net.Http
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using Dotnet9.Server
@using Dotnet9.WebApp
@using Dotnet9.WebApp.Shared

修改完毕，编译运行Dotnet9.Wasm项目，至此三种项目模板已经修改完成，最终解决方案如下图：

6概要の概要

概要は以下の図です。

Dotnet 9. WebApp：blazorコンポーネント関連のコード、ルーティングコンポーネントなどは、他のプロジェクトで参照できるようにこのプロジェクトに配置されます。
Dotnet 9. Server：Blazor Serverテンプレートプロジェクト
Dotnet 9. Wasm：Blazor Web Assemblyプロジェクト
Dotnet 9. MAUI：MAUI Blazorプロジェクト

一句话：将 UI 封装到 Razor 类库Dotnet9.WebApp，其他终端工程(Dotnet9.Server、Dotnet9.MAUI、Dotnet9.Wasm)引用此工程即可实现 UI 共享。

本文代码地址：https://github.com/dotnet9/Dotnet9
原文：https://dotnet9.com/2022/06/Share-razor-library-between-maui-and-blazor-server-or-client