Share via

Xamarin.Forms Shell introduction

  • Article

Xamarin.Forms Shell reduces the complexity of mobile application development by providing the fundamental features that most mobile applications require, including:

  • A single place to describe the visual hierarchy of an application.
  • A common navigation user experience.
  • A URI-based navigation scheme that permits navigation to any page in the application.
  • An integrated search handler.

In addition, Shell applications benefit from an increased rendering speed, and reduced memory consumption.

Important

Existing applications can adopt Shell and benefit immediately from navigation, performance, and extensibility improvements.

Application visual hierarchy

In a Xamarin.Forms Shell application, the visual hierarchy of the application is described in a class that subclasses the Shell class. This class can consist of three main hierarchical objects:

  1. FlyoutItem or TabBar. A FlyoutItem represents one or more items in the flyout, and should be used when the navigation pattern for the application requires a flyout. A TabBar represents the bottom tab bar, and should be used when the navigation pattern for the application begins with bottom tabs and doesn't require a flyout.
  2. Tab, which represents grouped content, navigable by bottom tabs.
  3. ShellContent, which represents the ContentPage objects for each tab.

These objects don't represent any user interface, but rather the organization of the application's visual hierarchy. Shell will take these objects and produce the navigation user interface for the content.

Note

Pages are created on demand in Shell applications, in response to navigation.

For more information, see Create a Xamarin.Forms Shell application.

The navigation experience provided by Xamarin.Forms Shell is based on flyouts and tabs. The top level of navigation in a Shell application is either a flyout or a bottom tab bar, depending on the navigation requirements of the application. The following example shows an application where the top level of navigation is a flyout:

Screenshot of a Shell flyout, on iOS and Android

In this example, some flyout items are duplicated as tab bar items. However, there are also items that can only be accessed from the flyout. Selecting a flyout item results in the bottom tab that represents the item being selected and displayed:

Screenshot of Shell bottom tabs, on iOS and Android

Note

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

Each tab on the tab bar displays a ContentPage. However, if a bottom tab contains more than one page, the pages are navigable by the top tab bar:

Screenshot of Shell top tabs, on iOS and Android

Within each tab, additional ContentPage objects that are known as detail pages, can be navigated to:

Screenshot of Shell page navigation, on iOS and Android

Shell uses a URI-based navigation experience that uses routes to navigate to any page in the application, without having to follow a set navigation hierarchy. In addition, it also provides the ability to navigate backwards without having to visit all of the pages on the navigation stack. For more information, see Xamarin.Forms Shell navigation.

Xamarin.Forms Shell includes integrated search functionality that's provided by the SearchHandler class. Search capability can be added to a page by adding a subclassed SearchHandler object to it. This results in a search box being added at the top of the page. When data is entered into the search box, the search suggestions area is populated with data:

Screenshot of Shell search, on iOS and Android

Then, when a result is selected from the search suggestions area, custom logic can be executed such as navigating to a detail page.

For more information, see Xamarin.Forms Shell search.

Platform support

Xamarin.Forms Shell is fully available on iOS and Android, but only partially available on the Universal Windows Platform (UWP). In addition, Shell is currently experimental on UWP and can only be used by adding the following line of code to the App class in your UWP project, before calling Forms.Init:

global::Xamarin.Forms.Forms.SetFlags("Shell_UWP_Experimental");

For more information about the status of Shell on UWP, see Xamarin.Forms Shell Project Board on github.com.