标签: maui-blazor

如何在 MAUI 中设置窗口大小？

背景信息：我只关心此应用程序的 Windows - 我选择了 MAUI，因此我可以将 Blazor 用于桌面应用程序。由于某种原因，默认窗口尺寸很大（几乎占据了我所有的 1440p 屏幕空间）。我正在制作的应用程序只需要大约 600x600。尽管我很高兴让应用程序能够响应，但有一种方法可以固定窗口大小也会很有帮助。

我已经从 MAUI 预览版 10 中的 MAUI Blazor 应用程序模板创建了一个小型应用程序，并将其定位并在 Windows 上运行。然而，我希望设置应用程序的标题，我想象这将通过 MainPage.xaml ContentPage 标记中的 Title 属性来完成。然而，这在启动应用程序时没有任何作用。

如何在 Web 浏览器中运行 MAUI Blazor 应用程序？我已将 VS MAUI 与 Blazor 示例项目结合使用

我基本上有 Web 背景，正在尝试 .NET MAUI Blazor Hybrid。我在使用 .NET MAUI Window 开发期间遇到错误，但不确定如何调试它？我查看了所有类型的窗口，但在任何地方都找不到错误详细信息。

我尝试过调试，但这是一个令人头疼的问题，因为它进入了循环。

有没有人找到从 Blazor MAUI 混合应用程序扫描二维码的有效解决方案？

我已经找到了许多用于“普通”Blazor 的库（例如 BigIslandBarcoding、ZXing.Net），但没有任何具体内容可以从 razor 页面（在 BlazorWebView 中）在移动设备（iOS 和 Android）上执行此操作。

我正在寻找一个简单的操作来通过单击按钮打开相机读取器/扫描仪，但找不到类似的东西。

我观看了有关如何创建 .NET MAUI Blazor 应用程序的教程

https://www.youtube.com/watch?v=bnoCU5XGBh4

但是，我有一个现有的 Blazor Web Assembly 应用程序，将其包装到 BlazorWebView 中的最佳推荐方法是什么？我已经四处寻找教程，但由于它相当新，所以内容不多。

出于测试目的，我想“捕获”我的应用程序中发生的任何错误并将其显示在页面上（而不是在控制台中）。为此，我在 .Net 6 框架中发现了ErrorBoundary组件。

来自 Microsoft 的 ErrorBoundaries 文档

起初，我在Bazor WebAssembly项目中成功测试了这个组件。

脚步：

• 创建一个新的 Blazor WebAssembly 项目
• 创建组件 CustomErrorBoundary.razor （参见下面的代码）
• 在 MainLayout.razor 中，使用组件 CustomErrorBoundary 包围 @Body 指令
• 在 FetchData.razor 的代码中抛出异常（见下文）

自定义错误边界

    @inherits ErrorBoundary
    @if (CurrentException is null)
    {
        @ChildContent
    }
    else if (ErrorContent is not null)
    {
        @ErrorContent(CurrentException)
    }
    else
    {
        <div style="background-color: yellow; border: 2px dashed black; white-space: pre; font-family: consolas, monospace;">
            @foreach (var exception in receivedExceptions)
            {
                <div class="received-exception" style="background-color: rgba(255,255,255,0.3); margin: 0.5rem; padding: 0.5rem;">
                    @exception.Message …

如果程序中有错误，我会收到“发生未处理的错误”。通过 Blazor Web 程序集，我可以在浏览器中打开开发人员工具来获取所发生情况的详细信息。这在 Blazor MAUI 中是不可能的。

那么如何获取 Blazor MAUI 中的错误详细信息呢？

我想在我的Maui Blazor应用程序中实现浅色和深色主题。如您所知，Blazor 只不过是 Html 和 Css，因此我可以轻松地为我的应用程序的内容实现深色和浅色主题（感谢在html 标记上添加了一个简单的.dark类）。

我面临的问题是毛伊岛应用程序的上部和下部。

让我通过一个例子向您展示。

安卓版本

iOS版本

上图展示了当前的情况：左边是浅色主题，右边是深色主题。正如您所看到的，深色主题对于顶部和底部部分是有问题的（对于 iOS 版本，只有顶部部分是有问题的）。

我想要实现的目标：顶部和底部部分的颜色应与页面内容相同：

• #292929黑暗主题
• #FFFFFF为浅色主题

如下图所示：切换到深色主题时，所有内容都是彩色的。

我不知道如何为 Maui Blazor 实现这一目标，而且我没有使用 Xamarin 的经验。

你能指出我正确的方向吗？

您可能知道，BlazorWebView使您能够直接在 .NET MAUI 应用程序中托管 Blazor Web 应用程序。

我创建了一个简单的 Blazor MAUI 项目。\n我添加了一个简单的 Razor 类库，其中包含两个 JavaScript 文件、一个带有三个按钮的简单 razor 组件以及两个用于 JavaScript 方法调用的 C# 包装类。\n其中一个 JavaScript 文件使用导出\n第一个包装类使用生成的默认方法代码

{\nvar module = await moduleTask.Value;\nreturn await module.InvokeAsync<string>(\xe2\x80\x9cshowPrompt\xe2\x80\x9d, message);\n}\n

第二个包装器使用 JSRuntime JS

{\nreturn await JS.InvokeAsync<string>(\xe2\x80\x9cshowPrompt\xe2\x80\x9d, message);\n}\n

我的基本 Razor 组件定义如下：

@inject ExampleJsInterop exampleJsWithModule\n@inject IJSRuntime js\n@inject ExampleJsInteropWithJSRunTime exampleJsRunTime\n<div class=\xe2\x80\x9cmy-component\xe2\x80\x9d>\nThis component is defined in the <strong>RazorClassLibrary</strong> library.\n<button class=\xe2\x80\x9cbtn btn-primary\xe2\x80\x9d @onclick=\xe2\x80\x9cCallJSFunctionFromCSWithModule\xe2\x80\x9d>Call JS function from C# with Module</button>\n<button class=\xe2\x80\x9cbtn btn-primary\xe2\x80\x9d @onclick=\xe2\x80\x9cCallJSFunctionFromCSWithJSruntime\xe2\x80\x9d>Call JS function from C# With JSruntime</button>\n<button class=\xe2\x80\x9cbtn btn-primary\xe2\x80\x9d @onclick=\xe2\x80\x9cCallJSFunctionFromScript\xe2\x80\x9d>Call JS function from script</button>\n</div>\n@code{\nprivate async …