Shell XAML Structures

shellstructures.md

Existing Structures

This is only showing browsable areas and just assume there's always a shell parent

Core Control => Aliases

• ShellItem (Design Hidden) => FlyoutItem and TabBar
  • ShellSection (Design Hidden) => Tab (Bottom Tabs)
    • ShellContent => (Top Tabs represents)

Navigation note(s)

• Pushing global route pages happens at the Shell Section Level. So if you push a page onto the stack you've left that Shell Section and that Shell section (with its top tabs) is now one level down in the stack.
  • Possible improvements here is the ability to push pages onto the stack that have top tabs defined

Xaml Variations and resulting views

One flyout item with one page, two bottom tabs, First tab has two top tabs

<FlyoutItem>
    <Tab Title="two top tabs">
        <ShellContent>
        <ShellContent>
    <Tab>
        <ShellContent>

One flyout item with one page and three bottom tabs. Each Shell content gets wrapped with implicit Tab element

<FlyoutItem>
    <ShellContent>
    <ShellContent>
    <ShellContent>

Two flyout items each with one tab

<FlyoutItem>
    <Tab />
</FlyoutItem>
<FlyoutItem>
    <Tab />
</FlyoutItem>

Two flyout items with top and bottom contents. Tabbar won't show up in flyout menu and when you are on the tabbar route the flyout menu won't be visible

<TabBar>
    <Tab Title="two top tabs">
        <ShellContent>
        <ShellContent>
    <Tab>
        <ShellContent>
</TabBar>

Two flyout items (Equivalent to above) Shell will automatically wrap these two tabs in a single tabbar

<Shell>
    <Tab Title="two top tabs">
        <ShellContent>
        <ShellContent>
    <Tab>
        <ShellContent>
</Shell>

Two flyout items each with one tab

<ShellContent />
 <ShellContent />

In any case that results in 1 Tab, it is not displayed by default. I think that makes those scenarios not confusing.

In the case of 1 Flyout Item, it is displayed by default. I'm undecided on if that's confusing...I think it is fine. The FlyoutBehavior makes it easy to express your intention if it is truly to not see the Flyout...but then why did the developer even specify the FlyoutItem to begin?

<FlyoutItem>
    <ShellContent>
    <ShellContent>
    <ShellContent>

This one is confusing insomuch as it produces bottom tabs, but nowhere has the developer expressed tabs. I would say this falls into the category of a scenario we would not promote, and advanced users could use it if they found the brevity to their advantage.

However, if we introduce TabBar as an alias for ShellItem, then this makes a lot more sense:

<TabBar>
    <ShellContent>
    <ShellContent>
    <ShellContent>

Similarly, this is an advanced usage to produce 2 flyout items that we should not advertise:

<ShellContent />
 <ShellContent />