In my AppShell.xaml, I have a TabBar and also FlyoutItems. As soon as I click on one of my FlyoutItems, I am on the corresponding ContentPage and am missing my TabBar at the Bottom. Well, I don't know if this is good usability or not if the TabBar would still be present? Would it be possible to still display the TabBar or do I have to integrate it to each of my FlyoutItem-ContentPages?
Anyway, first of all, I tried to add an additional "Home" Flyout-Item. But is there a way to display my AppShell when I click on that or how would I have my App as when it was started?
AppShell.xaml:
<TabBar>
<Tab Title="Calculate" Icon="1.png">
<ShellContent
ContentTemplate="{DataTemplate pages:Calculate}"
Route="Calculate"
Shell.PresentationMode="Animated" />
</Tab>
<Tab Title="Overview" Icon="2.png">
<ShellContent
ContentTemplate="{DataTemplate pages:Overview}"
Route="Overview"
Shell.PresentationMode="Animated" />
</Tab>
</TabBar>
<FlyoutItem Title="Home" Icon="3.png">
<ShellContent ContentTemplate="{DataTemplate pages:Calculate}" Route="Calculate" Shell.PresentationMode="Animated">
...
</FlyoutItem>
<FlyoutItem Title="Settings" Icon="4.png">
<ShellContent ContentTemplate="{DataTemplate pages:Settings}"
Route="Settings"
Shell.PresentationMode="Animated" />
</FlyoutItem>
<FlyoutItem Title="Help" Icon="5.png">
<ShellContent ContentTemplate="{DataTemplate pages:Help}"
Route="Help"
Shell.PresentationMode="Animated" />
</FlyoutItem>
<Shell.FlyoutFooter>
<Grid HeightRequest="40" BackgroundColor="{StaticResource Primary}">
<Label TextColor="White" Text="{loc:Translate Copyright}" HorizontalOptions="Center" VerticalOptions="Center"/>
</Grid>
</Shell.FlyoutFooter>
In my AppShell.xaml, I have a TabBar and also FlyoutItems. As soon as I click on one of my FlyoutItems, I am on the corresponding ContentPage and am missing my TabBar at the Bottom. Well, I don't know if this is good usability or not if the TabBar would still be present? Would it be possible to still display the TabBar or do I have to integrate it to each of my FlyoutItem-ContentPages?
We can't use the two navigation ways at the same time. The top level of navigation in a Shell application is either a flyout or a bottom tab bar. If you want to display the bottom tabs, you can do this:
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems">
<ShellContent Title="Home" ContentTemplate="{DataTemplate local:MainPage}" Route="MainPage" />
<ShellContent Title="NewPage1" ContentTemplate="{DataTemplate views:NewPage1}" Route="NewPage1"/>
</FlyoutItem>
For more info, you can refer to the official doc: App visual hierarchy of Shell and Shell tabs. It also said:
The TabBar type disables the flyout.