Navigating to AppShell from FlyoutItem

Question

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>

score 1 · Accepted Answer · answered Mar 15 '23 at 02:33

1

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.

answered Mar 15 '23 at 02:33

Jianwei Sun - MSFT

2,289
1
3
7

Thank you very much, this actually did what I was looking for initially. What is the opinion in general, should I do it like that or is this not state of the art regarding App-UI-Design to do it that way? – OXO Mar 15 '23 at 10:04
Another question is, in case I want to have a „Home“-Item in my flyout which should basically navigate and display my AppShell again with the Screen that is visible when the App was launched, hoe could I load this page then? – OXO Mar 15 '23 at 10:06
@OXO You mean when the app starts, it first shows "Home" ? – Jianwei Sun - MSFT Mar 16 '23 at 01:29
Yes, basically that’s the first Tab that’s shown. What I could do is try to call that Page from Flyout when the Tabs are activated as you showed. When the Tabs are not activated and it is the standard Flyout behavior, no Tabs would be present, so a „Home“-Flyout-Item would be necessary in my opinion and this should then really go to the AppShell as it is when my App is started. This then would activate all Tabs again. So, „Home“ is like a restart of the Application resetting the initial state, when the App was started – OXO Mar 16 '23 at 05:36
To be honest, your need is pretty weird... As usual, Once Shell application is opened, it is AppShell. You can see the code: `MainPage = new AppShell();` in App.xaml.cs. – Jianwei Sun - MSFT Mar 16 '23 at 09:36
I am sorry, but I think, I have to re-open it again. Could not solve it the way I wanted. Basically, I need 3 FlyoutItems. Each of them should lead to its own Page. Then, each of these pages Should have the 2 Tabs that are normally displayed when AppShell is started. I could not realize this with the FlyoutDisplayOptions. It’s either like I have 3 Tabs at the Bottom (the Page from the FlyoutItem that was clicked + the 2 that should represent the ones that come with AppShell), or even worse that I have all 3 of them at the very Bottom. Is there a way to realize it the way I wanted? – OXO Mar 17 '23 at 23:19
Example: In the Insta… App navigate to the right most Tab Bar Icon. You will see a Flyout in the right upper corner. When you click on the „Settings“-Item it shows its Page, but also still shows all Tab-Icons at the Bottom. That’s how I want it – OXO Mar 18 '23 at 05:31
That would be a BottomSheet. But, to be honest, still don’t know where the pages would be presented then so that it makes sense to the user. I thought, it should be activated when these 3 lines from a Flyout are clicked (maybe es an Icon in the upper corner). Then the Buttom Sheet shows my „Settings“, „Help“ and „Contact“ items. Once one of them is clicked the corresponding page would be presented as a normal page that would currently be reached from one of my two Tab-Items. Navigation „back“ could be a Click on one of the Tab-Items or again on the „Flyout-Flyout“ lines to show BottomSheet aga – OXO Mar 18 '23 at 05:57

Navigating to AppShell from FlyoutItem

1 Answers1