Shell bottom tabs for sub-section under flyout
USMember ✭✭✭✭✭
The app I'm working on is transitioning from a master-detail architecture to tabs. Since this also requires some rework to our navigation structure, I figured now may be a good time to transition to using Shell. As we haven't completely figured out what we're going to do with the menu that is currently in our master page, I want to start my shell design by having a flyout and a bottom tab bar. However, I'm having some trouble getting the appearance I want. It seems that Shell creates both a flyout item and a bottom tab for every child of the FlyoutItem, and top tabs if the child of a FlyoutItem has further children. What I want is a flyout menu, and the first child of the FlyoutItem to have two bottom tabs.
This XAML gives me the layout I want using a MasterDetailPage and a TabbedPage:
<MasterDetailPage>
<MasterDetailPage.Master>
<MenuPage>
<!-- ListView containing Home, Notifications, Settings -->
</MenuPage>
<MasterDetailPage.Master/>
<MasterDetailPage.Detail>
<TabbedPage>
<HomePage/>
<DashboardPage/>
</TabbedPage/>
</MasterDetailPage.Detail/>
</MasterDetailPage>
This is my attempt to do the same with Shell:
<Shell>
<FlyoutItem>
<ShellSection Title="Home">
<ShellContent Title="Home">
<HomePage/>
</ShellContent>
<ShellContent Title="Dashboard">
<DashboardPage/>
</ShellContent>
</ShellSection>
<ShellContent Title="Notifications">
<NotificationsPage/>
</ShellContent>
<ShellContent Title="Settings">
<SettingsPage/>
</ShellContent>
</FlyoutItem>
</Shell>
Best Answer
-
LandLu
Member, Xamarin Team Xamurai
It depends on how you built the architecture. I created a sample for reference:
<FlyoutItem Title="Home"> <ShellContent Title="Home" ContentTemplate="{DataTemplate local:HomePage}"/> <ShellContent Title="Dashboard" ContentTemplate="{DataTemplate local:DashboardPage}"/> </FlyoutItem> <FlyoutItem Title="Notifications"> <ShellContent ContentTemplate="{DataTemplate local:NotificationsPage}"/> </FlyoutItem> <FlyoutItem Title="Settings"> <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}"/> </FlyoutItem>Is this effect what you want:
You need to define three flyout items instead of putting them together in a single one.
Refer to the documentation for more details:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-items5
Answers
@JoeManke
I believe the shell flyout feature doesn't support binding if your referring to using the Listview. I haven't tried it recently but was staggered to see this github issue. maybe I've missed the issue but regardless, look out for that problem.
https://github.com/xamarin/Xamarin.Forms/issues/9268
I would get rid of the ListView and just define ShellContent items in XAML for the flyout.
The question is how do I get bottom tabs for Home and Dashboard instead of bottom tabs for Home, Notifications, and Settings and top tabs for Home and Dashboard.
And also, this is just temporary prototype stuff. End goal is no flyout so the root of the Shell will be a TabBar.
I doubt it's bindable and you'll have to roll your own but that's not different in the current framework.
It depends on how you built the architecture. I created a sample for reference:
<FlyoutItem Title="Home"> <ShellContent Title="Home" ContentTemplate="{DataTemplate local:HomePage}"/> <ShellContent Title="Dashboard" ContentTemplate="{DataTemplate local:DashboardPage}"/> </FlyoutItem> <FlyoutItem Title="Notifications"> <ShellContent ContentTemplate="{DataTemplate local:NotificationsPage}"/> </FlyoutItem> <FlyoutItem Title="Settings"> <ShellContent ContentTemplate="{DataTemplate local:SettingsPage}"/> </FlyoutItem>Is this effect what you want:
You need to define three flyout items instead of putting them together in a single one.
Refer to the documentation for more details:
https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-items
@LandLu Thank you, that's exactly what I'm looking for. Somehow I was under the impression you could only have one FlyoutItem as the root of the Shell.