如何在 .NET MAUI/Blazor 混合上的 TabBar 上导航？答案

【问题标题】：How to navigate on a TabBar on .NET MAUI/Blazor hybrid?如何在 .NET MAUI/Blazor 混合上的 TabBar 上导航？
【发布时间】：2022-06-16 07:48:14
【问题描述】：

所以我只是在试验 .NET MAUI/Blazor Hybrid。

我已按照 .NET MAUI 指南设置我的 TabBar，结果如下所示：

但是，我需要将每个选项卡链接到剃须刀页面，因此 ContentTemplate="{DataTemplate local:Home}" 例如不起作用。

有人知道我如何将每个标签链接到剃须刀页面吗？

【问题讨论】：

标签： .net blazor maui maui-blazor

【解决方案1】：

在这些数据模板中的每一个中，您都需要一个模板，该模板有一个 BlazorWebView 指向您要显示的页面。写在一个文件中。看起来像这样，当然您可以将每个模板放在不同的文件中：

<Application.MainPage>
    <Shell>
        <TabBar>
            <Tab Title="Home">
                <ShellContent Title="Home">
                    <ShellContent.ContentTemplate>
                        <DataTemplate>
                            <ContentPage>
                                <BlazorWebView HostPage="wwwroot/index.html">
                                    <BlazorWebView.RootComponents>
                                        <RootComponent Selector="#app" ComponentType="{x:Type pages:Index}" />
                                    </BlazorWebView.RootComponents>
                                </BlazorWebView>
                            </ContentPage>
                        </DataTemplate>
                    </ShellContent.ContentTemplate>
                </ShellContent>
            </Tab>
            <Tab Title="Log">
                <ShellContent Title="Log">
                    <ShellContent.ContentTemplate>
                        <DataTemplate>
                            <ContentPage>
                                <BlazorWebView HostPage="wwwroot/index.html">
                                    <BlazorWebView.RootComponents>
                                        <RootComponent Selector="#app" ComponentType="{x:Type pages:Counter}" />
                                    </BlazorWebView.RootComponents>
                                </BlazorWebView>
                            </ContentPage>
                        </DataTemplate>
                    </ShellContent.ContentTemplate>
                </ShellContent>
            </Tab>
        </TabBar>
    </Shell>
</Application.MainPage>

注意：

我添加了xmlns:pages="clr-namespace:YourProjectName.Pages" 命名空间声明
我将每个 BlazorWebView 指向命名空间中的 (Blazor) 页面之一 about

在此处查找完整的工作示例：https://github.com/jfversluis/MauiBlazorPlatformTabs

【讨论】：

虽然这可行，但当我尝试这样做时，MainLayout 并没有被使用。
我认为这就是重点。因为主要布局的一部分是菜单，对吧？如果再把它放在那里会有点奇怪
除了了解所有这些是如何工作的之外，我还想通过在 Flyout 中使用它来让 MainLayout 正常工作。真的是任何布局，因为当我像这样导航到 Blazor 页面时，我无法指定其他布局。
我想我知道我在哪里错过了这条船。我想导航到现有 BlazorWebView 中的 Blazor 页面，而不是启动新的 BlazorWebView。

【解决方案2】：

1-创建文件夹名称Pages并将所有页面放入其中， 2- 添加 ( xmlns:Page="clr-namespace:Market.Pages") Market 是您的项目名称， 3-在标签添加（）“DetailsPage”这里是你的导航页enter image description here

【讨论】：