Showing ToolbarItem in Xamarin Forms with AppShell

Question

In my Xamarin Forms 5 app, I'm trying to add a ToolbarItem to a ContentPage which is a "child" of a TabbedPage but the ToolbarItem is not showing.

The key point here is that the app uses AppShell and the tabs are defined in AppShell.xaml which looks like this:

<FlyoutItem Title="Home">
   <FlyoutItem.Icon>
      <FontImageSource
         FontFamily="MISHRP"
         Glyph="{StaticResource HomeIcon}"
         Color="White" />
   </FlyoutItem.Icon>
   <ShellContent Route="HomePage" ContentTemplate="{DataTemplate local:HomePage}" />
</FlyoutItem>

And the home page has three tabs that point to ContentPage's:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            ... // Removed for brevity>
    <local:CommercialFeed Title="Feed" />
    <local:PersonalCard Title="Card" />
    <local:Vendors Title="Vendors" />
</TabbedPage>

I'm now adding a ToolbarItem in the "Vendors" page but it doesn't show. I read that I need to wrap main page in a NavigationPage.

I have two issues here:

1. Because I'm using AppShell, my code behind looks like this: MainPage = new AppShell();. So not sure how to handle this part. I tried MainPage = new NavigationPage(new AppShell()); but this created another issue -- see below -- and it also crashed the app.
2. I have a login page which is also defined in the AppShell. When I tried the above code, I got a nav bar on the login page as well and that's a problem. There shouldn't be a nav bar in the login page.

How do I handle this so that I can have ToolbarItems in my Vendors page? Thanks.

Answer 1

First, I believe it is a bad idea to mix Shell and the old TabbedPage (use either one of them), in my opinion it is better to change your ui structure from TabbedPage to a combination of Tabbar and Tab that both are within Shell Xamarin.Forms Shell tabs.

    <TabBar>

        <Tab Title="Feed">
            <ShellContent Title="Feed" ContentTemplate="{DataTemplate local:CommercialFeed}"/>
        </Tab>

        <Tab Title="Cards">
            <ShellContent Title="Cards" ContentTemplate="{DataTemplate PersonalCard}"/>
        </Tab>

        <Tab Title="Vendors">
            <ShellContent Title="Vendors" ContentTemplate="{DataTemplate local:Vendors}"/>
        </Tab>

    </TabBar>

Now define ToolbarItems on each page:

    <ContentPage.ToolbarItems>
        <ToolbarItem Text="..." .../>
    </ContentPage.ToolbarItems>

If you want to keep using TabbedPage anyway, check How to add toolbar item in TabbedPage in Xamarin Form