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 ShellRenderer class that can be customized and exported from each platform project.
URI-based Navigation Scheme
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 bypassing 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.
When Shell app receive Deep Link / App Link, the URI can be easily processed by removing the schema and app domain and leave 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 ViewModel can capture the parameter by decorating the ViewModel property with QueryPropertyAttribute which specifies the name of the property that will receive the data, with the second argument specifying the query parameter id. To be noted, when you pass the query parameter, the value is being URL encoded, so it needs to be decoded before use. Multiple QueryPropertyAttribute objects are also supported in a class.
Integrated Search Control with Shell Page
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 then handled by custom Search Handler which does processing of underlying data source and returns the results back to the search box and display them in a popup list.