mauitabbarflyout

Navigating to AppShell from FlyoutItem


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>

Solution

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