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>