如何在 .Net MAUI Blazor 应用程序中的 Razor 组件中使用 .Net MAUI 控件

Question

我对 .Net MAUI 还很陌生，但在 Blazor 方面有相当的经验。我正在启动这个新项目，打算获得 MAUI 的好处。

我的问题是，我想在 Blazor 中使用一些来自 MAUI 的本地控件，例如底部工作表，但我不知道如何在 Blazor 中使用这些控件。

是否有办法在 .Net Blazor MAUI 应用程序中使用 MAUI 的控件？

- Xander Selorm

---

我认为方法是将Blazor嵌入到MAUI应用程序中。我不知道其他方向的情况。 - Klamsi

更好的方式是在 Blazor MAUI 应用中充分利用 Blazor 作为 UI 处理程序。然后，您应该使用 Blazor 组件并实现您所需的功能。 - ARTAV

@ARTAV，这很有趣。但是这个过程会让我写XAML吗？ - Xander Selorm

更好的是，您是否介意编写一个答案来解释如何进行操作？我将不胜感激。 - Xander Selorm

Answer 1

你无法在 Blazor 页面中使用 MAUI 组件 (XAML)。但是，如果需要，你可以将 BlazorWebView 与其他 MAUI 元素混合使用，在 XAML 视图中实现该功能。例如，我用这种方法来读取 QR 码：我在主视图中放置了一个 Fragment，它包含一个 MAUI QR 阅读器，当 Blazor 页面中的按钮被按下时，我会将其显示出来，并且我还会将那个 MAUI Fragment 放置在 Blazor 视图上面。

另外需要知道的是，你可以通过使用 DI 设施注入公共对象，在 MAUI 和 Blazor 之间进行通信。这个对象将具有允许通信的方法和事件。

- gonzalorf

---

嗨@gonzalorf！你能给我发送包含MAUI QR阅读器的Fragment的Main视图代码吗？这真的会帮助我很多。 - Anna L

好的 @AnnaL，我制作了一个演示项目，你可以在这里获取它：https://github.com/gonzalorf/Maui-Blazor-QRReader - gonzalorf

Answer 2

您可以在xaml页面中使用MAUI组件。然后根据需要嵌入BlazorWebView控件。

以下是包含嵌入式BlazorWebView的MainPage.xaml:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:b="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             xmlns:local="clr-namespace:MauiBlazorApp"
             x:Class="MauiBlazorApp.MainPage"
             BackgroundColor="{DynamicResource PageBackgroundColor}">

    <b:BlazorWebView HostPage="wwwroot/index.html">
        <b:BlazorWebView.RootComponents>
            <b:RootComponent Selector="app" ComponentType="{x:Type local:Main}" />
        </b:BlazorWebView.RootComponents>
    </b:BlazorWebView>

</ContentPage>

- Guangyu Bai - MSFT

Answer 3

TL;DR 你可以通过提供的Application类直接访问一些本地对话框控件。

public async Task<bool> DisplayConfirm(string title, string message, string accept, string cancel)
{
    return await Application.Current.MainPage.DisplayAlert(title, message, accept, cancel);
}

所以有人向我推荐了这个YouTube视频，它恰好完成了我想要做的事情。 看一下：https://www.youtube.com/watch?v=gTLEIe0SWpI

- Xander Selorm

Answer 4

.NET MAUI 应用程序在每个移动/桌面平台上都是本地的 - 它们通过现代 WebViews 欢迎 Blazor/web 内容。.NET MAUI 本地组件可以与 Blazor 内容混合使用 - 基本上是在 XAML 页面中托管一个 BlazorWebView，渲染 Web 内容。开发人员可以通过 XAML 混合 Blazor UI 渲染本地 UI - 有一些 .NET MAUI UI 组件 可以帮助实现。还可以通过 Blazor 驱动更多的应用程序 UI，并在 Web/本地应用程序之间 共享代码。

- Sam Basu

Answer 5

你可以在XAML中使用原生的.NET MAUI控件。除此之外，你还可以使用一个BlazorWebView控件来托管页面中的Blazor部分。

你可以使用https://stackoverflow.com/a/77440099/1114918中列出的方法之一，在Blazor和XAML之间进行通信。

- hansmbakker