ShellContent

ShellContent

ShellContent is the lowest-level element in the Shell hierarchy. It represents a single page in your app that is displayed when a tab or menu item is selected.

Where does ShellContent fit?

Shell
 └── TabBar (or Flyout)
      └── Tab
           └── ShellContent → Your Page
    

Key Points

• Each ShellContent wraps a ContentPage (or uses a DataTemplate pointing to a page).
• You can define Route, Title, and Icon for navigation and UI.
• Multiple ShellContent items can exist inside a single Tab for hierarchical navigation.

Example

<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
       xmlns:local="clr-namespace:MyApp">

    <TabBar>
        <Tab Title="Home" Icon="home.png">
            <ShellContent Route="home"
                          Title="Home"
                          ContentTemplate="{DataTemplate local:HomePage}" />
            <ShellContent Route="details"
                          Title="Details"
                          ContentTemplate="{DataTemplate local:DetailsPage}" />
        </Tab>

        <Tab Title="Profile" Icon="user.png">
            <ShellContent Route="profile"
                          Title="Profile"
                          ContentTemplate="{DataTemplate local:ProfilePage}" />
        </Tab>
    </TabBar>

</Shell>
    

👉 : Pages are created on demand in Shell apps, in response to navigation.

👉 : When the flyout isn't open the bottom tab bar can be considered to be the top level of navigation in the app.

Best Practices

• 💡 Use Route for navigation: await Shell.Current.GoToAsync("details");
• 💡 Keep titles short and descriptive.
• 💡 Use icons for better UX in tabs.
• 💡 Group related pages under the same Tab using multiple ShellContent items.
• 💡 Ensure routes are unique across the app for deep linking.