Forum Xamarin.Forms

Shell bottom tabs for sub-section under flyout

JoeMankeJoeManke USMember ✭✭✭✭✭
edited September 2020 in Xamarin.Forms

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

Answers

  • NMackayNMackay GBInsider, University admin

    @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

  • JoeMankeJoeManke USMember ✭✭✭✭✭

    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.

  • NMackayNMackay GBInsider, University admin

    @JoeManke said:
    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.

  • JoeMankeJoeManke USMember ✭✭✭✭✭

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

Sign In or Register to comment.