Bottom TabBar not showing: C# Markup

[cbdefontenay]

Maybe I missed something in the documentation, but I created this tabbar:

public sealed partial class MainPage : TabBar
{
    public MainPage()
    {
        new TabBar()
            .Region(attached: true)
            .Visibility(Visibility.Visible)
            .Style(x => x.StaticResource("BottomTabBarStyle"))
            .SelectedIndex(0)
            .Items(
                new TabBarItem().Icon(new SymbolIcon { Symbol = Symbol.Add }).Region(attached: true).Name("Home")
                    .Style(x => x.StaticResource("MaterialBottomTabBarItemStyle")),
                new TabBarItem().Icon(new SymbolIcon { Symbol = Symbol.AddFriend }).Region(attached: true)
                    .Name("Second").Style(x => x.StaticResource("MaterialBottomTabBarItemStyle")),
                new TabBarItem().Icon(new SymbolIcon { Symbol = Symbol.AllApps })
                    .Style(x => x.StaticResource("MaterialBottomTabBarItemStyle"))
            );
    }
}

I registered the routes like that:

 private static void RegisterRoutes(IViewRegistry views, IRouteRegistry routes)
    {
        views.Register(
            new ViewMap(ViewModel: typeof(ShellViewModel)),
            new ViewMap<MainPage, MainViewModel>(),
            new ViewMap<HomePage, HomeViewModel>(),
            new ViewMap<SecondPage, SecondViewModel>()
        );

        routes.Register(
            new RouteMap("", View: views.FindByViewModel<ShellViewModel>(),
                Nested:
                [
                    new RouteMap("Main", View: views.FindByViewModel<MainViewModel>(), IsDefault: true),
                    new RouteMap("Home", View: views.FindByViewModel<HomeViewModel>()),
                    new RouteMap("Second", View: views.FindByViewModel<SecondViewModel>()),
                ]
            )
        );
    }

My HomePage.cs + ViewModel:

public sealed partial class HomePage : Page
{
    public HomePage()
    {
        this.DataContext<HomeViewModel>((page, vm) => page
            .Content(new StackPanel()
                .VerticalAlignment(VerticalAlignment.Center)
                .HorizontalAlignment(HorizontalAlignment.Center)
                .Children
                (
                    new TextBlock()
                        .Text(x => x.Binding(() => vm.Name))
                )
            )
        );
    }
}

public partial class HomeViewModel
{
    public string? Name = "Home";
}

I am using the C# Markup. The Bottom navbar showed up before I added the HomePage. Why did I do wrong? Somehow the docs are only showing how to create a tabbar in XAML, but there are no examples of how to add one using C# Markups.

[kazo0]

Hello @cbdefontenay!

Looking at your code for the MainPage, it looks like it is inheriting from TabBar instead of Page. Was that done intentionally?

Would you be able to detail out what the expected behaviour is for the app and the navigation? My guess is that you want a root page that hosts a TabBar and the TabBar will display the HomePage/SecondPage/ThirdPage based on the selected TabBarItem?

In that case, at least for the route definitions, you can take a look at the Chefs reference sample app that is doing this same exact thing. We have a "recipe" documented for how this was done here: https://platform.uno/docs/articles/external/uno.chefs/doc/toolkit/NavigationShell.html

But for more detail:
Here is the relevant part of the Chefs route map: https://github.com/unoplatform/uno.chefs/blob/a9ae7cf585c4ab1aa279fd9e0e8d411aacb1ff23/Chefs/App.xaml.host.cs#L175-L181

You can see that our "Main" route is at the parent-level in relation to the Home/Search/Favourites (which are the routes that each of the tab navigate to)

And here is the XAML for the MainPage: https://github.com/unoplatform/uno.chefs/blob/a9ae7cf585c4ab1aa279fd9e0e8d411aacb1ff23/Chefs/Views/MainPage.xaml#L17-L65

Note the fact that the TabBar itself is wrapped in a parent Grid with Region.Attached="True" as well as a sibling Grid (https://github.com/unoplatform/uno.chefs/blob/a9ae7cf585c4ab1aa279fd9e0e8d411aacb1ff23/Chefs/Views/MainPage.xaml#L30-L34) that will be hosting the content driven by the TabBar (This is where the Home/Search/Favourites Pages will be displayed).

This organization results in something like this:

Where clicking on any of the TabBarItems will switch the Page that is displayed above the TabBar

So along with changing your MainPage to inherit from Page, you should also be providing those two Grids in the MainPage Content along with the TabBar and reorganize the route maps to have your "Main" route be a parent of the routes driven by the TabBar. It's also possible not to define the "Home"/"Second"/etc. routes explicitly as the Navigation logic should be able to determine the correct view to show based on the Region Naming conventions

[cbdefontenay]

Hello @kazo0 !

Firstly thanks a lot for that long answer, the inheritance from the TabBar was done intentionally, because Page did not work, so I tried a different approach. Obviously, as you mentionned, that wasn't a good approach. The expected behaviour should be to get a tabbar with routes, like "Home" etc, and switching views, as in the example of recipes you gave me.

But based on the example you gave me, I tried to make the necessary changes as showed here: App.xaml.cs and here: MainPage.cs. I tried to implement the Grid, and let the nemae of the routes "Home"/"Second" etc, for more clarity, at least for now, but it still does not work, I only see a blank white screen.

Maybe I missed something else ?