NavigationBar not visible on TabbedPage

Hi. I am trying to follow the docs on Multi-page applications and Navigation in order to implement the same view as the C# WPF “AppShell” template, but cannot seem to figure out a way to show the Bar with the title. I can see that in the C#/WPF template <TabBar> is used with <Tab>-components as children, while in the Fabulous version, a TabbedPage is used:

let view (model: Model) dispatch =
    View.TabbedPage(
        hasNavigationBar = true,
        shellNavBarIsVisible = true,
        shellTabBarIsVisible = true,
        title = "Page title should be here",
        children = [
            View.ContentPage(
              title = "About",
              icon = InputTypes.Image.Path("tab_about.png"),
              content = View.Label(text = "About page content"))
        ])
        .ShellTabBarIsVisible(true)
        .ShellNavBarIsVisible(true)
        .HasNavigationBar(true)
        .ToolbarItems([View.ToolbarItem(text="Some text")])

Basically, I’ve tried setting all the flags I could find to true, but nothing gets shown at the top of the page.

NOTE: Adding ToolbarItems this way works just fine when using a NavigationPage instead, but not for a TabbedPage.

[TimLariviere]

I’ve figured I need to wrap the Label in View.ContentPage in order to get it work, but I am wondering whether it is possible to catch this error at compile time.

Yes, that’s something we are aware of. We started discussing it in #341.

[TimLariviere]

Alright. So TabbedPage might not be what you really want 😃 While you could make the color go all the way up, I think you would be more interested by using the Shell control, just like with the C#/XAML template.

Take a look at the Fabimals sample to see how to use Shell with Fabulous.XamarinForms. https://github.com/fsprojects/Fabulous/tree/master/Fabulous.XamarinForms/samples/Shell/Fabimals/Fabimals

(It’s a Fabulous port of the official Xaminals sample, https://github.com/xamarin/xamarin-forms-samples/tree/master/UserInterface/Xaminals)

Also, you can read more about Shell here: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/

Basically, Fabulous.XamarinForms covers almost all Xamarin.Forms, so if something is available in XF, chances are it’s also available in Fabulous.XamarinForms.