How to make a Shell TabBar to navigate to razor pages with parameters? - Maui Blazor Hybrid

Question

I have created a razor component Tabbar that looks like AppShell Tabbar but it's not native TabBar, it acts like a Blazor web view . I am looking how to make an AppShell native TabBar to navigate to razor pages with parameters. Any idea if that's even possible?

Answer 1

Take the default Maui Blazor Hybrid project as an example，you can first create the AppShell class, and add the Tabbar like the following code:

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiBlazorApp.AppShell"
             xmlns:views="clr-namespace:MauiBlazorApp">
    <TabBar>
        <Tab Title="Index">
            <ShellContent ContentTemplate="{DataTemplate views:NewPage1}"/>
        </Tab>
        <Tab Title="Counter">
            <ShellContent ContentTemplate="{DataTemplate views:NewPage2}"/>
        </Tab>
    </TabBar>
</Shell>

Then change the code in App.xaml.cs:

MainPage = new AppShell();

And create NewPage1, NewPage2:

NewPage1:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiBlazorApp.NewPage1"
             xmlns:pages="clr-namespace:MauiBlazorApp.Pages"
             xmlns:local="clr-namespace:MauiBlazorApp"
             Title="NewPage1">
    <BlazorWebView  HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type pages:Index}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</ContentPage>

NewPage2:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="MauiBlazorApp.NewPage1"
             xmlns:pages="clr-namespace:MauiBlazorApp.Pages"
             xmlns:local="clr-namespace:MauiBlazorApp"
             Title="NewPage2">
    <BlazorWebView  HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type pages:Counter}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>
</ContentPage>