Xamarin Forms Shell

Finally, Xamarin team releases a set of features in Xamarin Forms that makes easier and quicker to get started with than before.

One of them, as you might have known is Shell template that has been there since pre-release version but now it’s has been released in stable version along with other new features introduced by Xamarin Forms 4.0.0, so no need to set the experimental flag in each platform main entry class anymore to activate this Shell feature.

For you who still have not heard about Shell yet, it is at least in this first major version, introduces an application foundation or bootstrap consists of Flyout and Tabs components that easily to be set up and provide many properties as modern navigation components.

In addition, Navigation Routing and Deep linking capability that never been this easier to be implemented thanks to Route and its query parameters and the last, Shell Page Search control. All those come with a bunch of overridable methods if you would like to have custom ones and all controls implemented fast renderers pattern.

In this article, I’m trying to introduce in brief these new set of fundamental features which required by most mobile apps.

Common Navigation User Experience

Flyout and Tabs are 2 top-level navigation components brought by Shell to help you accomplish navigation tickets in your project as shown in the following images below.

An application can have both Flyout and Tab bar or only one of them at a time. Besides its appearance and behaviour is greatly customizable through the properties and methods that the various Shell classes expose, it's also possible to create a Shell custom renderer when more refined platform-specific customizations are required like other custom renderers. Followings are overridable methods provided by Shell Renderer class that can be customized and exported from each platform project.

 iOS    Android    SetElementSize
 CreateFlyoutRenderer
 CreateNavBarAppearanceTracker
 CreatePageRendererTracker
 CreateShellFlyoutContentRenderer
 CreateShellItemRenderer
 CreateShellItemTransition
 CreateShellSearchResultsRenderer
 CreateShellSectionRenderer
 CreateTabBarAppearanceTracker
 Dispose
 OnCurrentItemChanged
 OnElementPropertyChanged
 OnElementSet
 UpdateBackgroundColor    CreateFragmentForPage
 CreateShellFlyoutContentRenderer
 CreateShellFlyoutRenderer
 CreateShellItemRenderer
 CreateShellSectionRenderer
 CreateTrackerForToolbar
 CreateToolbarAppearanceTracker
 CreateTabLayoutAppearanceTracker
 CreateBottomNavViewAppearanceTracker
 OnElementPropertyChanged
 OnElementSet
 SwitchFragment
 Dispose  

URI-Based Navigation Scheme

Routes

Optimized navigation using Routes enables the user experience to navigate to a specific page without having to follow a set navigation hierarchy. Routes can be defined on FlyoutItem, Tab, and ShellContent objects in code behind or tag in XAML, through their Route properties. Given the sample visual hierarchy of app navigation:

‍

To navigate to the ShellContent object for the ‘dogs’ route, the absolute route URI is//animals/domestic/dogs. Similarly, to navigate to the ShellContent object for the ‘about‘ route, the absolute route URI is //about.

Additional routes can be explicitly registered for any sort of pages that does not exist in the Shell visual hierarchy.

‍

Navigation can be performed by either by passing a valid route string/URI absolute route path or relative route (after registering the unique route name to the routing table) into GoToAsync() method of Current property of Shell object.

‍

Or

‍

Deep Linking

When a Shell app receives Deep Link or App Link, the URL can be easily processed by removing the schema and app domain. And then it leaves the rest path including the query parameters as an argument to navigate to the target page. This is also can be used as in-app navigation.

‍

And the target View Model can capture the parameter by decorating the View Model property with Query Property Attribute which specifies the name of the property that will receive the data, with the second argument specifying the query parameter id. Note that when you pass the query parameter, the value is being URL encoded so it needs to be decoded before use. Multiple Query Property Attribute objects are also supported in a class.

‍

Integrated Search Control with Shell Page

The integrated search functionality in the pages is also provided by Shell application to save development time. With a search box that can be added to the top of each page, the search query is handled by custom Search Handler that processes the underlying data source and returns the results back to the search box and displays them in a popup list.

‍

‍

That’s all the brief in introduction of Xamarin Forms Shell. See you in next article.

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/