July 8, 2019

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 inbrief these new set of fundamental features which required by most mobile apps.

Common Navigation UserExperience

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 haveboth Flyout and Tab bar or only one of them at a time. Besides its appearanceand behaviour is greatly customizable through the properties and methods thatthe various Shell classes expose, it's also possible to create a Shell customrenderer when more refined platform-specific customizations are required likeother custom renderers. Followings are overridable methods provided byShellRenderer class that can be customized and exported from each platformproject.

 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 NavigationScheme

 

Routes

Optimized navigation using Routes enablesthe user experience to navigate to a specific page without having to follow aset navigation hierarchy. Routes can be defined on FlyoutItem, Tab, and ShellContent objects in code behind ortag in XAML, through their Route properties. Given the sample visual hierarchyof 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 URIis //about.

Additional routes can be explicitlyregistered for any sort of pages that does not exist in the Shell visualhierarchy.

Navigation can be performed by eitherbypassing a valid route string/URI absolute route path or relative route (afterregistering 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 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. Note that 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 SearchControl 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 inintroduction of Xamarin Forms Shell. See you in next article.

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