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

Question

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

我按照 .NET MAUI 指南设置了我的 TabBar，结果它看起来像这样：

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

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

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>

注：

我添加了一个 xmlns:pages="clr-namespace:YourProjectName.Pages" 命名空间声明
我将每个 BlazorWebView 指向命名空间 about

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

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

How to navigate on a TabBar on .NET MAUI/Blazor hybrid?

.net

blazor

maui

maui-blazor