Showing ToolbarItem in Xamarin Forms with AppShell - xaml

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:
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.
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