Shell is the .NET MAUI application container for defining a multipage navigation hierarchy in XAML. It combines tabbed and flyout navigation with routes, so the app’s main destinations can be organized in one place rather than assembled page by page. Use it when an app has distinct areas that fit tabs, a flyout, or both. section 7.4 section 7.5 section 7.5.3
Shell is useful because it can:
- Map the app’s navigational structure in one Shell file, making pages and their arrangement easier to inspect and rearrange. section 7.5
- Create pages with constructor-injected dependencies resolved through the built-in .NET dependency injection container. section 7.5
- Give pages URL-like routes for programmatic navigation, deep links, and passing navigation data through query parameters or navigation state. section 7.5 section 7.6
- Partition a large app into Shell Sections, with flyout items leading to sections and tabs grouping pages within them. section 7.5.1 section 7.5.2
Build a tab-based app shell
Start with an AppShell XAML root. Put the primary destinations in a TabBar. Each Tab supplies a title and optional icon, while ShellContent names the page through a DataTemplate. The Input and Reports pages then become automatically reachable through the tab bar. <Shell ...> <TabBar> <Tab Title="Input" Icon="icon_input.svg"> <ShellContent ContentTemplate="{DataTemplate pages:InputPage}" /> </Tab> <Tab Title="Reports" Icon="icon_report.svg"> <ShellContent ContentTemplate="{DataTemplate pages:ReportPage}" /> </Tab> </TabBar> </Shell> Assign explicit Route values when code or external navigation needs stable route names. Tabs and flyout items can declare their own routes; pages outside either navigation surface can be registered separately. section 7.5.3 section 7.5.4
Navigate to a registered route with Shell.Current.GoToAsync("myroute"). This differs from hierarchical navigation because navigation targets a route instead of a page instance. For a page such as a login screen that should not appear as a tab or flyout item, register it in the AppShell constructor with Routing.RegisterRoute("login", typeof(LoginPage)), then navigate to that route. section 7.5.4
A flyout can contain navigation-oriented FlyoutItem entries and action-oriented MenuItem entries. A MenuItem is appropriate for an operation such as logout: it runs code through a Clicked handler or Command rather than opening a page. The flyout header and footer can use inline XAML, templates, or imported views. section 7.5.1 section 7.5.3
Figure 7.13 The flyout menu in Shell consists of a customizable header and footer, flyout items for navigating the app, and menu items for executing code.
The flyout layout separates persistent branding and actions from page navigation: a customizable header and footer frame flyout items, while menu items execute commands. section 7.5.1
Shell is not required for every app. It is unnecessary for a single-page app or one based on hierarchical navigation, and it may be a poor fit for line-of-business desktop interfaces that do not use web- or mobile-style tabs and flyouts. The default .NET MAUI app template includes Shell, while a comparable blank template can omit it. section 7.5.3 section 7.4
