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 triedMainPage = 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.
CodePudding user response:
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