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

Question

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

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

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

有人知道我如何将每个选项卡链接到剃刀页面吗？

Answer 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>

笔记：

1. 我添加了xmlns:pages="clr-namespace:YourProjectName.Pages"命名空间声明
2. 我将每个BlazorWebView页面指向命名空间中关于以下内容的 (Blazor) 页面之一：

在这里找到完整的工作示例：https ://github.com/jfversluis/MauiBlazorPlatformTabs